Zrozumienie właściwości i wartości logicznych

W przeszłości CSS wiązał się z fizycznymi wymiarami i kierunkami, fizycznie mapując rozmieszczenie elementów po lewej, prawej stronie oraz na górze i na dole. float element w left lub w right , używamy właściwości przesunięcia pozycjonowania top , left , bottom i right . Ustawiamy marginesy, padding i bordery jako margin-top i padding-left . Te fizyczne właściwości i wartości mają sens, jeśli pracujesz w trybie i kierunku pisania poziomo, od góry do dołu, od lewej do prawej.

Mają mniej sensu, jeśli używasz trybu pisania w pionie, czy to dla całego układu, czy dla niektórych elementów. W tym artykule wyjaśnię, w jaki sposób CSS zmienia się w celu obsługi trybów pisania, a robiąc to, wyjaśnię niektóre rzeczy, które mogą wprowadzać w błąd w Flexbox i Grid.

Kiedy po raz pierwszy zacząłem pracować z CSS Grid i wyjaśniać ludziom nową specyfikację, zauważyłem, że właściwość grid-area może być używana jako jednowierszowy skrót do ustawiania wszystkich czterech wierszy. W związku z tym trzy poniższe przykłady skutkowałyby tym samym umieszczeniem przedmiotu. Pierwsza używa właściwości odręcznych, druga określa linie początkowe i końcowe dla każdego wymiaru, a trzecia używa grid-area .

 .item { grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; }

 .item { grid-row: 1 / 3; grid-column: 2 / 4; }

 .item { grid-area: 1 / 2 / 3 / 4; }

Kolejność wierszy, gdy używamy grid-area jest następująca:

• początek wiersza siatki
• początek kolumny siatki
• koniec wiersza siatki
• koniec kolumny siatki

Pierwsze pytanie, które zadałem (i wiele osób z moich odbiorców), brzmiało: „dlaczego nie są one zgodne z kolejnością Góra, Prawo, Dół, Lewo, do której jesteśmy przyzwyczajeni ze wszystkiego innego w CSS ?” W rzeczywistości idą w odwrotnej kolejności do tych wartości: Góra, Lewo, Dół, Prawo! Czy Grupa Robocza CSS aktywnie stara się utrudnić sprawy?

Odpowiedź jest taka, że ​​wartości te odeszły od podstawowego założenia, że ​​treść w sieci jest mapowana na fizyczne wymiary ekranu, przy czym pierwsze słowo zdania znajduje się w lewym górnym rogu pola, w którym się znajduje. Kolejność linii w grid-area ma całkowity sens, jeśli nigdy nie spotkałeś się z istniejącym sposobem, w jaki ustawiamy te wartości w skrócie. Najpierw ustawiamy dwie linie początkowe, potem dwie linie końcowe.

Oznacza to, że jeśli zmienimy tryb pisania naszego dokumentu na pionowy, pozycja bloku pozostaje w stosunku do trybu pisania dokumentu, a nie fizycznych właściwości ekranu. Możesz spróbować tego w poniższym przykładzie, zmienić wartość trybu pisania dla naszego układu i zobaczyć, jak cała siatka się obraca.

Znajomość tego faktu na temat trybów pisania wyjaśnia również, dlaczego CSS Grid i Flexbox odnoszą się do linii start i end , a nie mapowania siatki do fizycznych wymiarów górnej, prawej, dolnej i lewej, tak jakbyśmy używali w przypadku pozycjonowania bezwzględnego. W powyższym przykładzie pierwszy element jest pozycjonowany za pomocą pozycjonowania na podstawie grid-area i linii.

 grid-area: 1 / 2 / 3 / 4;

Gdybyśmy mieli użyć odręcznego, to wyglądałoby to tak:

 grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;

Ustawiamy obie linie początkowe, najpierw oś blokową, drugą oś śródliniową, a następnie postępuj zgodnie z tym samym wzorem dla linii końcowych w każdym wymiarze. Niezależnie od tego, jak ułożona jest siatka, linie początkowe i końcowe pozostają w stosunku do siatki i trybu pisania dokumentu.

Wymiary blokowe i wbudowane

Wspomniałem już o czymś, co jest kluczem do zrozumienia nowego układu, koncepcji wymiarów Bloku i Inline. Te terminy będą się pojawiać podczas pracy z nowym CSS. Te dwa wymiary są dość łatwe do zrozumienia w kontekście układu siatki, ponieważ podczas pracy w układzie siatki zawsze pracujemy z blokiem i osią w wierszu, więc użyję demonstracji siatki, aby to wyjaśnić.

Wymiar Bloku odpowiada kolejności, w jakiej bloki są ułożone na stronie. Jeśli myślisz o akapicie tekstu w języku angielskim. Każdy akapit jest ułożony jeden pod drugim, kierunek, w którym są one ułożone, jest wymiarem bloku, a więc w układzie siatki jest to oś bloku.

W CSS Grid Layout oś bloku jest również określana jako oś wiersza, dlatego właściwościami osi bloku są grid-row-start i grid-row-end .

Oś inline biegnie zatem w poprzek osi bloku, w kierunku, w którym słowa układają się w zdaniu. W języku angielskim ta oś biegnie od lewej do prawej. W układzie siatki oś wbudowana jest osią słupa z właściwościami grid-column-start i grid-column-end .

Jeśli zmienimy tryb pisania naszego przykładu na vertical-lr , tryb pisania jest teraz pionowy, co oznacza, że ​​oś bloku biegnie pionowo, a oś inline wzdłuż linii (od góry do dołu).

Więc jeśli mówimy o wymiarze Bloku, opisujemy kierunek, w którym akapity tekstu byłyby ułożone w normalnym przepływie dokumentu, a wymiar Inline to kierunek, w którym biegnie zdanie.

Właściwości logiczne

Kiedy już przyzwyczaisz się do pracy z wymiarami blokowymi i wbudowanymi, liniami początkowymi i końcowymi, łącze do wymiarów fizycznych w pozostałej części CSS zaczyna wydawać się niewygodne. Istnieje jednak specyfikacja, która definiuje logiczne wersje wszystkich istniejących właściwości fizycznych — specyfikacja CSS Logical Properties and Values, która jest pierwszą publiczną wersją roboczą. Obecnie jedyną przeglądarką z dobrą obsługą tych właściwości jest Firefox, jednak zrozumienie ich działania może być dobrym sposobem myślenia o nowym CSS, więc przyjrzyjmy się.

Zilustrowałem każdą sekcję przykładami CodePen, aby zobaczyć, jak działają, musisz użyć Firefoksa!

Wymiary logiczne

Właściwości logiczne definiują właściwość początkową i końcową dla wymiaru blokowego i wbudowanego. W przypadku właściwości height i width używamy zamiast tego block-size i inline-size . Możemy również ustawić max-block-size , min-block-size , max-inline-size i min-inline-size . Jeśli pracujesz w języku angielskim, poziomym języku od góry do dołu, block-size odnosi się do fizycznej height bloku na ekranie, inline-size w wierszu oznacza fizyczną width elementu. Jeśli pracujesz w języku, w którym bloki biegną pionowo, to gdy spojrzysz na ekran, pojawi się inline-size block-size , który kontroluje width i wysokość.

Możesz to zobaczyć w akcji w poniższym demo. Mój blok ma block-size 150 pikseli i inline-size w 250 pikseli. Zmień właściwość writing-mode aby zobaczyć, jak dostosowuje się układ.

Granice logiczne

Mamy wtedy właściwości do kontrolowania granic, które działają w ten sam sposób. Fizyczne właściwości granic to:

• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

Mają one następnie logiczne odwzorowania, które stają się nieco gadatliwe, jak w przypadku długich rąk, ale są to:

• border-block-start
• border-block-start-width
• border-block-start-style
• border-block-start-color
• border-inline-start
• border-inline-start-width
• border-inline-start-style
• border-inline-start-color
• border-block-end
• border-block-end-width
• border-block-end-style
• border-block-end-color
• border-inline-end
• border-inline-end-width
• border-inline-end-style
• border-inline-end-color

W poniższym przykładzie są dwa bloki, z których pierwszy używa właściwości logicznych do ustawienia koloru zielonego border-block-start-color oraz stylu border-inline-end-style dod. Drugi blok wykorzystuje fizyczne właściwości border-top-color i border-right . Zmień tryb pisania, aby zobaczyć, jak się zachowują.

Marginesy i dopełnienie

Marginesy i dopełnienie mają podobne długie dłonie do naszych właściwości granicznych, przy czym właściwości fizyczne to:

• margin-top
• margin-left
• margin-bottom
• margin-right
• padding-top
• padding-right
• padding-bottom
• padding-left

Mają one następujące właściwości logiczne:

• margin-block-start
• margin-inline-start
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-inline-start
• padding-inline-start
• padding-inline-end

W następnym przykładzie ustawiłem padding-block-start na pierwszym bloku, a padding-top na drugim, zmieniłem tryb pisania, aby zobaczyć różnicę, gdy osie Block i Inline są przełączane.

Przesunięcia pozycjonowania

Innym miejscem, w którym używa się właściwości fizycznych, jest pozycjonowanie rzeczy za pomocą właściwości position . Po ustawieniu position: absolute lub innej wartości position innej niż domyślna static , możemy następnie pozycjonować element za pomocą przesunięć, albo z rzutni, albo z rodzica, który utworzył nowy kontekst pozycjonowania.

Przesunięte właściwości fizyczne to:

• top
• right
• bottom
• left

Zgodnie ze wzorem naszych innych własności logicznych mamy wtedy:

• offset-block-start
• offset-inline-start
• offset-block-end
• offset-inline-end

Wypróbuj je w poniższym przykładzie. Ramka z obramowaniem ma position: relative i pozycję małego fioletowego kwadratu position: absolute . W fizycznym przykładzie kwadrat jest umieszczony u top: 50px i right: 20px . Wersja logiczna ma offset-block-start: 50px i offset-inline-end: 20px .

Wartości logiczne

Innym miejscem, w którym jesteśmy przyzwyczajeni do używania wymiarów fizycznych, jest unoszenie się lub oczyszczanie rzeczy. Dla float , clear mamy kilka logicznych wersji left i right wartości.

• inline-start
• inline-end

W demie pływam fioletowy blok w wersji logicznej inline-start . Używam również właściwości logicznych dla marginesu; zapewnia to, że margines zawsze pojawia się po bloku, a przed treścią, która go otacza. Wybierając wartość vertical-rl z listy rozwijanej, możesz zobaczyć, jak w fizycznym przykładzie margines kończy się po prawej stronie bloku, a nie jest stosowany w kierunku -end .

Istnieją również wartości start i end dla text-align . Wyrównanie czegoś do początku spowoduje wyrównanie go do początku osi wbudowanej, do end do końca osi wbudowanej, niezależnie od tego, czy tryb pisania jest poziomy czy pionowy.

Używanie logicznych właściwości i wartości dzisiaj

Jak już wspomniano, w tej chwili przeglądarki nie obsługują właściwości i wartości logicznych. Jeśli jednak chcesz zacząć z nimi teraz pracować, opcją byłoby napisanie za ich pomocą kodu CSS, a następnie użycie wtyczki PostCSS do konwersji właściwości logicznych i wartości na ich fizyczne odpowiedniki. Ta wtyczka autorstwa Jonathana Neala obejmuje wszystkie właściwości i wartości, które opisałem w tym artykule.

Możesz również pomóc w zachęceniu dostawców przeglądarek do przyjęcia tych właściwości, umieszczając gwiazdkę w błędzie Chrome i głosując na nie w witrynie Edge Developer Feedback.

Nawet jeśli zdecydujesz się nie używać tych właściwości teraz, zrozumienie ich działania jest kluczowym elementem zrozumienia pracy z nowym układem. Opisując układ Grid lub Flex jako mający linie początkowe i końcowe, myśląc o wymiarach blokowych i śródliniowych, te rzeczy znacznie ułatwią zrozumienie działania układu.

Dalsza lektura

• Dokumenty sieciowe MDN zawierają wszystkie właściwości logiczne i wartości wymienione wraz z dodatkowymi przykładami.
• Siatka CSS, wartości logiczne i tryby pisania, MDN
• Tryby pisania CSS, Jen Simmons, 24 sposoby