W tym poście wyróżniamy kilka zaawansowanych linii CSS, które pozwalają wykonać ciężkie zadania i tworzyć wydajne, nowoczesne układy.
Nowoczesne układy CSS umożliwiają programistom pisanie naprawdę znaczących i niezawodnych reguł stylistycznych przy użyciu kilku klawiszy. W omówieniu powyżej i kolejnym poście omówimy 10 najbardziej zaawansowanych linii stylów CSS, które mogą wykonać bardzo ciężką pracę.
Aby wypróbować te wersje demonstracyjne samodzielnie lub samodzielnie wypróbować te wersje, zajrzyj do umieszczonej powyżej wersji Glitch lub wejdź na 1linelayouts.glitch.me.
01. Wyśrodkowano: place-items: center
W pierwszym układzie „jednowierszowym” zajmijmy się największą zagadką we wszystkich krainach CSS: wyśrodkujmy elementy. Pamiętaj, że w place-items: center jest to łatwiejsze, niż Ci się wydaje.
Najpierw określ grid jako metodę display, a potem wpisz place-items: center w tym samym elemencie. place-items to skrót umożliwiający ustawienie równocześnie align-items i justify-items. Jeśli ma wartość center, align-items i justify-items mają wartość center.
.parent {
display: grid;
place-items: center;
}
Dzięki temu treść będzie idealnie wyśrodkowana w obrębie elementu nadrzędnego, bez względu na ich wewnętrzny rozmiar.
02. Zdekonstruowany naleśnik: flex: <grow> <shrink> <baseWidth>
Potem mamy zdekonstruowany naleśnik. Jest to typowy układ witryn marketingowych, który może zawierać wiersz 3 produktów, zwykle ze zdjęciem, tytułem, a następnie tekstem opisującym niektóre cechy produktu. Na urządzeniach mobilnych chcemy, aby dobrze się nakładały i rozwijały wraz ze zwiększaniem rozmiaru ekranu.
Dzięki zastosowaniu Flexbox tego efektu nie potrzebujesz zapytań o media, aby dostosować położenie tych elementów przy zmianie rozmiaru ekranu.
Skrót flex oznacza: flex: <flex-grow> <flex-shrink> <flex-basis>.
Dlatego, jeśli chcesz, aby pola wypełniały się do rozmiaru <flex-basis>, zmniejsz rozmiar do mniejszego rozmiaru, ale nie rozciągną, aby wypełniły dodatkowe miejsce, wpisz: flex: 0 1 <flex-basis>. W tym przypadku <flex-basis> to 150px, więc wygląda to tak:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Jeśli chcesz, by pola były rozciągane i wypełniane przy zawijaniu do następnego wiersza, ustaw wartość <flex-grow> na 1, jakby wyglądały:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Teraz w miarę zwiększania lub zmniejszania rozmiaru ekranu te elementy elastyczne się zmniejszają i powiększają.
03. Komunikat na pasku bocznym: grid-template-columns: minmax(<min>, <max>) …)
W tej prezentacji korzystamy z funkcji minmax dotyczącej układów siatki. W tym przypadku trzeba ustawić minimalny rozmiar paska bocznego na 150px, ale na większych ekranach umożliwia rozciągnięcie na 25%. Pasek boczny zawsze zajmuje 25% obszaru nadrzędnego elementu nadrzędnego, dopóki ta wartość 25% nie będzie mniejsza niż 150px.
Dodaj tę wartość jako wartość atrybutów siatki-szablonu-kolumn z tą wartością: minmax(150px, 25%) 1fr. Element w pierwszej kolumnie (w tym przypadku na pasku bocznym) otrzyma minmax o wartości 150px w 25%, a drugi element (sekcja main tutaj) zajmuje resztę miejsca jako pojedyncza ścieżka 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Stos naleśników: grid-template-rows: auto 1fr auto
W przeciwieństwie do Deconstructed Panke (Naleśnik) ten przykład nie zawija elementów podrzędnych po zmianie rozmiaru ekranu. Układ ten jest często nazywany przyklejoną stopką. Jest on często używany zarówno w witrynach, jak i w aplikacjach, aplikacji mobilnych (stopka zwykle jest paskiem narzędzi) i witrynach (ten układ globalny jest często stosowany w aplikacjach jednostronicowych).
Dodanie elementu display: grid do komponentu spowoduje, że uzyskasz siatkę z 1 kolumną, ale obszar główny będzie miał wysokość tylko dla treści ze stopką pod spodem.
Aby stopka przylegała do dołu, dodaj:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Powoduje to automatyczne przyjęcie rozmiaru zawartości nagłówka i stopki, a pozostały obszar (1fr) do obszaru głównego zostanie zastosowany, a auto wiersz rozmiaru będzie miał wielkość minimalnej zawartości elementów podrzędnych, więc zawartość wiersza będzie się powiększać.
5. Klasyczny układ Świętego Graala: grid-template: auto 1fr auto / auto 1fr auto
Ten klasyczny układ Świętego Graala obejmuje nagłówek, stopkę, lewy pasek boczny, prawy pasek boczny i treść główną. Jest podobny do poprzedniego układu, ale teraz zawiera paski boczne.
Aby zapisać całą siatkę za pomocą 1 wiersza kodu, użyj właściwości grid-template. Dzięki temu możesz ustawić zarówno wiersze, jak i kolumny w tym samym czasie.
Para właściwość i wartość to: grid-template: auto 1fr auto / auto 1fr auto. Ukośnik między pierwszą i drugą listą oddzieloną spacjami to podział między wierszami i kolumnami.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Tak jak w poprzednim przykładzie, gdzie rozmiar nagłówka i stopki był automatycznie dopasowywany do rozmiaru zawartości, tutaj lewy i prawy pasek boczny jest automatycznie dopasowywany na podstawie wewnętrznego rozmiaru elementów podrzędnych. Tym razem jednak ma wymiary poziome (szerokość), a nie pionową (wysokość).
6. Siatka 12-ramienna: grid-template-columns: repeat(12, 1fr)
Następnie mamy kolejną klasyczną siatkę, czyli 12 przęseł. Możesz szybko pisać siatki w CSS za pomocą funkcji repeat(). Zastosowanie atrybutu repeat(12, 1fr); w kolumnach szablonu siatki daje po 12 kolumn z kolumny 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Masz już 12-kolumnową siatkę ścieżek, możemy więc umieścić w niej nasze elementy podrzędne. Można to zrobić na przykład za pomocą linii siatki. Na przykład grid-column: 1 / 13 obejmuje całą długość od pierwszego do ostatniego (13 wiersza) i zakres 12 kolumn. Pole grid-column: 1 / 5; obejmuje pierwsze cztery.
Innym sposobem zapisu tych informacji jest użycie słowa kluczowego span. Opcja span pozwala Ci ustawić linię początkową i liczbę kolumn, które mają być rozpięte od tego punktu początkowego. W tym przypadku grid-column: 1 / span 12 będzie odpowiednikiem grid-column: 1 / 13, a grid-column: 2 / span 6 będzie odpowiednikiem grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
7. Pamięć RAM (powtarzanie, automatyczne, minimalna): grid-template-columns(auto-fit, minmax(<base>, 1fr))
W siódmym przykładzie połącz część omówionych już koncepcji, by utworzyć układ elastyczny z automatycznie rozmieszczanymi i elastycznymi elementami podrzędnymi. Całkiem porządnie. Kluczowe hasła, o których należy pamiętać, to repeat, auto-(fit|fill) i minmax()'. Nazwy te są zapisywane w skrócie RAM.
W sumie wygląda to:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Ponownie użyto słowa kluczowego auto-fit, ale tym razem zamiast jednoznacznej wartości liczbowej. Umożliwia to automatyczne umieszczanie tych elementów podrzędnych. Te dzieci mają też podstawową wartość minimalną 150px z maksymalną wartością 1fr, co oznacza, że na mniejszych ekranach będą zajmować pełną szerokość elementu 1fr. Gdy sięgną po 150px szerokości, zaczną przechodzić do tej samej linii.
W przypadku formatu auto-fit pola rozciągają się, ponieważ ich rozmiar w poziomie przekracza 150 pikseli i zapełnia całe pozostałe miejsce. Jeśli jednak zmienisz to ustawienie na auto-fill, nie rozciągną się po przekroczeniu podstawowego rozmiaru w funkcji minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
8. Lineup: justify-content: space-between
W przypadku następnego układu najważniejszym elementem jest justify-content: space-between, który umieszcza pierwszy i ostatni element podrzędny na krawędziach ramki ograniczającej, a pozostałe elementy są równomiernie rozłożone między nimi. Takie karty są umieszczane w trybie wyświetlania Flexbox z kierunkiem kolumny za pomocą funkcji flex-direction: column.
Spowoduje to umieszczenie tytułu, opisu i bloku obrazu w pionowej kolumnie na karcie nadrzędnej. Następnie zastosowanie elementu justify-content: space-between zakotwicza pierwszy (tytuł) i ostatni (blok obrazu) do krawędzi flexboxa, a tekst opisowy między nimi jest umieszczany z jednakowym odstępem od każdego punktu końcowego.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
9. Trzymaj swój styl: clamp(<min>, <actual>, <max>)
W tym artykule omówimy kilka technik, które są mniej obsługiwane w przeglądarkach, ale mają one naprawdę ciekawy wpływ na układy graficzne i elastyczne projektowanie interfejsu. W tej demonstracji ustawiasz szerokość za pomocą narzędzia zaciskowego w ten sposób: width: clamp(<min>, <actual>, <max>).
Służy do ustawiania absolutnego i maksymalnego rozmiaru oraz rzeczywistego rozmiaru. Dzięki wartościom może to wyglądać tak:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Minimalny rozmiar to 23ch lub 23 znaki, a maksymalny – 46ch (46 znaków). Jednostki szerokości znaków zależą od rozmiaru czcionki elementu (a konkretnie szerokości glifu 0). Rozmiar rzeczywisty to 50%, co odpowiada 50% szerokości elementu nadrzędnego.
Funkcja clamp() umożliwia utrzymanie przez element o szerokości 50% do czasu, w którym wartość 50% będzie większa niż wartość 46ch (w większych widocznych obszarach) lub mniejsza niż 23ch (na mniejszych widocznych obszarach). Jak widać, gdy rozciągam i zmniejszam rozmiar elementu nadrzędnego, szerokość tej karty zwiększa się do zakotwiczonego punktu maksymalnego i zmniejsza się do wartości minimalnej. Pozostaje wyśrodkowany w elemencie nadrzędnym, ponieważ do jego wyśrodkowania zastosowaliśmy dodatkowe właściwości. Zwiększa to czytelność układów, ponieważ tekst nie będzie zbyt szeroki (powyżej 46ch) ani zbyt wąski i wąski (niż 23ch).
Jest to również świetny sposób na implementację elastycznej typografii. Możesz na przykład wpisać: font-size: clamp(1.5rem, 20vw, 3rem). W takim przypadku rozmiar czcionki w nagłówku będzie zawsze ograniczony od 1.5rem do 3rem, ale zwiększy się i zmniejszy na podstawie rzeczywistej wartości 20vw, aby pasował do szerokości widocznego obszaru.
To świetna metoda, która pozwala zadbać o czytelność przy minimalnej i maksymalnej wartości rozmiaru. Pamiętaj jednak, że nie jest ona obsługiwana przez wszystkie nowoczesne przeglądarki, dlatego warto zadbać o sytuację zastępczego i przeprowadzić testy.
10. Szacunek do aspektu: aspect-ratio: <width> / <height>
To ostatnie narzędzie do tworzenia układu jest najbardziej eksperymentalną grupą. Została ona niedawno wprowadzona w Chrome Canary w Chromium 84 i w Firefoksie intensywnie pracujemy nad jej wdrożeniem, jednak obecnie ta funkcja nie jest dostępna w żadnej stabilnej wersji przeglądarki.
Chcę jednak wspomnieć o tym problemie, ponieważ jest on bardzo często spotykany. Chodzi jedynie o utrzymanie proporcji obrazu.
W przypadku właściwości aspect-ratio, gdy zmieniam rozmiar karty, zielony blok wizualny zachowuje współczynnik proporcji 16 x 9. Szanujemy współczynnik proporcji obrazu aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Aby zachować współczynnik proporcji 16 x 9 bez tej właściwości, musisz użyć hakera padding-top i dodać do niego dopełnienie 56.25%, aby ustawić współczynnik proporcji od góry do szerokości. Wkrótce udostępnimy odpowiednią usługę, która pozwoli uniknąć ataku i konieczności obliczenia wartości procentowej. Możesz utworzyć kwadrat o współczynniku 1 / 1, współczynniku 2:1 za pomocą 2 / 1 oraz dokładnie tyle, ile jest potrzebne do skalowania tego obrazu przy określonym współczynniku rozmiaru.
.square {
aspect-ratio: 1 / 1;
}
Choć ta funkcja wciąż jest rozwijana, warto o niej wiedzieć, bo rozwiązuje ona wiele problemów, z którymi spotkałem się wiele razy, zwłaszcza w przypadku wideo i elementów iframe.
Podsumowanie
Dziękuję za zapoznanie się z 10 zaawansowanymi liniami CSS. Aby dowiedzieć się więcej, obejrzyj cały film i samodzielnie wypróbuj prezentacje.