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:
1 2 3 | body { mask-image: linear-gradient(black 0%, transparent 100%) } p { mask-image: none } div { mask-image: url(tl.png), url(tr.png) } |
1 2 | img { mask-image: url(#mask) } span { mask-image: url(resources.svg#mask2) } |
1 2 | p { mask-image: url(#mask), url(tl.png) } img { mask-image: url(#mask), url(resources.svg#mask2) } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox"> <radialGradient id="radialFill"> <stop stop-color="white" offset="0"/> <stop stop-color="black" offset="1"/> </radialGradient> <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/> </mask> <style> rect { mask-image: url(#SVGMask); mask-source-type: luminance; } </style> <rect width="200" height="200" fill="green"/> |
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
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.
Niestety. Natomiast już teraz warto być na bieżąco. Maski mogą być rewolucyjnym rozwiązaniem w CSS.
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.
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ść!
To zapewne jest przyszłość internetu, jednak nigdy nie mogłem się „przełamać” i usiąść do nauki ASP.NET. Mam chyba zbyt mało motywacji i czasu :-(
A ja za dużą niechęć do MS ;)
dobre :)