Od czasów HTML5 pola tekstowe formularza obsługują atrybut „placeholder”, który krótko mówiąc pozwala pokazać przykładowy tekst w pustym inpucie. Po więcej info odsyłam tutaj. Ja chciałem natomiast opisać, jak dopiero po paru latach zorientowałem się, że nieświadomie pisałem błędny CSS.

Taki tekst placeholdera można stylować jak wszystko inne (prawie) w CSSie, czyli może mieć np. inny kolor niż wpisana później wartość. Jednak żeby to zadziałało w większości przeglądarek trzeba pamiętać o „vendor prefixach”. A te działają trochę inaczej niż zwykle.

Przykład na border-radiusie:

.element {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

Przeglądarka, jeśli nie rozpoznaje danej właściwości, po prostu ją pomija. Dlatego w powyższym przykładzie Firefox (-moz) zignoruje pierwszą właściwość. Proste. I to wie chyba każdy, kto pisze CSSa.

Jak to wygląda w przypadku placeholderów? Vendor prefixy trzeba dodać nie do właściwości, a do samego selektora. Więc poprawny kod będzie wyglądał w ten sposób:

input::-webkit-input-placeholder { 
    color: red; 
}
 
input::-moz-placeholder { 
    color: red; 
} 

input:-ms-input-placeholder { 
    color: red; 
} 

input::placeholder { 
    color: red; 
}

Natomiast niepoprawny kod, i taki właśnie pisałem przez kilka lat, wygląda w ten sposób:

input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::placeholder { 
    color: red; 
}

Czyli zwyczajnie selektory oddzielone przecinkami. Jest krótszy i „czystszy” w formie. Podejrzewam, że nie tylko dla mnie na pierwszy rzut oka wygląda to poprawnie. A dlaczego nie działa? Bo, tak jak wspomniałem wcześniej – gdy przeglądarka nie rozpozna jednej wartości, to ignoruje całość aż do końca:

  • Jeśli tą wartością jest jakaś właściwość (np. -moz-border-radius) to przeglądarka ignoruje kod aż do najbliższego średnika.
  • Jeśli tą wartością jest selektor (np. input::-webkit-input-placeholder) to przeglądarka ignoruje kod aż do zamykającej klamry } – czyli ignoruje wszystko :).

Po więcej teorii odsyłam tutaj.

Mała pierdoła, a widziałem, że już kilku frontendowców się na tym złapało.

Dodaj komentarz