5 gorących nowych funkcji CSS i jak ich używać

W tym artykule zbadamy pięć nowych właściwości przychodzących do CSS, spójrz na to, co robią i jak umieścić je do praktycznego wykorzystania w swoich projektach. Będziemy tworzyć Układ strony internetowej. W przypadku strony, która zawiera wiadomość i małe pudełko na czacie w rogu. Aby uzyskać więcej sztuczek CSS, spójrz na nasz artykuł Eksplorowanie różnych Przykłady animacji CSS. . Jeśli tworzysz całą nową stronę, spróbuj Kreator strony internetowej i pamiętaj, aby przeglądać swoje hosting Opcje tutaj.

W tym samouczku potrzebujesz Chrome 65+ lub Firefox 59+. Spójrz na towarzyszący Github repo. dla kodu krokowego. Wykorzystamy następujące funkcje, aby stworzyć lepsze doświadczenie i pracę w niektórych kwestiach. A jeśli projektujesz obok zespołu, wykorzystaj najlepsze magazyn w chmurze zachować spójne rzeczy.

Moduł wyświetlacza CSS (poziom 3)

• Wyświetlacz: zawartość;
• Status W3C. - Projekt roboczy
• Wsparcie przeglądarki.

Moduł zasad warunkowych CSS (poziom 3)

• @wsparcie(...) {...}
• Status W3C. - Zalecenie kandydujące
• Dalsze czytanie: MDN Web Dokumenty

Moduł zachowań CSS OversCroll (poziom 1)

• Zachowanie nadwyrzewodniczące: zawierają;
• Status W3C. - Nieoficjalny
• Wsparcie przeglądarki.
• Dalsze czytanie: Przejmij kontrolę nad przewijaniem

Moduł Selektorów CSS (poziom 4)

• : FOCUSE
• Status W3C. - Projekt roboczy
• Wsparcie przeglądarki.
• Dalsze czytanie: MDN Web Dokumenty : FOCUSE , : Pokazany zastępcze

Moduł ograniczający CSS (poziom 1)

• zawierają: farba;
• Status W3C. - Zalecenie kandydujące
• Wsparcie przeglądarki.
• Dalsze czytanie: Ograniczenie CSS w Chrome 52

01. Ustaw HTML do wiadomości

Najpierw musimy skonfigurować super prosty, powtarzający się znaczniki dla naszej wiadomości. Stwórzmy .pojemnik div z nieuporządkowaną listą w środku. Dać & lt; Ul & GT; klasa .karmić , a następnie utworzyć 10 elementów listy, każdy zawierający div z .karta Klasa i karta tekstowa 1, karta 2 itd.

Wreszcie utwórz inny element listy w od 5 do 6 z klasą .jest - Będzie to pomocne - i dodaj & lt; Ul & GT; Wewnątrz z trzema elementami listy za pomocą karty tekstowej A, karty B itd.

 Body i GT;
 & lt; div class = "pojemnik" & gt;
 & lt; ul Class = "Feed" & GT;
 & LT; LI & LT; & LIV Class = "Card" & GT; Card 1 μl; / LI & GT;
 & LT; LI & GT CLASS = "Karta" i GT; Card 2 ° C. / LI & GT;
 & lt; li & gt; & lit class = "Card" i GT; Card 3 ° / LI & GT;
 & lt; LI & GT Class = "Card" & GT; Karta 4 ° C. / LI & GT;
 & lt; li & gt class = "Card" i GT; Card 5 ° / Div & GT; & LT; / LI & GT;
    & lt; li class = "zagnieżdżony" & gt;
 & lt; Ul & GT;
 & LT; LI & GT; DIN CLASS = "Karta" i GT; Karta A & LT;
 & LT; LI & LT; & LT; Class = "Card" i GT; Card B & LT;
 & lt; LI i Div Class = "Card" i GT; Card C & LT; / Div & GT;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; LI & GT CLASS = "Karta" i GT; Karta 6 ° C. / LI & GT
 & lt; li & gt; & lith class = "Card" i GT; Card 7 ° / LIH;
 & lt; LI & GT CLASS = "Karta" i GT; Karta 8 ° / Div & GT;
 & lt; LI & GT Class = "Card" i GT; Karta 9 ° C. / LI & GT;
 & LT; LI & GT CLASS = "Karta" i GT; Karta 10 ° / LI & GT;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / body & gt; 

02. Styl NewsFeed

Teraz musimy dodać kilka szybkich stylów, aby to zacznie wyglądać bardziej jak wiadomość. Najpierw możemy dać & lt; body & gt; Subtelny szary kolor tła. Potem daj .pojemnik Max-szerokość 800px i użycia Margines: 0 Auto; Aby wyrównać go.

Także dawajmy .karta Białe tło, 10px wyściółki i marginesu i wreszcie Min-wysokość z 300px - powinno to dać nam wystarczająco dużo, aby przewijać stronę. Wreszcie posypimy trochę magii Flexbox na .karmić Aby produkty ładnie płynęły, z dwiema kartami na rzęd.

 .Feed {
Wyświetlacz: Flex;
Flex-Wrap: Wrap;
}
.Feed li {
Flex: 1 0 50%;
} 

03. Napraw problemy z układem

Jeśli przewijasz listę, zauważysz, że nasze karty na zagnieżdżonej liście, karty A - C, powodują pewne problemy z układem. Idealnie, chcielibyśmy, aby płyną do reszty kart, ale wszyscy utknęli razem w jednym bloku. Powodem tego jest to, że kontener Flex - który jest tworzony za pomocą Wyświetlacz: Flex. - Tworzy się jedynie natychmiastowymi dziećmi (tj. Pozycje listy) na elementy flex.

Teraz, zwykle jedynym sposobem naprawy, jest zmiana znacznika, ale udawajmy, że nie masz tego luksusu. Być może znacznik informacyjny jest generowany przez skrypt strony trzeciej lub jej dziedzictwa, który próbujesz ponownie przesłać. Więc jak możemy to naprawić?

Spotykać się Wyświetlacz: Spis treści. . Ta mała liniowa zasadniczo sprawia, że ​​element zachowywał się tak, jakby nie ma. Nadal widzisz potomków elementu, ale sam element nie wpływa na układ.

Ponieważ udajemy, że nie możemy zmienić znacznika (tylko na ten krok), możemy być nieco mądry o tym i zrobić .karta Elementy elementy Flex i prawie całkowicie zignorują znaczniki listy.

Najpierw usuń istniejące .feed li. klasa, a następnie użyj Wyświetlacz: Spis treści. dla obu & lt; Ul & GT; i & lt; li & gt; elementy:

 .Feed ul,
.Feed li {
Wyświetlacz: zawartość;
} 

Teraz powinieneś zobaczyć karty płynące w kolejności, ale straciliśmy rozmiar. Naprawić to, dodając właściwość Flex do .karta zamiast:

. Kard {
FLEX: 1 0 40%;
} 

Ta-da! Nasze karty są teraz korzystając z cudów flexbox, jak gdyby ich konstrukcyjna nieuporządkowana lista znacznika nie istnieje.

Jako boczna uwaga możesz się zastanawiać, dlaczego fleksja Wartość jest ustawiona na 40%. To dlatego .karta Klasa ma margines, który nie jest zawarty w obliczenia szerokości, jak można się spodziewać podczas używania Szybkość pudełka: Border-Box . Pracować wokół tego, musimy tylko ustawić fleksja Wystarczająco wysoki, aby wywołać owijanie w niezbędnym punkcie i flexbox wypełnie pozostałe miejsce automatycznie.

04. Eksploruj zapytania o funkcje

Mimo że Wyświetlacz: Spis treści. Czy dokładnie to, czego potrzebujemy, nadal jest tylko w pracy roboczej z W3C. W przypadku wsparcia chromowanego przybyło tylko w wersji 65 wydanej w marcu 2018 r. Niewiarygodnie Firefox ma wsparcie od kwietnia 2015 roku!

Jeśli wyłączysz styl w DevTools, zobaczysz, że nasze zmiany zrobiły trochę bałaganu z układem, kiedy Wyświetlacz: Spis treści. nie jest stosowany. Więc co możemy z tym zrobić? Czas na naszą kolejną nową funkcję - zapytań funkcji.

Te prace, podobnie jak zapytania multimedialne, ale pozwalają Ci zapytać przeglądarki - za pomocą samego CSS - jeśli obsługiwany jest wyrażenie właściwości i wartości. Jeśli są, style zawarte wewnątrz zapytania zostaną zastosowane. Przejdźmy teraz Wyświetlacz: Spis treści. Style w zapytanie funkcji.

 @Supports (Display: Spis treści) {
.Feed ul,
.Feed li {
  Wyświetlacz: zawartość;
}
.karta {
  FLEX: 1 0 40%;
}
} 

05. Użyj "nie" dla czystszego wyniku

Zwykle w tego rodzaju scenariuszu progresywnego ulepszenia korzystamy z zapytania, aby dodać nowe style, ale musiałoby również wyłączyć niektóre z oryginalnych stylów niezbędnych do układu awaryjnego.

Można jednak zdecydować, ponieważ wsparcie dla zapytań funkcji jest całkiem dobry (jeśli ignorujesz IE) rzeczywiście chcesz użyć zapytania funkcji nie operator. Działa tak, jakbyś się spodziewał, więc możemy ponownie zastosować nasz oryginał zgiąć nieruchomość do elementów listy, gdy Wyświetlacz: Spis treści. nie jest wspierany:

 @Supports nie (Wyświetlacz: Spis treści) {
.Feed li {
  FLEX: 1 0 50%;
}
} 

W środku nie zapytanie Możemy dodać kilka stylów, aby .jest Przedmioty zasadniczo stosują to, co było dziedziczone za pomocą Wyświetlacz: Spis treści. .

 Feed li.nested {
flex-basa: 100%;
}
.Feed li.jestat ul {
 Wyświetlacz: Flex;
 Flex-Wrap: Wrap;
} 

06. Robienie tego krok dalej

Możesz już zobaczyć potencjał zapytań funkcji, ale naprawdę fajne jest to, że można połączyć wyrażenia za pomocą trzech dostępnych operatorów: i , lub i nie . Być może moglibyśmy również sprawdzić Wyświetlacz: Flex. Wsparcie, a następnie dodaj oparty na pływakach.

Nie zamierzamy tego zrobić tutaj, ale jeśli byliśmy, najpierw zmodyfikowaliśmy dwa pytania dotyczące funkcji, takich jak:

 @Supports (Wyświetlacz: Flex) i (Wyświetlacz: Spis treści) {
...
}
@Supports (Wyświetlacz: Flex) i (nie (wyświetlacz: Spis treści)) {
...
} 

Jako bonus można również przetestować dla właściwości niestandardowych wsparcia:

 @Supports (--FOO: Green) {
...
} 

07. Dodaj pudełko na czacie

Teraz mamy piękne wiadomości na miejscu, dodajmy małą skrzynkę czatu, która jest przymocowana do prawego prawego ekranu ekranu. Będziemy potrzebować listy wiadomości i pola tekstowego użytkownika, aby wprowadzić ich wiadomość. Dodaj ten blok tuż po otwarciu & lt; body & gt; etykietka:

08. Styl Pudełko na czacie

Czas szybko dodać trochę stylizacji, więc wygląda pół przyzwoitego.

 .Chat {
 Tło: #FFF;
 Granica: 10px Solid # 000;
 Dół: 0;
 Rozmiar czcionki: 10px;
 Pozycja: Naprawiono;
 Prawo: 0;
 Szerokość: 300px;
 Z-index: 10;
}
.Messages {
 Border-dno: 5px Solid # 000;
 Przepełnienie: Auto;
 Wyściółka: 10px;
 Maksymalna wysokość: 300px;
}
.Message {
 Tło: # 000;
 Border-Radius: 5px;
 Kolor: #FFF;
 Margines: 0 20% 10px 0;
 Wyściółka: 10px;
}
.Messages li: last-dziecko .message {
 margines-dno: 0;
}
.Wejście {
 obramowanie: brak;
 Blok wyświetlacza;
 Wyściółka: 10px;
 Szerokość: 100%;
} 

09. Łańcuch przewijania

Mam nadzieję, że teraz będziesz miał trochę pudełka czatu z przewijaną listą wiadomości siedzących na górze wiadomości. Świetny. Ale czy zauważyłeś, co się dzieje, gdy przewijasz się wewnątrz zagnieżdżonego obszaru i dotrzesz do końca swojej przewijalnej zasięgu? Spróbuj. Przewiń aż do końca wiadomości, a zobaczysz, że sama strona rozpocznie przewijanie. Nazywa się to łańcuchem przewijania.

W naszym przykładzie nie jest wielka sprawa, ale w niektórych przypadkach może być. Musieliśmy pracować wokół tej funkcji przed tworzeniem przewijalnych obszarów wewnątrz modów lub menu kontekstowych.

Brudna poprawka jest ustawienie & lt; body & gt; do Przepełnienie: Ukryte , ale jest ładna, błyszcząca nowa właściwość CSS, która naprawia to wszystko i jest prostą jednorazową liniową. Powiedz cześć zachowanie przeciążenia . Istnieją trzy możliwe wartości:

• automatyczny - Domyślny, który umożliwia łańcuchowe łańcuchowe
• zawierać - Wyłącza łańcuchowe łańcuchowe
• Żaden - Wyłącza łańcuchowe łańcuchowe i inne efekty nadwyrzewodniczącego (np. Rubberbanding)

Możemy użyć skrótu zachowanie przeciążenia lub możemy kierować konkretny kierunek Ovevercroll-Beach-X (lub -Y. ). Dodajmy go do naszego .Messes. klasa:

 .messages {
...
Przeprowadź-zachowanie-Y: zawierają;
...} 

Teraz spróbuj ponownie przewijać, a zobaczysz, że nie wpływa już na przewijanie strony po osiągnięciu końca treści.

Ta nieruchomość jest również dość przydatna, jeśli chcesz wdrożyć funkcję ciągnącej do odświeżania w PWA, powiedzmy, aby odświeżyć wiadomość. Niektóre przeglądarki, takie jak Chrome dla Androida, automatycznie dodają własne i do tej pory nie było łatwego sposobu na wyłączenie go bez użycia JS do anulowania zdarzeń przy użyciu wykonywania wydajności nie pasywnych elementów obsługi.

Teraz musisz tylko dodać Zachowanie nadwyrzewodniczące: zawierają prawdopodobnie elementu zawierającego rzutnię & lt; body & gt; lub & lt; html & gt; .

Warto zauważyć, że ta nieruchomość nie jest standardem W3C, raczej propozycją przez Grupę Wspólnoty WWW (WICG). Popularne, stabilne i dojrzałe propozycje WICG są uważane za migrację do grupy roboczej W3C na późniejszym etapie.

10. Zwiń pudełko czatu, gdy nie jest używane

W tej chwili pudełko czatu zajmuje sporo kosmosu, które chyba, że ​​wchodzimy z nim interakcji, jest trochę rozpraszającym. Na szczęście możemy zrobić coś o tym z małą magią CSS.

Ale przede wszystkim musimy nieznacznie zmodyfikować nasze istniejące style. Domyślnie chcemy, aby pudełko czatu zostanie zawalone, więc musimy zmniejszyć maksymalna wysokość Wartość w. .Messes. klasa. Kiedy jesteśmy tam, możemy również dodać przejście do maksymalna wysokość własność:

 .messages {
 ...
 Max-wysokość: 25px;
przejście: max-wysokość 500ms; } 

Dalej: Kontynuuj odkrywanie nowych funkcji CSS w krokach 11-20

• 1.
• 2.

Bieżąca strona: Eksploruj 5 nowych funkcji CSS: Steps 01-10