W tym poście omawiamy kilka potężnych linii kodu CSS, które wykonują ciężką pracę i pomagają tworzyć solidne, nowoczesne układy.
Nowoczesne układy CSS umożliwiają deweloperom tworzenie naprawdę przydatnych i solidnych reguł stylizacji za pomocą zaledwie kilku naciśnięć klawiszy. W wymienionym wyżej wykładzie i tym poście omawiamy 10 skutecznych linii kodu CSS, które wykonują naprawdę ciężką pracę.
Aby samodzielnie zapoznać się z tymi demonstracjami lub pobawić się nimi, otwórz wbudowaną stronę Glitch lub wejdź na 1linelayouts.glitch.me.
01. Super Centered: place-items: center
W przypadku pierwszego układu „pojedyncza linia” rozwiążemy największą tajemnicę w świecie CSS: jak wyśrodkować elementy. Chcę Cię poinformować, że dzięki place-items: center jest to łatwiejsze, niż myślisz.
Najpierw określ grid jako metodę display, a potem w tym samym elemencie wpisz place-items: center. place-items to skrót do ustawiania wartości align-items i justify-items jednocześnie. Ustawienie go na center powoduje, że zarówno align-items, jak i justify-items mają wartość center.
.parent {
display: grid;
place-items: center;
}
Dzięki temu treści są idealnie wyśrodkowane w elemencie nadrzędnym, niezależnie od rozmiaru wewnętrznego.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Następny mamy rozłożony na części naleśnik. Jest to typowy układ dla stron marketingowych, na których może znajdować się rząd 3 elementów, zwykle z obrazem, tytułem i tekstem opisującym niektóre funkcje produktu. Na urządzeniach mobilnych chcemy, aby elementy te były ułożone w kolonach i rozwijały się wraz ze zwiększaniem rozmiaru ekranu.
Dzięki zastosowaniu Flexboxa nie musisz stosować zapytań medialnych, aby dostosować położenie tych elementów po zmianie rozmiaru ekranu.
Skrót flex oznacza: flex: <flex-grow> <flex-shrink> <flex-basis>.
Jeśli więc chcesz, aby pola wypełniały się do rozmiaru <flex-basis>, zmniejszały się w przypadku mniejszych rozmiarów, ale nie rozciągały, aby wypełnić dodatkowe miejsce, wpisz: flex: 0 1 <flex-basis>. W tym przypadku <flex-basis> to 150px, więc wygląda tak:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Jeśli chcesz, aby pola rozciągały się i wypełniały przestrzeń, gdy zostaną przeniesione na następny wiersz, ustaw wartość <flex-grow> na 1. Wygląda to tak:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Gdy zwiększasz lub zmniejszasz rozmiar ekranu, te elementy flex powiększają się i pomniejszają.
03. Pasek boczny: grid-template-columns: minmax(<min>, <max>) …)
W tym pokazie zastosowano funkcję minmax w przypadku układów siatki. Tutaj ustawiamy minimalny rozmiar paska bocznego na 150px, ale na większych ekranach pozwalamy mu się rozciągać do 25%. Pasek boczny zawsze zajmuje 25% poziomej przestrzeni swojego elementu nadrzędnego, dopóki 25% nie stanie się mniejsze niż 150px.
Dodaj tę wartość jako wartość atrybutu grid-template-columns, wpisując:
minmax(150px, 25%) 1fr. Element w pierwszej kolumnie (w tym przypadku pasek boczny) ma minmax 150px w miejscu 25%, a drugi element (sekcja main) zajmuje pozostałą część przestrzeni jako pojedynczy 1fr utwór.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
W przeciwieństwie do przykładu „Deconstructed Pancake” ten przykład nie owija elementów podrzędnych, gdy zmienia się rozmiar ekranu. Ten układ, który jest często nazywany stopką przyklejoną, jest często używany zarówno w witrynach, jak i aplikacjach, w przypadku aplikacji mobilnych (stopka jest zwykle paskiem narzędzi) i witryn (aplikacje jednostronicowe często używają tego globalnego układu).
Dodanie do komponentu elementu display: grid spowoduje utworzenie siatki z 1 kolumną, ale obszar główny będzie miał wysokość równą wysokości treści z uwzględnieniem stopki.
Aby stopka była zawsze widoczna u dołu strony, dodaj:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
W ten sposób ustawiasz, aby nagłówek i stopka automatycznie przyjmowały rozmiar swoich elementów, a pozostawioną przestrzeń (1fr) zostanie zastosowana w głównej części. Również wiersz o wymiarze auto będzie miał rozmiar odpowiadający minimalnej wielkości jego elementów, więc gdy ich rozmiar się zwiększy, wiersz sam się rozszerzy, aby dopasować się do nowych wymiarów.
05. Klasyczny układ Holy Grail: grid-template: auto 1fr auto / auto 1fr auto
W tym klasycznym układzie znajdziesz 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 za pomocą pojedynczego wiersza kodu utworzyć całą siatkę, użyj właściwości grid-template. Dzięki temu możesz jednocześnie ustawiać wiersze i kolumny.
Para właściwość–wartość to: grid-template: auto 1fr auto / auto 1fr auto. Pomiędzy pierwszą a drugą listą rozdzieloną spacjami znajduje się znak slash (ukośnik), który oznacza przerwę między wierszami i kolumnami.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Podobnie jak w ostatnim przykładzie, w którym nagłówek i stopka miały automatycznie dostosowany rozmiar, tutaj lewy i prawy pasek boczny mają automatycznie dostosowany rozmiar na podstawie rozmiaru ich elementów podrzędnych. Tym razem jest to jednak rozmiar poziomy (szerokość), a nie pionowy (wysokość).
06. Siatka 12-elementowa: grid-template-columns: repeat(12, 1fr)
Kolejna klasyczna opcja to siatka 12-elementowa. Za pomocą funkcji repeat() możesz szybko tworzyć siatki w CSS. Użycie wartości repeat(12, 1fr); w kolumnach szablonu siatki spowoduje utworzenie 12 kolumn o długości 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Teraz masz siatkę ścieżki z 12 kolumnami, więc możesz umieścić na niej dzieci. Jednym ze sposobów jest umieszczenie ich za pomocą linii siatki. Na przykład grid-column: 1 / 13 obejmie cały zakres od pierwszego wiersza do ostatniego (13.) i 12 kolumn. grid-column: 1 / 5; obejmowałaby pierwsze 4 poziomy.
Innym sposobem zapisu jest użycie słowa kluczowego span. W przypadku span określasz linię początkową, a potem określasz, ile kolumn ma się rozciągać od tego punktu początkowego. W tym przypadku grid-column: 1 / span 12 jest równoważne z grid-column: 1 / 13, a grid-column: 2 / span 6 jest równoważne z grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (powtarzanie, automatycznie, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
W tym siódmym przykładzie połącz niektóre z poznanych już koncepcji, aby utworzyć responsywny układ z automatycznie umieszczanymi i elastycznymi elementami potomnymi. Bardzo fajnie. Najważniejsze terminy, które należy zapamiętać, to repeat, auto-(fit|fill) i minmax()', czyli akronim RAM.
W sumie wygląda to tak:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Ponownie używasz instrukcji powtórzenia, ale tym razem zamiast jawnej wartości liczbowej używasz słowa kluczowego auto-fit. Umożliwia to automatyczne umieszczanie tych elementów podrzędnych. Te elementy mają też podstawową minimalną wartość 150px i wartość maksymalną 1fr, co oznacza, że na mniejszych ekranach zajmą całą szerokość 1fr, a gdy osiągną szerokość 150px, zaczną się układać na tej samej linii.
W przypadku wartości auto-fit pola będą się rozciągać, gdy ich rozmiar poziomy przekroczy 150 pikseli, aby wypełnić całą pozostałą przestrzeń. Jeśli jednak zmienisz to ustawienie na auto-fill, elementy nie będą się rozciągać, gdy ich rozmiar bazowy w funkcji minmax zostanie przekroczony:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up: justify-content: space-between
W przypadku kolejnego układu głównym punktem demonstracyjnym jest justify-content: space-between, który umieszcza pierwszy i ostatni element podrzędny na krawędziach ich pudełka ograniczającego, a pozostałą przestrzeń równomiernie rozmieszcza między elementami. Te karty są umieszczane w trybie wyświetlania Flexbox, a kierunek jest ustawiany na kolumnę za pomocą flex-direction: column.
Umożliwia to umieszczenie tytułu, opisu i bloku obrazu w kolumnie pionowej na karcie nadrzędnej. Następnie zastosowanie justify-content: space-between zakotwiczy pierwsze (tytuł) i ostatnie (blok z obrazem) elementy do krawędzi flexboxa, a tekst opisowy umieszczony między nimi zostanie rozmieszczony z równym odstępem od obu końców.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
W tym rozdziale omawiamy techniki, które nie są obsługiwane przez wszystkie przeglądarki, ale mają bardzo ciekawe zastosowanie w przypadku układów i responsywnego interfejsu użytkownika. W tym pokazie ustawiasz szerokość za pomocą funkcji clamp: width: clamp(<min>, <actual>, <max>).
W ten sposób ustawiasz minimalny i maksymalny rozmiar oraz rzeczywisty rozmiar. W przypadku wartości może to wyglądać tak:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Minimalny rozmiar to 23ch, czyli 23 jednostki znaków, a maksymalny to 46ch, czyli 46 znaków. Jednostki szerokości znaków są określane na podstawie rozmiaru czcionki elementu (a dokładniej szerokości znaku 0). „Rzeczywisty” rozmiar to 50%, co oznacza 50% szerokości elementu nadrzędnego.
Funkcja clamp() umożliwia temu elementowi zachowanie szerokości 50% dopóki 50% nie będzie większe niż 46ch (w przypadku szerszych widocznych obszarów) lub mniejsze niż 23ch (w przypadku mniejszych widocznych obszarów). Gdy rozciągam i zszuszam rozmiar nadrzędnego, szerokość tej karty zwiększa się do maksymalnego punktu ograniczonego i zmniejsza do minimalnego punktu ograniczonego. Pozostanie ona wyśrodkowana w elemencie nadrzędnym, ponieważ zastosowaliśmy dodatkowe właściwości, aby ją wyśrodkować. Umożliwia to tworzenie czytelniejszych układów, ponieważ tekst nie będzie zbyt szeroki (powyżej 46ch) ani zbyt ściśnięty (węższy niż 23ch).
To też świetny sposób na wdrożenie typografii dostosowanej do urządzenia. Możesz na przykład napisać: font-size: clamp(1.5rem, 20vw, 3rem). W takim przypadku rozmiar czcionki nagłówka zawsze będzie się mieścić w zakresie od 1.5rem do 3rem, ale będzie się zwiększać i zmniejszać w zależności od rzeczywistej wartości 20vw, aby dopasować się do szerokości widocznego obszaru.
Jest to świetna technika zapewniająca czytelność dzięki minimalnej i maksymalnej wartości rozmiaru, ale pamiętaj, że nie jest ona obsługiwana we wszystkich nowoczesnych przeglądarkach. Dlatego zadbaj o alternatywne rozwiązania i przeprowadź testy.
10. Szacunek dla innych: aspect-ratio: <width> / <height>
Ostatnie narzędzie do układania jest najbardziej eksperymentalne. Został on niedawno wprowadzony w Chrome Canary w Chromium 84. Firefox również pracuje nad jego wdrożeniem, ale obecnie nie jest on dostępny w żadnej stabilnej wersji przeglądarki.
Chcę jednak wspomnieć o tym, ponieważ jest to bardzo częsty problem. To po prostu zachowanie formatu obrazu.
W przypadku właściwości aspect-ratio, gdy zmieniam rozmiar karty, zielony blok wizualny zachowuje format 16 x 9. Proporcje obrazu są zachowane w przypadku aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Aby zachować format obrazu 16 x 9 bez tej właściwości, musisz użyć padding-tophacka i ustawić dla niego wypełnienie 56.25%, aby ustawić stosunek wysokości do szerokości. Wkrótce udostępnimy usługę, która pozwoli uniknąć konieczności stosowania tego obejścia i obliczania odsetka. Możesz utworzyć kwadrat za pomocą formatu 1 / 1, formatu 2:1 za pomocą 2 / 1 i tak naprawdę dowolnego formatu, którego potrzebujesz, aby obraz był skalowany zgodnie z ustawionym współczynnikiem.
.square {
aspect-ratio: 1 / 1;
}
Ta funkcja jest jeszcze w drodze, ale warto o niej wiedzieć, ponieważ rozwiązuje wiele problemów, z którymi deweloperzy borykają się od dawna, zwłaszcza w przypadku filmów i ramek iframe.
Podsumowanie
Dziękujemy za udział w tej podróży przez 10 potężnych linii kodu CSS. Aby dowiedzieć się więcej, obejrzyj pełny film i wypróbuj demo.