Nowe skróty właściwości logicznych i nowe właściwości wstawione w Chromium.
Od wersji Chromium 69 (3 września 2018 r.) właściwości logiczne i ich wartości pomagają deweloperom zachować kontrolę nad międzynarodowymi układami dzięki logicznym, a nie fizycznym stylom kierunków i wymiarów. W Chromium 87 udostępniono skróty i przesunięcia, aby ułatwić pisanie tych właściwości i wartości logicznych. Dzięki temu Chromium dogoni Firefoxa, który obsługuje skróty od wersji 66. Safari udostępnia je w ramach technicznego podglądu wersji beta.
Przepływ dokumentu
Jeśli znasz już właściwości logiczne, osie wbudowane i blokowe oraz nie chcesz się o nich uczyć, możesz przejść do następnego tematu. W przeciwnym razie poniżej znajdziesz krótkie przypomnienie.
W języku angielskim litery i słowa są ułożone od lewej do prawej, a akapity od góry do dołu. W języku chińskim tradycyjnym litery i słowa są zapisywane od góry do dołu, a akapity od prawej do lewej. W tych 2 przypadkach, jeśli napiszemy kod CSS, który ustawia „margines górny” dla akapitu, odpowiednio rozmieszczamy tylko 1 styl języka. Jeśli strona jest tłumaczona z języka angielskiego na chiński uproszczony, margines może nie mieć sensu w nowym trybie pisania pionowego.
Z tego powodu obudowa nie jest zbyt przydatna w innych krajach. W ten sposób rozpoczyna się proces obsługi wielu języków: poznawanie cech fizycznych i logicznych stron modelu pudełkowego.
Czy kiedykolwiek sprawdzałeś/sprawdzałaś element p w Narzędziach deweloperskich w Chrome? Jeśli tak, możesz 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 znajduje się u góry ani u dołu strony, jak mogłoby się wydawać anglojęzycznemu czytelnikowi.
To block-start i block-end. Te właściwości logiczne są podobne do górnej i dolnej krawędzi w przypadku czytników angielskich, ale również do prawej i lewej krawędzi w przypadku czytników japońskich. Zapisz raz, używaj wszędzie.
Zwykły przepływ ma miejsce, gdy strona celowo wchodzi w skład połączenia wielokierunkowego. Gdy zawartość strony aktualizuje się odpowiednio do kierunku dokumentu, uznaje się, że układ i jego elementy są w toku. Więcej informacji o przepływie między wejściami i przepływem znajdziesz w MDN lub w specyfikacji modułu wyświetlania reklam CSS. Chociaż właściwości logiczne nie muszą być stałe, to one generują najcięższą pracę, ponieważ zmieniają kierunek. Przepływ oznacza kierunek, w którym litery, słowa i treści muszą się poruszać. Doprowadziło to do zablokowania i wstawienia w ramce logicznych wskazówek.
Kierunek bloku to kierunek, w jakim pojawiają się nowe bloki treści. Możesz go określić, zadając sobie pytanie „Gdzie umieścić kolejny akapit?”. Możesz je potraktować jako „blok treści” lub „blok tekstu”.
Każdy język porządkuje bloki według ich block-axis. block-start to strona, na której akapit jest umieszczany jako pierwszy, a block-end to strona, w którą płyną nowe akapity.
W tradycyjnym japońskim piśmie odręcznym kierunek bloku tekstu jest od prawej do lewej:
Kierunek śródtekstowy to kierunek, w którym poruszają się litery i słowa. Podczas pisania weź pod uwagę kierunek, w którym poruszają się Twoje ramię i ręka – poruszają się one wzdłuż linii inline-axis.
inline-start to strona, na której zaczynasz pisać, a inline-end to strona, na której kończysz pisać. W powyższym filmie inline-axis płynie od góry do dołu, ale w następnym filmie inline-axis płynie od prawej do lewej.
flow-relative oznacza, że style zapisane w jednym języku będą kontekstowo i odpowiednio stosowane w innych językach. Treści będą przesyłane w zależności od języka, w którym są dostarczane.
Nowe skróty
Niektóre z tych skrótów nie są nowymi funkcjami przeglądarki, ale łatwiejszymi sposobami na zapisywanie stylów, które wykorzystują możliwość jednoczesnego ustawiania wartości na krawędziach bloku lub wstawiania w wierszu. Właściwości logiczne inset-* do zapewniają nowe możliwości, ponieważ wcześniej nie było sposobu na określenie bezwzględnych pozycji za pomocą właściwości logicznych. Ramki i skróty są tak dobrze ze sobą powiązane, że opiszę wszystkie nowe funkcje właściwości logicznych, które pojawią się w Chromium 87.
Skrócone marginesy
Nie wprowadziliśmy nowych funkcji, ale dodaliśmy kilka bardzo przydatnych skrótów:
margin-block i
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Nie istnieje skrót od „góra i dół” czy „lewo i prawo”... do tej pory!
Prawdopodobnie odwołujesz się do wszystkich 4 stron za pomocą skrótu margin: 10px;. Teraz możesz łatwo odwoływać się do 2 dodatkowych stron, używając skrótu właściwości logicznej.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Skróty do wypełniania
Nie pojawiły się żadne nowe umiejętności, ale udostępniliśmy wygodne skróty:
padding-block i padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
A także inline dodatkowy 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 mogą być zapisane jako wartości właściwości inset. Ustawienie krawędzi z insetem może być przydatne w przypadku dowolnej wartości parametru position.
.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 być bardzo wygodne. Wstawka to skrót od „strona fizyczna” i działa tak samo jak margines i wypełnienie.
Nowe funkcje
Oprócz skrótów dotyczących stron fizycznych, które są bardzo ekscytujące, możesz korzystać z dodatkowych funkcji inset. Te skróty są wygodne dla programistów (są krótsze w pisaniu), 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ę skrótów i wyrazów pełnych znajdziesz na stronie MDN.
Skróty krawędzi
Obramowanie oraz zagnieżdżone 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 wyrazów pełnych dotyczących obramowania znajdziesz na stronie MDN.
Przykład właściwości logicznej <figure>
Zastosujmy to wszystko w praktyce na przykładzie. Właściwości logiczne mogą układać obraz z podpisem, aby umożliwić obsługę różnych kierunków pisania i dokumentu.
Możesz też wypróbować tę funkcję.
Nie musisz nic robić, aby Twoja karta była responsywna międzynarodowo dzięki <figure> i kilku właściwościom logicznym. Jeśli chcesz się dowiedzieć, jak działają te międzynarodowe usługi porównywania cen, mam nadzieję, że ten krótki wstęp okaże się przydatny.
Obsługa wielu przeglądarek i obsługa w różnych przeglądarkach
Narzędzia kaskadowe lub narzędzia kompilacji to dobre opcje, aby zapewnić prawidłowe rozmieszczenie zaktualizowanych właściwości logicznych w starszych i nowych przeglądarkach. W przypadku zastępowania kaskadowego należy zastąpić właściwość fizyczną właściwością logiczną, a przeglądarka użyje „ostatniej” właściwości znalezionej podczas rozwiązywania stylów.
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 pełne rozwiązanie dla każdego. Oto odręczna kreacja zastępcza, która wykorzystuje pseudoselektor :lang(), aby kierować reklamy na określone języki, odpowiednio dostosowuje fizyczne odstępy, a na końcu daje logiczny odstęp 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ć atrybutu @supports, aby określić, czy chcesz podać alternatywne wartości właściwości obiektu:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Emotion i inne narzędzia oferują zautomatyzowane pakiety lub rozwiązania do tworzenia, które zawierają szeroki zakres rozwiązań zastępczych. Sprawdź każdy z nich, aby dowiedzieć się, który z nich pasuje do Twojego zestawu narzędzi i ogólnej strategii dotyczącej witryny.
Co dalej?
Więcej usług porównywania cen będzie oferować właściwości logiczne, ale nie jest to jeszcze możliwe. Brakuje jednak jednego dużego zestawu skrótów, a rozwiązanie tego problemu jest nadal oczekujące na rozwiązanie na GitHubie. Tymczasowe rozwiązanie znajduje się w wersji roboczej. A jeśli chcesz nadać stylowi wszystkie logiczne strony pudełka, używając skrótu?
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 projektu oznacza, że musisz wpisywać logical w każdej skrótowej notacji, aby zastosować odpowiednik logiczny, co nie jest dla niektórych osób zbyt DRY.
Istnieją też inne propozycje zmiany na poziomie bloku lub strony, ale może to spowodować przenikanie zastosowań logicznych do stylów, które nadal zakładają strony fizyczne.
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 trudne pytanie. Zagłosuj i podziel się swoją opinią, chcemy poznać Twoją opinię.
Chcesz dowiedzieć się więcej o właściwościach logicznych? Szczegółowe informacje, przewodniki i przykłady znajdziesz na stronie MDN. 🤓
Prześlij opinię
- Aby zaproponować zmiany składni CSS skrótów względnych przepływu, sprawdź istniejące problemy w repozytorium csswg-drafts. Jeśli żaden z dotychczasowych problemów nie pasuje do Twojej propozycji, utwórz nowy problem.
- Aby zgłosić błędy w implementacji skrótów w Chromium, najpierw sprawdź istniejące problemy w Chromium Bug Tracker. Jeśli żaden z dotychczasowych problemów nie pasuje do Twojego błędu, utwórz nowy problem.