Nowe skróty właściwości logicznych i nowe właściwości wstawiania w Chromium.
Od wersji Chromium 69 (3 września 2018 r.) właściwości logiczne i wartości pomagają programistom zachować kontrolę nad układami międzynarodowymi, stosując style logiczne, a nie fizyczne, kierunek i wymiary. W Chromium 87 zostały wprowadzone skróty i offsety, aby ułatwić zapis tych właściwości logicznych i wartości. Dzięki temu Chromium uzyskuje dostęp do przeglądarki Firefox, która od wersji 66 obsługiwała skróty klawiszowe. W Safari są one gotowe w wersji testowej.
Przepływ dokumentów
Jeśli znasz już właściwości logiczne, osie w tekście i bloki oraz nie chcesz zapomnieć o nich, możesz przeskoczyć wyżej. A jeśli nie, przypominamy o tym.
W języku angielskim litery i słowa unoszą się od lewej do prawej, a akapity są ułożone jeden nad drugim. W tradycyjnym języku chińskim litery i słowa ułożone są od góry do dołu, a akapity ułożone od prawej do lewej. Tylko w tych 2 przypadkach: gdy napiszemy, jak piszemy w kodzie CSS z tekstem „margin top” w akapicie, będziemy prawidłowo stosować odstępy między stylem języka. Jeśli strona została przetłumaczona na chiński tradycyjny z języka angielskiego, marginesy mogą nie mieć sensu w nowym trybie pisania w orientacji pionowej.
W związku z tym ta obudowa nie jest zbyt przydatna w innych krajach. W ten sposób rozpoczyna się proces obsługi wielu języków: porównanie fizycznych i logicznych ze sobą stron modelu ramkowego.
Czy sprawdzałeś(-aś) kiedykolwiek element p w Narzędziach deweloperskich w Chrome? Jeśli tak, być może udało Ci się zauważyć, że domyślne style klienta użytkownika nie są fizyczne, ale logiczne.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
CSS z arkusza stylów klienta użytkownika Chromium
Margines nie jest ani na górze, ani na dole, jak mogłoby się wydawać czytelnikom polskojęzycznym.
Jest block-start i block-end. Te właściwości logiczne są podobne do opcji górnej i dolnej strony czytelnika po angielsku, ale również są jak strony lewe i prawe w języku japońskim. Tekst pisany jeden raz działa wszędzie.
Normalny przepływ ma miejsce, gdy strona internetowa celowo stanowi część tej wielokierunkowej treści. Gdy zawartość strony jest aktualizowana zgodnie ze zmianą kierunku dokumentu, układ i jego elementy są uznawane za przepływ. Więcej informacji o „wejściu” i „wyjściu” przepływu w MDN lub w specyfikacji modułu wyświetlania CSS. Chociaż właściwości logiczne nie muszą działać, to one wykonują większość pracy za Ciebie związaną ze zmianami kierunku. Flow oznacza kierunek, w którym mają się przemieszczać litery, słowa i treści. To prowadzi do blokowania i wbudowania logicznych kierunków.
Kierunek bloku to kierunek, w którym podążają nowe bloki treści. Możesz na przykład zadać sobie pytanie „Gdzie umieścić następny akapit?”. Możesz to traktować jako „blok treści” lub „blok tekstu”.
Każdy język określa ich kolejność w kolejności block-axis. block-start to bok, w którym umieszczany jest pierwszy akapit, a block-end to bok nowych akapitów.
Na przykład w tradycyjnym japońskim piśmie odręcznym kierunek blokowy przesuwa się od prawej do lewej:
Kierunek w tekście to kierunek, w którym przesuwają się litery i słowa. Podczas pisania weź pod uwagę kierunek, w którym poruszają się ręce i ręka. Działają one wzdłuż: inline-axis.
inline-start to strona, na której zaczyna się pisanie, a inline-end to miejsce, w którym tekst kończy się lub zamyka. W powyższym filmie inline-axis przesuwa się od góry do dołu,
ale w tym filmie inline-axis przesuwa się od prawej do lewej.
Atrybut flow-relative oznacza, że style napisane w jednym języku są dopasowane do kontekstu i odpowiednio zastosowane w innych językach. Treść będzie zmieniać się zależnie od języka, w którym są dostarczane.
Nowe skróty
Niektóre z podanych niżej skrótów nie są nowymi funkcjami w przeglądarce. Są raczej łatwiejszymi sposobami pisania stylów dzięki możliwości ustawiania wartości zarówno na krawędziach bloku, jak i na krawędziach wbudowanych. Właściwości logiczne inset-* wprowadzają nowe możliwości, ponieważ nie było długich sposobów określania pozycji bezwzględnych z właściwościami logicznymi przed nimi. Wstawki i skróty klawiszowe doskonale się uzupełniają, dlatego w tym samym momencie opowiem o wszystkich nowych funkcjach właściwości logicznych dostępnych w Chromium w wersji 87.
Skróty marginesów
Nie udostępniliśmy żadnych nowych umiejętności, ale pojawiły się bardzo przydatne skróty:
margin-block i margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Do tej pory nie ma skrótu „góra i dół” ani „lewo i prawo”.
Możesz odwoływać się do wszystkich 4 stron za pomocą skrótu typu margin: 10px;. Teraz możesz łatwo odwoływać się do 2 dodatkowych stron za pomocą skrótu właściwości logicznej.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Wyściółki – skróty
Nie udostępniliśmy żadnych nowych umiejętności, ale pojawiły się inne niezwykle przydatne skróty:
padding-block i padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Do tego inline – bezpłatny zestaw skrótów:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Wstawki i skróty
Właściwości fizyczne top, right, bottom i left można zapisać jako wartości właściwości inset. Użycie wartości position może przynieść korzyści przy uwzględnieniu stron z wcięciem.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
To powinno od razu wyglądać dogodnie. Jest to skrócona nazwa boków fizycznych, działa tak samo jak marginesy i dopełnienie.
Nowe funkcje
Jest tak samo ekscytująca jak zwykłe strony fizyczne – i funkcje logiczne zapewniane przez dodatkowe skróty inset są o wiele bardziej ekscytujące. Te skróty usprawniają pracę deweloperom (są krótsze w trakcie pisania), ale zwiększają też potencjalny zasięg układu, ponieważ są zależne od przepływu.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
Więcej informacji oraz pełną listę wstawionych skrótów i długopisów są dostępne w MDN.
Skróty dotyczące obramowania
Obramowanie oraz zagnieżdżone w nim właściwości color, style i width również mają nowe skróty logiczne.
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
Więcej informacji oraz pełną listę skrótów i długości granic znajdziesz w MDN.
Przykład właściwości logicznej <figure>
Ustalmy to na małym przykładzie. Właściwości logiczne mogą układać obraz z podpisem, aby obsługiwać różne kierunki pisania i kierunków dokumentu.
Albo spróbuj!
Nie musisz nic robić, aby karta była elastyczna w różnych krajach za pomocą właściwości <figure> i kilku właściwości logicznych. Jeśli zastanawiacie się, jak współdziałają te wszystkie
międzynarodowe usługi porównywania cen, mam nadzieję, że to krótkie wprowadzenie.
Polyfilling i obsługa wielu przeglądarek
Za pomocą narzędzi kaskadowych lub narzędzi do tworzenia można używać zarówno starych, jak i nowych przeglądarek, oddzielonych od siebie ze zaktualizowanymi właściwościami logicznymi. W przypadku kreacji zastępczych Cascade dodaj właściwość fizyczną do właściwości logicznej, a przeglądarka użyje właściwości „last” znalezionej podczas określania stylu.
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
Nie jest to jednak kompleksowe rozwiązanie dla każdego. Oto odręczna wartość zastępcza, która wykorzystuje pseudoselektor :lang() do kierowania reklam na określone języki, odpowiednio dostosowuje fizyczne odstępy, a na końcu oferuje logiczne odstępy odpowiednie dla obsługiwanych przeglądarek:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
Możesz też użyć polecenia @supports, aby określić, czy chcesz udostępniać wartości zastępcze właściwości fizycznych:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Usługi Sass, PostCSS, Emotion i inne oferują zautomatyzowane usługi tworzenia pakietów lub czasu kompilacji, które mają szeroką gamę wartości zastępczych lub rozwiązań. Sprawdź każdy z nich, aby zobaczyć, które z nich pasuje do Twojego łańcucha narzędzi i ogólnej strategii witryny.
Co dalej
Więcej elementów CSS będzie właściwości logicznych, ale to jeszcze nie koniec. Brakuje nam jednak jednego zestawu skrótów, a problem w GitHubie nadal czeka na rozwiązanie. W wersji roboczej jest dostępne rozwiązanie tymczasowe. A co, jeśli chcesz nadać stylowi wszystkie logiczne boki pudełka skrótem?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
Obecna wersja robocza oferty wymagałaby pisania logical w każdym skrócie, aby zastosować logiczny odpowiednik, który dla niektórych brzmi DRY.
Istnieją też inne propozycje zmiany tego ustawienia na poziomie bloku lub strony, ale może to spowodować wyciek danych z zastosowań logicznych do stylów przy założeniu, że elementy fizyczne staną się widoczne.
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
To jest trudne! Zagłosuj i podziel się swoją opinią – chcemy poznać Twoją opinię.
Chcesz lepiej poznać właściwości logiczne? Więcej informacji wraz z przewodnikami i przykładami znajdziesz na stronie MDN 🤓
Prześlij opinię
- Aby zaproponować zmiany w składni CSS skrótów zależnych od przepływu, sprawdź istniejące problemy w repozytorium csswg-drafts. Jeśli żaden z istniejących problemów nie pasuje do oferty pakietowej, utwórz nowy problem.
- Aby zgłosić błędy w implementacji skrótów zależnych od przepływu w Chromium, najpierw sprawdź istniejące problemy w narzędziu Chromium do śledzenia błędów. Jeśli żaden z dotychczasowych problemów nie pasuje do błędu, utwórz nowy.