Czy istnieją powody, aby nie używać stanów i ról ARIA jako selektorów w CSS?

Question

Obecnie pracuję nad udostępnieniem strony za pomocą, między innymi, tagów ARIA. Przyszło mi do głowy, że takie atrybuty, jak aria-invalid, będą dobrymi selektorami dla mojego CSS, a nie klasą .error.

Zaletą tego jest uproszczony, bardziej znaczący HTML, który jest łatwiejszy do pobrania z CSS (i JS). To powiedziawszy, nie widziałem tego zrobionego gdzie indziej, więc jestem podejrzliwy, są wady, aby wykorzystać znaczniki dostępności do stylizacji. Podejrzewam, że użycie nieskrępowanych selektorów atrybutów powoduje mniej wydajne CSS, ale czy są inne wady, których nie brałem pod uwagę?

Answer 1

Selektory atrybutów są bardzo elastycznym sposobem zarządzania stylami CSS o dużej skali, ponieważ selektory atrybutów zawsze będą miały specificity of 0-0-1-0.

[aria-*] selektory są idealnie dopasowane do stylizacji, a także polecam używanie atrybutów [data-*], aby wypełnić luki tam, gdzie może być potrzebne jednorazowe. Z pewnością selektorów klasy powinny być nadal stosowane, jednak można zrobić kilka bardzo eleganckie rozszerzenia Styl z selektorów atrybutów:

[data-foo] { 
    color: red; 
} 
[data-foo="bar"] { 
    color: blue; 
} 
[data-foo="fizz"] { 
    color: green; 
} 

Każda z tych selektorów ma taką samą specyficzność i kaskada pozwoli style, które należy stosować odpowiednio.

Można utworzyć własną formę zajęć za pomocą selektora [attr~="value"], jeśli zajdzie taka potrzeba.

Używanie "attribute contains" selector mogą być przydatne dla a technique that I call "classy images"

---

jeden z ukrytych korzyści przy użyciu atrybutów na zajęciach jest przyrost wydajności w JavaScript. Zamiast sprawdzać obecność klasy na elemencie (co jest wyjątkowo łatwe do zlikwidowania), przeglądarki od dłuższego czasu obsługują getAttribute, hasAttribute i setAttribute.