Czyli rzecz o tym dlaczego frontendowcy nienawidzą produktu Microsoftu. Oczywiście powodów jest całe mnóstwo. Dzisiaj przedstawię tylko jeden, który ostatnio przyprawił mnie o niemały zawrót głowy. Nie śmiałem w ogóle przypuszczać, aby linear-gradientIE11 sprawić mógł jakiekolwiek problemy.

Wszyscy wiemy, że producent wskazanej przeglądarki internetowej zawsze zostaje w tyle. Kto się dotąd nie pogodził – czas najwyższy to uczynić. Jednak wobec kłopotliwej obsługi gradientów do wersji 9. liczyłem, że ten temat już jest zamknięty. Nic bardziej mylnego.

Artykuł dotyczy „innego” przykładu, aniżeli wszelkie tutorialowe. Jest to jednak swego rodzaju must have przeglądarki, by nadążać za tematem. Czego dotyczy problemowy przypadek?

W drodze do minimalizmu

Wyobraź sobie, że masz kontener, który wypełnia grafika i masz na nim umieścić półprzezroczystą siatkę. Dla uproszczenia załóżmy wymiar kontenera 200×200 i siatka 10% x 10%. Utrudnienie natomiast polega na tym, że wykorzystywaną jednostką skoku muszą być procenty.

Pierwsze wnioski:

  • 9 linii w pionie
  • 9 linii w poziomie
  • skok co 10%

Domyślacie się, że rozwiązaniem w naszym przypadku będzie gradient (bo to jest tematem tego artykułu), ale są też inne sposoby:

  • można utworzyć 18 (bądź 9, wykorzystując pseudoelementy before after) węzłów odpowiadających za grid
  • można też pokombinować przezroczystą grafiką .png 20×20, w której każdy dziesiąty piksel w poziomie i pionie będzie półprzezroczysty (to rozwiązanie nie jest skalowalne)
  • można utworzyć canvas i rysować na nim grid

Każdy kolejny pomysł bardziej hardcorowy. My natomiast, zgodnie z minimalistycznym podejściem, nie potrzebujemy żadnego dodatkowego węzła HTML.

Może istnieć konieczność dodania jednego dodatkowego węzła. Jest to podyktowane na przykład ograniczeniem obszaru nakładania gradientu.

Wszystko się wyjaśni o co mi chodzi, gdy zajrzycie na poniższy przykład (link):

 

Pewnie pomyśleliście „on tu plecie o minimalizmie, a wrzucił taki gruby CSS„. Słusznie, nie jest to zbyt piękne rozwiązanie, ale wolę mieć czysty kod HTML i siatkę pure CSS. Coś za coś, jednak mój przykład jest skrajny i ma tylko pokazać możliwości gradientu oraz zobrazować problem, który podejmuję w artykule.

Jeśli otworzyliście przykład na Chrome, Operze lub Firefoxie na pewno macie rezultat bez skazy. Ale na IE nie jest tak dobrze. Tutaj efekt: link.

O ile zdarza się, że po załadowaniu strony gradient wygląda nieskazitelnie, o tyle zdarzenie onresize wywołane na ramce lub jakiekolwiek inne powodujące przerysowanie obiektu, prowadzi do efektu rozmycia linii na całej szerokości pola (czyli od poprzedniej linii). Co twórcy zrobili źle? Nie wnikam. Wniosek jest jeden – nie można wykorzystywać gradientu przy jednoczesnym wykorzystywaniu funkcji calc do obliczania granicy gradientu. Przynajmniej w przypadku, gdy granice na siebie nachodzą. Tak, jak tutaj – „calc(10% – 1px)” – jest końcem przezroczystości oraz początkiem półprzezroczystości.

Moja hipoteza dotycząca źródła problemu w IE – funkcja przerysowując gradient nie bierze pod uwagę kolejności progów w linear-gradient. Ale jest to ściśle związane z funkcją calc, bowiem ustawiając progi na stałe piksele problem nie występuje!

 

Złoty środek

Nadszedł czas na rozwiązanie, które paradoksalnie trochę oczyści nam CSS. Zatem do rzeczy. Właściwość background tudzież background-image pozwala umieścić wiele źródeł tła, a odnoszące się do nich właściwości background-sizebackground-position pozawalają powiązać pozycję i wymiar z określonym źródłem. Rozwiązanie: link.

 

W przypadku, gdy w tle nie występuje obrazem (lub innego typu background-image) i jednocześnie mamy wyłącznie linie poziomie (lub tylko pionowe) nasz CSS trochę się minimalizuje, co oczywiście jest oczekiwane, chociaż nie jest obowiązkowe, gdyż rzadko zdarza się byśmy musieli rysować aż tyle linii w tle, co pokazuje przykład. Przykład to pokazujący: link.

Dlaczego procenty?

Niektórzy uznali by to pytanie zapewne co najmniej nie na miejscu, gdyby nie tematyka, której dotyczy 🙂 Ale teraz na poważnie.

Zmieniając jedno z założeń podanych na początku, mówiące że „siatka ma mieć 10% x 10%” na „siatka musi mieć 20px x 20px i kontener ma stały rozmiar”, istnieje jeszcze prostsze rozwiązanie.

Korzystając z procentów, jako jednostki nie mogliśmy użyć właściwości box-shadow, która również pozwala ustalić wiele efektów („cieni”). Teraz możemy, jednak będzie nam potrzebny, albo nowy dedykowany węzeł rozmiaru naszego kontenera, ale narysowany warstwę wyżej, albo pseudoelement. Spójrzcie na rozwiązanie (link):

 

Podsumowanie

Wracając z dalekiej wycieczki zwanej box-shadow do naszego problemu z gradientem trzeba mimo wszystko powiedzieć, że niestety IE to zbiór dużo większych problemów niż wyżej opisany. Chociażby flexbox, z którym Microsoft poradził sobie dopiero w wersji Edge. Na te różnice jesteśmy skazani tym bardziej, że standard CSS rozwija się niemal w tempie JS. Na całe szczęście czasy IE6-9 już minęły bezpowrotnie…

P.S. Szukacie inspiracji do ograniczenia źródła kodu HTML? Zajrzyjcie tutaj 🙂