Co wynika z ankiet dotyczących stanu CSS i HTML?

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ń.

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><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-timeline
  • scroll-timeline
  • focusgroup atrybut
  • Animacja właściwości dyskretnych
  • image()

Zapoznaj się z pełnymi wynikami za pomocą listy odczytu CSSlisty 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.