Ciekawe funkcje CSS, które powinieneś wiedzieć

W zeszłym tygodniu rozmawialiśmy o pseudoelementach i pseudoklasach w CSS. W tym poście widzieliśmy, jak te funkcje CSS pozwalają nam generować bardziej zwięzły, zrozumiały i łatwy w utrzymaniu kod. Dzisiaj chciałbym podzielić się z Wami kilkoma dodatkowymi właściwościami CSS do budowania adaptacyjnych stron internetowych , które uwzględniają preferencje odwiedzających .

Proporcje obrazu z object-fit do object-position

object-fit to właściwość CSS, która umożliwia ustawienie sposobu zmiany rozmiaru elementu zastępczego (na przykład obrazu), aby pasował do jego kontenera. Zobaczmy, co to oznacza na konkretnym przykładzie, dobrze?

Załóżmy, że mamy następujący obraz pionowy:

i chcemy go wyświetlić w następującym obszarze:

który ma 15em i zajmuje 80% dostępnej szerokości. W zasadzie możesz pomyśleć, że wszystko, co musimy zrobić, to ustawić konkretną width i height naszego obrazu, prawda?

 .custom-size { height: 15em; width: 80%; }

Cóż, jeśli to zrobisz, zobaczysz, że proporcje obrazu są pomieszane:

Aby zapobiec zniekształceniu obrazu podczas używania określonej szerokości i wysokości, programiści polegali na (a niektórzy nadal używają) właściwości background CSS elementu div . Dlatego zamiast dodawać obraz za pomocą tagu img , stworzyliśmy kontener div :

 <div></div>

ustaw prawidłowe wymiary we wspomnianym div , a następnie dodaj rzeczywisty obraz za pomocą CSS, korzystając z właściwości background-size i background-position :

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

A tutaj możesz zobaczyć wynik:

Skalowanie i przycinanie obrazów przy użyciu właściwości background CSS w tagu div to złe rozwiązanie, ponieważ nie używasz już semantycznie poprawnego tagu HTML: img . Poza tym tagi img zawierają wiele fajnych właściwości, które sprawią, że strony internetowe będą szybsze i bardziej dostępne: właściwość alt opisująca obraz, srcset , aby był responsywny, loading w celu leniwego ładowania i tak dalej.

Jeśli chcesz przeskalować i przyciąć obraz tak, aby pasował do określonych wymiarów bez zniekształcania samego obrazu, wystarczy użyć właściwości CSS object-fit i object-position , które zachowują się jak background-size i background-position robić:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Jeśli zastosujesz poprzednie reguły do ​​tagu img :

 <img class="custom-size" src="…/image.jpg" />

oto wynik, który otrzymujesz:

co dokładnie cię interesowało, prawda?

Jeśli chcesz dowiedzieć się więcej o tej nieruchomości, oto link ze wszystkimi niezbędnymi informacjami.

Projektowanie adaptacyjne z zapytaniami o media

Zapytania o media to mechanizm, który umożliwia dodawanie reguł CSS do Twojej witryny w oparciu o charakterystykę urządzenia lub aplikacji, z której odwiedzający uzyskują dostęp do sieci. Jestem pewien, że je znasz, ponieważ media kwerendy są podstawą do tworzenia responsywnych stron internetowych, ale możesz z nimi zrobić o wiele więcej!

Zapytania dotyczące klasycznych mediów

Użycie zapytania o media w arkuszu stylów CSS jest tak proste, jak dodanie słowa kluczowego @media z dwiema rzeczami: z jednej strony warunkiem, który opisuje, kiedy zapytanie o media jest aktywne, a z drugiej zestawem reguł CSS, które powinny być załadowany, gdy warunek zostanie spełniony. Właśnie dlatego zapytania o media są podstawą do tworzenia responsywnych projektów: po prostu stosujesz taki lub inny zestaw reguł w zależności od width przeglądarki odwiedzającego.

Załóżmy na przykład, że chcesz zmienić pasek boczny w poniższym akapicie:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lew na werandzie jest czasem miękki brzydki, ale drży na zewnątrz element. Ale potrzeba przedsiębiorców nazywa stres termiczny. Zarezerwowana mikrofalówka, ale moje drzwi są zawsze lub czasami masą autorską. Android i Nunc sodales interdum, tincidunt erat ac, tincidunt elit. Jednak ultricies ac, arcu metus Sed congue. Dla wygody bój się białka wzbogaconego w leo. Czy tellus orci, tempor id egestas nec, przynajmniej zdobądź kilku graczy.

aby używał wszystkich kolorów tęczy w zależności od szerokości przeglądarki. Oto jak możesz osiągnąć to zachowanie za pomocą CSS:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Całkiem proste, prawda? Po prostu musimy zastosować inny kolor za każdym razem, gdy szerokość przeglądarki przekroczy określony próg. Pamiętaj, że wdrażamy to przy użyciu podejścia mobile first, ponieważ „nowe” reguły są stosowane w miarę powiększania się ekranu. Zmień szerokość okna, a zobaczysz wynik.

Jak zaimplementować tryb ciemny za pomocą CSS

Tryby ciemne są teraz modne, zarówno na urządzeniach mobilnych, jak i stacjonarnych. Czy wiesz, że pojawiło się zapytanie o media, aby sprawdzić, czy użytkownicy wolą tryby ciemne? Za pomocą zapytania o media prefers-color-scheme możesz sprawdzić, czy użytkownik preferuje light , czy dark schemat kolorów. Co oznacza, że ​​masz teraz możliwość zbudowania dwóch wersji swojej witryny, tak aby odpowiadała preferencjom wszystkich odwiedzających.

Rozważmy na przykład następujący fragment kodu HTML:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

oraz te reguły CSS:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

W zależności od konfiguracji zobaczysz, że „Dynamiczna” część poprzedniego fragmentu kodu HTML wygląda jak Jasny lub Ciemny motyw:

Całkiem fajnie, co? I proste!

Inne ciekawe przypadki użycia z zapytaniami o media

Istnieje wiele zapytań o media, z których możesz skorzystać (masz tutaj pełną listę), ale chciałbym skupić się w szczególności na jednym. W szczególności chcę wyjaśnić, jak zastosować różne style w zależności od tego, czy strona jest wyświetlana w przeglądarce, czy ma zostać wydrukowana. Wszystko, co musisz zrobić, to użyć słowa kluczowego print lub screen do zapytania o media w następujący sposób:

 @media print { … } @media screen { … }

lub utwórz dwa oddzielne pliki CSS, po jednym dla każdego przypadku użycia, i uwzględnij je w swoim kodzie HTML, używając właściwości media tagu link :

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

Interesujące jest to, że możesz utworzyć arkusz stylów, który przekształci Twoją witrynę w treść przeznaczoną do wydrukowania. Dzięki temu możesz na przykład ukryć dynamiczne części sieci, które nie mają sensu w wersji drukowanej (takie jak menu lub formularze). Możesz też upewnić się, że niektóre rzeczy, które zostaną utracone podczas drukowania, staną się widoczne, na przykład docelowy adres URL linku:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

którego wynik jest następujący:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, w pharetra velit mocm. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Zmienne CSS

Na koniec porozmawiajmy o kolejnej niesamowitej funkcji CSS: niestandardowych właściwościach CSS (znanych również jako zmienne CSS). Złożone strony internetowe mają bardzo duże ilości CSS i dość często zdarza się, że ta sama wartość powtarza się w kółko. Na przykład twoja paleta kolorów, obramowania, wypełnienia itp. są używane w każdym miejscu. Cóż, zmienne CSS upraszczają tę złożoność. I są niezwykle przydatne do łatwego wdrażania trybu ciemnego!

Zmienne CSS to dokładnie to, o czym myślisz: sposób na przechowywanie i ponowne użycie określonej wartości CSS za znaczącą nazwą. O wiele łatwiej jest zrozumieć, czym --main-text-color niż #333 , prawda?

Deklarowanie właściwości niestandardowej odbywa się przy użyciu nazwy właściwości niestandardowej, która zaczyna się od podwójnego myślnika ( -- ) i wartości właściwości, która może być dowolną prawidłową wartością CSS. Jak każda inna właściwość, jest to zapisane w zestawie reguł, na przykład:

 element { --main-color: red; --main-padding: 2em 1em; }

Selektor, którego używasz w bloku reguł, w którym zdefiniowałeś zmienną CSS, określa jej zakres. Oznacza to, że jeśli zdefiniujesz zmienną w regule div.banner , ta zmienna będzie dostępna tylko w tym zakresie. Jednak najczęstszym jest tworzenie zmiennych w zasięgu globalnym za pomocą pseudoklasy :root :

 :root { --main-color: red; --main-padding: 2em 1em; }

Aby użyć zmiennej CSS, wystarczy podać jej nazwę w funkcji var :

 p { color: var(--main-color); padding: var(--main-padding); }

CSS jest tutaj, aby Ci pomóc

Struktura HTML strony internetowej jest jak fundament domu — potrzebujesz solidnego fundamentu, jeśli chcesz zbudować coś dźwiękowego. Tworząc stronę internetową, upewnij się, że używasz semantycznie poprawnego i czystego drzewa HTML. Spowoduje to, że strona będzie działać we wszystkich przeglądarkach dla wszystkich odwiedzających, a stosowanie na niej sztuczek CSS będzie proste i skuteczne.

Mam nadzieję, że podobał Ci się dzisiejszy post. Jeśli tak, podziel się nim ze znajomymi

Polecane zdjęcie Williama Daigneaulta na Unsplash.