case study - placeholder
CSS

O tym, jak jeden placeholder wywrócił moje życie do góry nogami

Już Wam tłumaczę, o co chodzi. Była sobie makieta strony internetowej. A w niej input wraz placeholderem. Chcąc być tym dobrym developerem, o którym marzy po nocach każdy grafik – postawiłam sobie za punkt honoru stylowanie techniką pixel perfect. Więc zabieram się za tego placeholera, pfff jakie proste, pfff jakie przyjemne. Szkoda tylko, że nie działa. Whyyy?

Popatrzcie tylko na ten kawałek kodu. UWAGA, TO ZŁY KOD. BARDZO ZŁY KOD.

/* POWTARZAM - TO NIE BĘDZIE DZIAŁAĆ */
::-webkit-input-placeholder, /* WebKit, Blink, Edge */
:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
::-moz-placeholder, /* Mozilla Firefox 19+ */
:-ms-input-placeholder, /* Internet Explorer 10-11 */
::-ms-input-placeholder, /* Microsoft Edge */
::placeholder { /* Most modern browsers */
   color: green;
   opacity:  1;
}

Ja nie powinnam się tym chwalić. Kto to widział, tak się błaźnić pośród ludzi. Ale mam nadzieję, że moja ofiara nie pójdzie na marne i uratuję od podobnej wtopy choć jednego developera.

To jak, wiecie, co jest nie tak z powyższym kodem?

a group of selectors containing an invalid selector is invalid

Źródła: Selectors level 3 (Recommendation) – rozdział 12, ale też Selecors level 4 (Working Draft) – rozdział 3.9 lub też podrozdział “Partial Implementations”. Piszę dokładnie co i jak bo te linki do konkretnych sekcji nie zawsze działają na tym w3.org. Dla mniej zdeterminowanych – stack.

W skrócie: często zdarza się, że w kodzie posiadamy grupę różnych selektorów CSS, po przecinku, po bożemu, bo przecież tak bardzo unikamy redundancji kodu, i w ogóle CSSy są przejrzyste, a my jesteśmy fajni. Ale! Musimy pamiętać, że jeśli jakikolwiek pojedynczy selektor z grupy okaże się nieprawidłowy (invalid) – to cała grupa selektorów zostanie zignorowana. Koniec filozofii.

W powyższym przykładzie oczywiste jest, że otwierając stronę w np. Chrome – co najmniej selektor :-moz-placeholder okaże się nieprawidłowy – a w konsekwencji cała grupa stylów przepadnie. Wniosek jest taki, że NIGDY NIE GRUPUJEMY SELEKTORÓW DEDYKOWANYM RÓŻNYM PRZEGLĄDARKOM. Grupujemy tylko selektory dla jednej konkretnej przeglądarki. Np.

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: green;
}
input:-moz-placeholder,
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: green;
   opacity:  1;
}
input::-moz-placeholder,
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: green;
   opacity:  1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: green;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder { /* Microsoft Edge */
   color: green;
}
input::placeholder,
textarea::placeholder { /* Most modern browsers */
   color: green;
}

W przeciwnym przypadku dane style nie będą nigdzie działać. Albo raczej będą nigdzie działać. No rozumiecie, o co chodzi.

Czemu tak się dzieje? Z prostego powodu – ułomności parsera CSSa. Wnikliwą wypowiedź na ten temat znajdziecie tutaj.

Dobrą praktyką jest utworzenie sobie specjalnych mixinów do stylów zależnych od przeglądarek. Choć wiadomo – należy również rozważyć, czy dla twojego konkretnego przypadku nie okaże się to przerost formy nad treścią.

Jeju, kiedy uświadamiam sobie, że o tej regule należy pamiętać nie tylko w kontekście zwykłego placeholdera, ale każdego, dosłownie KAŻDEGO selektora, jaki piszę – określenie “człowiek od CSSów” zaczyna brzmieć dumnie.

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę