Ulepszenia układu logicznego dzięki skrótom zależnym od przepływu

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 za pomocą stylów kierunków i wymiarów o charakterze logicznym, a nie fizycznym. 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.

Pokazuje renderowanie tekstu zastępczego w językach łacińskich, hebrajskich i japońskich w ramce urządzenia. Strzałki i kolory wskazują tekst, aby ułatwić kojarzenie 2 kierunków: blokowego i wbudowanego.

Przepływ dokumentu

Jeśli znasz już właściwości logiczne, osie wbudowane i blokowe oraz nie chcesz się ich 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 przetłumaczona z języka angielskiego na chiński uproszczony, margines może nie mieć sensu w nowym trybie pisania pionowego.

Dlatego fizyczna strona pudełka nie jest zbyt przydatna w przypadku przesyłek międzynarodowych. W ten sposób rozpoczyna się proces obsługi wielu języków; poznawanie fizycznej i logicznej strony modelu pudełka.

Czy kiedykolwiek sprawdzałeś/sprawdzałaś element p w Narzędziach deweloperskich w Chrome? W takim przypadku możesz zauważyć, że domyślne style klienta użytkownika są nie 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 w Chromium

Margines nie znajduje się u góry ani u dołu strony, jak mogłoby się wydawać anglojęzycznemu czytelnikowi. To block-startblock-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.

Normalny przepływ występuje, gdy strona jest celowo częścią tego procesu wielokierunkowego. Gdy treść strony jest aktualizowana zgodnie ze zmianami kierunku dokumentu, układ i jego elementy są uwzględniane w przepływie. Więcej informacji o tym, co oznacza „w przepływie” i „poza przepływem”, znajdziesz na stronie MDN lub w specyfikacji modułu wyświetlania CSS. Chociaż właściwości logiczne nie muszą być w przepływie, wykonują one większość ciężkiej pracy, gdy zmienia się kierunek. Przepływ oznacza kierunek, w którym litery, słowa i treści muszą się poruszać. Dlatego blokujemy i zastępujemy wstawianie logicznych kierunków.

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 myśleć o nim jako o „bloku treści” lub „bloku 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 wewnątrz tekstu to kierunek, w którym idą litery i słowa. Pomyśl o kierunku, w którym porusza się Twoja ręka, gdy piszesz. Ręka porusza się wzdłuż 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 dokładne określenie pozycji bezwzględnych za pomocą właściwości logicznych. Ramki i skróty są tak dobrze ze sobą powiązane, że opowiem Ci od razu o wszystkich nowych funkcjach właściwości logicznych, które pojawią się w Chromium 87.

Skróty krawędzi

Nie wprowadziliśmy nowych funkcji, ale dodaliśmy kilka bardzo przydatnych skrótów:
margin-block i margin-inline.

Długopis
margin-block-start: 2ch;
margin-block-end: 2ch;
Nowy skrót
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

Do tej pory nie było skrótu dla „góra i dół” ani „lewo i prawo”. 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.

Długopis
margin-inline-start: 4ch;
margin-inline-end: 2ch;
Nowy skrót
margin-inline: 4ch 2ch;

Skróty do wypełniania

Nie dodano nowych możliwości, ale dodano więcej przydatnych skrótów:
padding-block i padding-inline.


Długopis
padding-block-start: 2ch;
padding-block-end: 2ch;
Nowy skrót
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

A także inline dodatkowy zestaw skrótów:

Długopis
padding-inline-start: 4ch;
padding-inline-end: 2ch;
Nowy skrót
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;
}


Pismo długie
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
Nowa skrótowa forma zapisu
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 ułatwiają tworzenie przez deweloperów (są krótsze do wpisania), ale też zwiększają potencjalny zasięg układu, ponieważ są powiązane z przepływem.

Pismo długie
position: absolute;
top: 10px;
bottom: 10px;
Skróty logiczne
position: absolute;
inset-block: 10px;


Pismo długie
position: absolute;
left: 10px;
right: 20px;
Skróty logiczne
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

Właściwość border oraz jej zagnieżdżone właściwości color, stylewidth mają teraz nowe skróty logiczne.


Pismo długie
border-top-color: hotpink;
border-bottom-color: hotpink;
Skróty logiczne
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


Pismo długie
border-left-style: dashed;
border-right-style: dashed;
Skróty logiczne
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


Pismo długie
border-left-width: 1px;
border-right-width: 1px;
Skróty logiczne
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 na przykładzie. Właściwości logiczne mogą układać obraz z podpisem, aby obsługiwać różne kierunki pisania i dokumentów.

Możesz też wypróbować tę funkcję.

Nie musisz wiele robić, aby karta była dostosowana do wyświetlania na całym świecie za pomocą <figure> i kilku właściwości logicznych. Jeśli chcesz się dowiedzieć, jak działają te międzynarodowe usługi porównywania cen, mam nadzieję, że ten krótki wstęp będzie dla Ciebie 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 nowszych 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 wszystkich. Oto tekst pisany odręcznie, który wykorzystuje pseudoselektor :lang() do kierowania na konkretne języki, odpowiednio dostosowuje ich odstępy, a na końcu oferuje odstęp logiczny 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 atrybutu obiektu fizycznego:

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 kompilacji, 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. Co zrobić, jeśli chcesz sformatować wszystkie logiczne strony pola za pomocą skrótu?

Skróty klawiszowe
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
Skróty logiczne
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 wszystkim wydaje się 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. Oddaj głos i wyraź 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ę