Nowe skróty właściwości logicznych i nowe właściwości wstawiane dla Chromium.
Od wersji Chromium 69 (3 września 2018 r.) właściwości logiczne i wartości pomogły programiści zachowują kontrolę nad swoimi międzynarodowymi układami dzięki logicznym, niż fizyczne, kierunki i wymiary. W Chromium 87 skróty i wprowadziliśmy przesunięcia, aby te właściwości i wartości logiczne stały się nieco prostsze. Dzięki temu Chromium przestaje być dostępny w przeglądarce Firefox, która obsługuje skróty. od 66. W przeglądarce Safari możesz zobaczyć ich wersję przedpremierową.
Przepływ dokumentów
Jeśli znasz już właściwości logiczne, osie wbudowane i blokowe Jeśli chcesz odświeżyć sobie wiedzę, możesz pominąć tę funkcję. Jeśli nie, przypomnę tylko krótko.
W języku angielskim litery i słowa przesuwają się od lewej do prawej, a akapity są ułożone w stosunku od góry do dołu. W tradycyjnym języku chińskim litery i słowa są wyświetlane od góry do dołu, a akapity ułożone są na siebie. od prawej do lewej. Tylko w tych 2 przypadkach, jeśli napiszemy kod CSS, który umieszcza „margines u góry”, w akapicie, stosujemy prawidłowe odstępy tylko w 1 stylu języka. Jeśli strona jest przetłumaczona na język tradycyjny chiński jest dostępny w języku angielskim. W nowym trybie pisania w pionie margines może nie mieć sensu.
Z tego powodu obudowa nie jest zbyt przydatna w innych krajach. Tak zaczyna się funkcja proces obsługi wielu języków; poznawania fizycznych i logicznych stron modelu pudełkowego.
Czy kiedykolwiek sprawdzałeś(-aś) element p w Narzędziach deweloperskich w Chrome? Jeśli tak, być może
że domyślne style klienta użytkownika
nie mają charakteru fizycznego, ale logicznego.
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 u góry ani u dołu, jak mogłoby się wydawać czytelnikom anglojęzycznym.
Jest block-start i block-end. Te właściwości logiczne przypominają
góry i u dołu, ale również jak w japońskim czytniku. Napisany raz, sprawdza się wszędzie.
Zwykły przepływ ma miejsce, gdy strona celowo wchodzi w skład tego połączenia wielokierunkowego. Gdy treść strony jest aktualizowana zgodnie z kierunkiem dokumentu, układ i są uznawane za zawarte w toku. Więcej informacji o „w” i „poza” przepływ w MDN lub w Specyfikacja modułu wyświetlania reklam CSS. Mimo że właściwości logiczne nie muszą być płynne – to one robią za Ciebie większość ciężkości dzięki zmianie kierunku. Przepływ oznacza kierunek, którym muszą się przemieszczać litery, słowa i treści. Powoduje to blokowanie i wbudowane w treści kierunki logiczne.
Kierunek blokowania to kierunek, w którym pojawiają się nowe treści,
„Gdzie umieścić następny akapit?”. Możesz je potraktować jako „blok treści” lub „blok tekstu”.
Każdy język układa bloki i określa ich kolejność
block-axis. block-start to bok akapitu,
a block-end to strona, na którą trafiają nowe akapity.
Na przykład w tradycyjnym japońskim pismo odręcznego pisanie bloków w kierunku bloków od prawej do lewej:
Kierunek tekstu śródtekstowego to kierunek, w którym unoszą się litery i słowa. Zastanów się nad kierunkiem
podczas pisania Twoje ramię i ręka poruszają się, podróżują wzdłuż inline-axis.
inline-start to strona, na której zaczynasz pisać, a inline-end to strona, z której możesz pisać
w którym kończy się lub kończy pisanie. Powyższy film – inline-axis znajduje się od góry do dołu,
ale w tym następnym filmie scena inline-axis układa się od prawej do lewej.
Status flow-relative
co oznacza, że style napisane w danym języku będą dostosowane kontekstowo i odpowiednio
stosowane do innych języków. Kształt przepływu treści zależy od języka, w którym są wysyłane.
Nowe skróty
Niektóre z tych skrótów nie stanowią nowych funkcji dla przeglądarki – są raczej łatwiejsze
sposobów pisania stylów, wykorzystując możliwość ustawiania wartości w obu blokach
lub wbudowane krawędzie. Właściwości logiczne inset-* dają nowe umiejętności,
ponieważ nie istniała pewna metoda określania pozycji bezwzględnych za pomocą właściwości logicznych.
wcześniej. Choć akcenty i krótkie rączki (heh) dobrze się komponują,
o wszystkich nowych właściwościach logicznych w Chromium 87.
Skrócone marginesy
Nie pojawiły się żadne nowe umiejętności, ale mamy kilka 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 ma skrótu „góra i dół” czy „w lewo i w prawo”... do teraz!
Możesz wykorzystać skrót margin: 10px; do wszystkich 4 stron, a teraz możesz
może łatwo odwołać się do 2 uzupełniających się stron, używając skrótu właściwości logicznej.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Dopełnienie skrótów
Nie pojawiły się żadne nowe umiejętności, ale dostępne są też wygodne skróty:
padding-block i
padding-inline
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Oraz bezpłatny zestaw skrótów inline:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Znaki wewnętrzne i skróty
Właściwości fizyczne top, right, bottom i left można zapisać
jako wartości dla właściwości inset. Zastosowanie dowolnej wartości position może przynieść korzyści
boczne ustawianie krawędzi 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 być od razu wygodne. Inset to skrótowe określenie ze wszystkich stron fizycznych. i działa tak samo jak marginesy i dopełnienie.
Nowe funkcje
Chociaż fizyczny skrót jest fascynujący, to teraz także więcej
funkcje logiczne dodane przez dodatkowe skróty inset. Te skróty dają
wygoda dla programistów (krótsze do pisania), ale też
potencjalnego zasięgu układu, ponieważ są one 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ługich jest dostępny w MDN.
Obramowanie skrótami
Obramowanie oraz właściwości color, style i width mają
używać nowych skrótów logicznych.
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ługich znaków granicznych jest dostępny w MDN.
Przykład właściwości logicznej <figure>
Podsumujmy to wszystko na krótkim przykładzie. Właściwości logiczne mogą układać obraz z podpisem umożliwiającym pisanie różnych tekstów i wskazywanie różnych wskazówek dotyczących dokumentu.
Lub wypróbuj!
Nie musisz robić wielu rzeczy, aby Twoja karta była responsywna
<figure> i kilka właściwości logicznych. Jeśli zastanawia się Pan/Pani, jak to wszystko działa
międzynarodowo
zwrócić uwagę na współpracę
z CSS, mam nadzieję, że to krótkie wprowadzenie.
Polyfill i obsługa różnych przeglądarek
Cascade (czyli narzędzie do kompilacji) to dobry sposób na używanie zarówno starej, jak i nowej przeglądarki, rozmieszczone w odpowiednich odstępach ze zaktualizowanymi właściwościami logicznymi. W przypadku kaskadowych wartości zastępczych postępuj zgodnie z właściwością fizyczną jako wartość logiczną, a przeglądarka użyje funkcji „ostatni” właściwość znaleziona podczas stylu i ich rozwiązania.
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 wersja zastępcza
który wykorzystuje pseudoselektor :lang() do kierowania reklam na określone języki, dostosowuje
odpowiednie odstępy fizyczne, a na końcu zapewnimy
odstępy w obsługiwanych przeglądarkach:
/* 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ć
wartości zastępcze usługi:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Emotion i inni mają automatyczny pakiet SDK lub kompilację oferty z szeroką gamą wad i rozwiązań. Sprawdź każdy z nich i zobaczyć, które z nich pasują do Twojego łańcucha narzędzi i ogólnej strategii dotyczącej witryny.
Co dalej?
Większa część CSS będzie zawierać właściwości logiczne. To jeszcze nie koniec! Jest jeden wielki brak ale nadal czekamy na rozwiązanie tego problemu z GitHubem. Dostępne jest tymczasowe rozwiązanie w wersji roboczej. A jeśli chcesz nadać styl wszystkim i logiczne strony pudełka ze 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;
W przypadku obecnej wersji roboczej oferty pakietowej trzeba będzie wpisać logical w każdym
w celu uzyskania logicznego odpowiednika, który nie brzmi
do niektórych DOSUSZE.
Istnieją też inne propozycje zmiany tego ustawienia na poziomie blokowania lub strony, ale może to przecież wyciek funkcji logicznych do stylów, nadal przyjmujących fizyczne boki.
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. Zagłosuj i podziel się swoją opinią, chcemy poznać Twoją opinię.
Chcesz dowiedzieć się więcej o właściwościach logicznych? Oto szczegółowe informacje: wraz z przewodnikami i przykładami w MDN 🤓
Prześlij opinię
- Aby zaproponować zmiany w składni CSS skrótów zależnych od przepływu, Najpierw sprawdź istniejące problemy w repozytorium csswg-drafts. Jeśli żaden z istniejących problemów nie pasuje do oferty pakietowej, utwórz nowy.
- Aby zgłosić błędy w implementacji skrótów względnych w Chromium, Najpierw sprawdź istniejące problemy w narzędziu do śledzenia błędów Chromium. Jeśli żaden z istniejących problemów nie pasuje do błędu, utwórz nowy.