CSS Masking – co może nas czekać w przyszłości?


26 lipca 2013 / Mr.Mr


CSS Masking - co nas czeka w przyszłości?W3C intensywnie pracuje nad najrozmaitszymi nowościami. Oprócz mitycznego już flex-box’a ostatnimi czasy dość intensywnie opisuje się możliwe zastosowania dla tzw. CSS Masking. Co to jest i jak może wyglądać przyszła rekomendacja? To mam nadzieję uda się nam przedstawić (pokrótce) na łamach tego artykułu.

CSS Masking daje nam możliwość używania arkusza stylów trochę tak jak używa się programu graficznego. Każdy kto kiedykolwiek miał coś wspólnego z tworzeniem stron internetowych pewnie kojarzy schemat znany z Photoshop’a, czy GIMP’a. Mniej więcej podobne możliwości chce nam zaoferować W3C w ramach tworzącej się specyfikacji CSS Masking.

Co to jest?

Maski w css pozwalają na częściowe lub całkowite ukrycie elementów wizualnych (zasłonięcie). Elementem, który tworzy maskę jest element graficzny. Dzięki temu osiągniemy efekt zbliżony do wspomnianego wyżej.

Skutki implementacji tej technologii na szerszą skalę są raczej oczywiste. Choć pewnie nie da się całkowicie zastąpić programów graficznych to jednak będziemy mieli większą możliwosć „obrabiania” grafik bezpośrednio w arkuszu stylów i nie będą do tego potrzebne sztuczki związane z pozycjonowaniem absolutnym.

Jak działają maski?

Nie będzie to wielkie zaskoczenie ;) Maski w CSS mają być jakby warstwami nakładanymi na inne. W ten sposób będziemy mogli dostosowywać je do naszych potrzeb i modyfikować wygląd np. zdjęć zamieszczanych na stronie www.

Zobaczmy kilka przykładów kodu ze strony W3C:

Powyższa składnia może wyglądać trochę obco, ale w końcu jest to nowość. Niestety im dalej zagłębiamy się w dokument W3C tym poziom trudności staje się większy:

Kiedy będzie można to stosować?

Na pewno nie dzisiaj i nie jutro. Wdrażanie powyższych rozwiązań w komercyjnych projektach było by bardzo niebezpieczne ponieważ Working Draft W3C może się jeszcze zmienić. To co możemy zrobić to poeksperymentować i zgłaszać uwagi do W3C – dzięki temu będziemy mieć realny wpływ na rozwój technologii internetowej.

Pozytywną stroną tego wszystkiego jest fakt, że po przeczytaniu dokumentu W3C widać, iż już niedługo (w takiej czy innej formie) otrzymamy potężne narzędzie operowania grafiką, które będzie dostępne bezpośrednio w arkuszu CSS naszej witryny. Mnogość nowych właściwości i wartości napawa nadzieją na przyszłość.

Wszystkie przykłady kodu pochodzą z dokumentu W3C: CSS Masking Level 1 W3C Working Draft 20 June 2013.

Image courtesy of Victor Habbick at FreeDigitalPhotos.net



7 odpowiedzi na “CSS Masking – co może nas czekać w przyszłości?”

  1. Marcin Jagielnicki pisze:

    Swoją drogą… i tak będziemy musieli czekać na implementację tego rozwiązania w różnych przeglądarkach, co też do szybkiego procesu nie należy.

    • Mr.Mr pisze:

      Niestety. Natomiast już teraz warto być na bieżąco. Maski mogą być rewolucyjnym rozwiązaniem w CSS.

    • Karol pisze:

      Dlatego powinniśmy nawoływać ludzi do korzystania z przeglądarek które szybko reagują na zmiany – mam tu na myśli chrome’a który najszybciej implementuje nowinki.

  2. Analityk programista pisze:

    Ja już piszę aplikacje używając Html5 css3 JavaScript i do tego ASP.NET dla SQL Server! Panowie to jest rewelacja i jedyna przyszłość!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *