Zespół Chrome był w tym roku licznie reprezentowany na konferencji CSS Day. Prowadziliśmy punkt pomocy dla usług porównywania cen, w którym odpowiadaliśmy na pytania uczestników. Mieliśmy też tablicę, na której pytaliśmy, czego ich zdaniem brakuje w usługach porównywania cen. W tym poście podzielę się wynikami odpowiedzi na to pytanie, a także poproszę Cię o wypełnienie tej krótkiej ankiety, aby dowiedzieć się, czego Twoim zdaniem brakuje w HTML-u i CSS-ie. Czy zgadzasz się z uczestnikami CSS Day?
10 najczęstszych próśb
Uczestnicy mieli zapisywać pomysły na karteczkach samoprzylepnych i dodawać je do tablicy. Użytkownicy mogą też głosować na pomysły, dodając naklejkę. Oto 10 najważniejszych funkcji.
Obsługa stylizowania danych wejściowych
Była to najczęściej zgłaszana prośba o dodanie funkcji – otrzymała 21 głosów. Chcesz mieć możliwość spójnego stylowania tych popularnych elementów interfejsu.
W zespole Chrome zdajemy sobie sprawę, że jest to jeden z największych problemów dla deweloperów, i pracujemy nad lepszymi rozwiązaniami. Na przykład elementy wyboru z możliwością dostosowania mają na celu umożliwienie wybrania nowego sposobu stylizowania. Możesz na przykład dodawać obrazy lub bardziej złożone style do opcji. Zaletą tego podejścia jest to, że w razie potrzeby można wrócić do zwykłego menu wyboru, co pozwala na stopniowe ulepszanie.
Ukryte wizualnie
Na konferencji CSS Day otrzymał 19 głosów, co czyni go drugim najpopularniejszym żądaniem. Prośba dotyczy sposobu dodawania treści używanych tylko przez czytniki ekranu. Może to być element HTML, w którym treść nie jest wyświetlana, a tylko odczytywana przez czytnik ekranu.
Obecnie użytkownicy zwykle osiągają ten efekt, tworząc klasę .visually-hidden, która ukrywa treść, ale nadal umożliwia dostęp do niej czytnikom ekranu.
To popularna prośba, ale są osoby, które uważają, że nie należy jej realizować. Więcej informacji znajdziesz w artykułach Visually hidden content is a hack that needs to be resolved, not enshrined i CSS WG issue 560.
position: sticky inside overflow:hidden
Ta prośba otrzymała 16 głosów. Obecnie funkcja position: sticky działa tylko wtedy, gdy wszyscy rodzice są overflow: visible.
Od 2017 roku istnieje otwarty problem dotyczący tej kwestii. Początkowy przypadek użycia, czyli umożliwienie używania znaku overflow: hidden do czyszczenia elementów pływających, może być dziś mniej potrzebny, ale w wątku opisano wiele innych scenariuszy.
Animuj do height: auto
12 osób chciało, aby animacja była skierowana w stronę height: auto. Z przyjemnością informujemy, że ta funkcja będzie dostępna na platformie internetowej dzięki właściwości CSS interpolate-size i funkcji calc-size().
Będą one dostępne od Chrome 129.
Więcej informacji o tych funkcjach znajdziesz w przyszłych postach.
Dodatkowe typy danych wejściowych
HTML5 wprowadził wiele różnych typów elementu <input>, np. type="email" dla adresu e-mail lub type="range" dla suwaka zakresu.
Podczas CSS Day otrzymaliśmy 10 głosów za dodanie większej liczby takich typów, np. podwójnego zakresu lub autouzupełniania z niestandardową listą danych.
Prawdziwe liczby losowe w CSS
Inne żądanie z 10 głosami dotyczyło prawdziwych liczb losowych w CSS. W przeszłości zgłaszano już takie przypadki i znaleziono obejście problemu w przypadku losowego parametru animation-duration.
Klasy w stylu mixin
CSS dodał kilka funkcji znanych wcześniej z preprocesorów CSS – zmienne z niestandardowymi właściwościami, a teraz także zagnieżdżanie CSS. Wielokrotnego użytku mixiny nie stały się jeszcze częścią języka, ale 7 uczestników CSS Day było zainteresowanych ich wprowadzeniem.
Grupa robocza CSS podjęła decyzję o rozpoczęciu prac nad specyfikacją tej funkcji. Możesz dodać swoje przemyślenia i przykłady użycia do dyskusji w tym wątku.
Style globalne w DOM cienia
Innym problemem, który ma długi wątek dyskusji na temat przypadków użycia, jest prośba o umożliwienie stosowania globalnych stylów CSS w cieniu DOM. Na CSS Day 6 osób poprosiło o to. Ta funkcja umożliwi stosowanie globalnych stylów resetowania również w komponentach internetowych, a pojedyncze pliki CSS będą działać we wszystkich komponentach witryny. Zapoznaj się z tym podsumowaniem przypadków użycia i daj nam znać, czy chcesz korzystać z tej funkcji.
Dzielenie jednostek mieszanych
Propozycja dotycząca Interop 2024
zawiera prośbę o umożliwienie dzielenia przez jednostki mieszane, np. calc(100vw / 1px). Uznano, że jest zbyt szeroki, aby uwzględnić go w Interop 2024, ale wielu deweloperów, w tym 6 osób na CSS Day, chciałoby, aby został wdrożony.
nth-letter
CSS ma kilka pseudoelementów, które działają tak, jakbyś umieścił/a element span wokół fragmentu treści. Na przykład pseudoelement ::first-letter
wybiera pierwszą literę pierwszego wiersza kontenera blokowego, do którego jest stosowany.
Na tej liście brakuje ::nth-letter, a o ::nth-letter prosisz nas od około 20 lat, więc wiemy, że jest to długo oczekiwana funkcja przez programistów internetowych. Podczas CSS Day 6 osób zagłosowało na tę funkcję, co sprawiło, że znalazła się ona na ostatnim miejscu naszej listy 10 najbardziej pożądanych funkcji.
Czy zgadzasz się z listą 10 najlepszych prezentacji na CSS Day?
Chętnie poznamy opinię szerszego grona odbiorców na temat tych problemów. Czy któryś z nich znalazł się w Twojej pierwszej dziesiątce? Jeśli nie, czy jest coś jeszcze, co chcesz zobaczyć w CSS i HTML? Daj nam znać, wypełniając ten krótki formularz. Odpowiedzi podsumujemy w kolejnym poście.