Data publikacji: 6 grudnia 2024 r.
Wyniki State of CSS 2024 i State of HTML 2024 są już dostępne. W tym poście omawiamy niektóre z najciekawszych wyników tych badań.
Optymizm dotyczący platformy internetowej
Zanim przyjrzymy się niektórym problemom z HTML-em i CSS-em, warto przyjrzeć się wynikom ankiet, które wskazują na duży optymizm wobec platformy. Na pytanie, czy platforma internetowa idzie w ogóle w odpowiednim kierunku, 58% respondentów biorących udział w badaniu State of HTML zgodziło się z tym stwierdzeniem, a 18% z nimi zdecydowanie.
W przypadku CSS :has() okazała się ulubioną nową funkcją CSS, ponieważ 36% użytkowników uznało ją za najlepszą nową funkcję. Drugim najpopularniejszym rozwiązaniem jest @container z 17%, które jest równorzędne z zagnieżdżeniem CSS.
Czego używasz?
Dane z CSS zawierały kilka niespodzianek. Na przykład ponad 75% użytkowników korzystało z efektów filtrów CSS, co czyni tę funkcję najpopularniejszą. Biorąc pod uwagę liczbę skarg na kaskadę na przestrzeni lat, ciekawostką jest, że warstw kaskadowych używa tylko 18,9% użytkowników. Może istnieje tu związek z wdrożeniem narzędzi takich jak Tailwind, które zapobiegają częstotliwości występowania problemów związanych z kaskadą.
Elementy punktowe, takie jak <main> i <nav>, znajdują się na szczycie ankiety HTML dotyczącej używanych przez Ciebie elementów. Cieszymy się, że tak wiele osób korzysta z leniwego ładowania i technik tworzenia obrazów dostosowanych do różnych urządzeń.
Najczęstsze problemy z obsługą przeglądarek
W trakcie rozmów z deweloperami zawsze pojawiają się problemy z interoperacyjnością lub obsługą funkcji przez przeglądarki. W ankiecie poprosiliśmy Cię bezpośrednio o opis problemów, Oto 10 najbardziej problematycznych funkcji, uszeregowanych według odsetka osób, które je wybrały:
- Popover API
- Umieszczenie kotwicy
- Zapytania dotyczące kontenerów
:has()- Widok zagnieżdżania CSS
- Transition API
- Subgrid
- Siatka
<dialog>- Progresywne aplikacje internetowe
Umieszczanie elementów kotwiczenia uzyskało 11% w obu ankietach, a interfejs View Transition API – 9% w ankiecie dotyczącej stanu CSS i 8% w ankiecie dotyczącej stanu HTML, co pokazuje, jak bardzo deweloperzy cenią te funkcje.
Co ciekawe, niektóre funkcje są ze sobą kompatybilne. Zapytania o kontener,
:has(), zagnieżdżanie CSS i subgrid są dostępne w wersji podstawowej. API popovera również byłoby dostępne, gdyby nie problem z lekkim odrzuceniem na iOS. Element <dialog> jest teraz dostępny powszechnie, podobnie jak układ siatki CSS. Warto przyjrzeć się tym wynikom, aby dowiedzieć się, z czym mają problem użytkownicy. Odpowiedzi na temat grida często odnoszą się do tego, że jest on trudny do nauczenia, a nie do rzeczywistego problemu z współdziałaniem.
Mamy nadzieję, że Baseline pomoże deweloperom zrozumieć stan rzeczy i sprawdzić, czy problem, z którym się borykają, jest spowodowany brakiem zgodności z przeglądarką czy czymś innym. Cieszymy się, że te ankiety wskazują na stan funkcji w wersji podstawowej. Stan dostępności w różnych przeglądarkach w przypadku najczęstszych problemów z usługą porównywania cen znajdziesz na stronie webstatus.dev.
Brakuje niektórych funkcji
W ankietach pytamy też o to, których funkcji i możliwości brakuje na platformie. Dzięki temu możemy zobaczyć, co jest nadal trudne do wykonania. W przypadku tego pytania wskaźnik odpowiedzi był niższy, ale w ankiecie State of CSS najczęściej pojawiały się pytania o mixiny, logikę warunkową i layout typu masonry.
Co ciekawe, użytkownicy prosili też o selektor rodzica (:has() zapewnia tę funkcję) i zagnieżdżanie, które jest już dostępne i znajduje się w wersji podstawowej.
Pytanie, na które odpowiadali uczestnicy badania State of HTML, brzmiało: „Gdyby można było dodać 3 elementy do HTML, jakie by to były?” 51% osób, które wzięły udział w badaniu, wybrało tabele danych. Inne popularne opcje to karty i przełączniki.
Czego chcesz się dowiedzieć?
Jeśli chcesz dowiedzieć się więcej o tych treściach po wypełnieniu ankiety, możesz je dodać do listy do czytania. To cenne dane, zwłaszcza jeśli zajmujesz się tworzeniem treści dla programistów. Poniższa lista zawiera 10 najpopularniejszych funkcji z obu ankiet, uszeregowanych według odsetka osób, które dodały je do swojej listy.
- CSS
hanging-punctuation - CSS
offset-path @scope- Umieszczenie kotwicy
- Element niestandardowy „Wybierz”
view-timelinescroll-timelinefocusgroupatrybut- Animacja właściwości dyskretnych
image()
Zapoznaj się z pełnymi wynikami za pomocą listy odczytu CSS i listy odczytu HTML.
Jeden sygnał ze społeczności internetowej
Chrome obsługuje te ankiety, ponieważ jest to jeden ze sposobów, dzięki którym możemy uzyskać informacje o Twoich największych problemach i tym, co najbardziej Cię interesuje na platformie internetowej. Nie jest to jedyny sygnał, którego używamy, ale w ten sposób możesz bezpośrednio przekazać nam swoje opinie. Jeśli wypełniłeś(-aś) jeden lub oba te ankiety – dziękujemy! Pomagasz nam ulepszać internet w sposób, który Ci odpowiada. Jeśli chcesz pomóc, możesz jeszcze wziąć udział w The State of JS.