Nowoczesne układy CSS umożliwiają deweloperom tworzenie naprawdę przydatnych i wytrzymałych 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 linijka” rozwiążemy największą tajemnicę świata 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 następnie na 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 witryn marketingowych, który może zawierać rząd 3 elementów, zwykle ze zdjęciem, tytułem i tekstem opisującym niektóre funkcje produktu. Na urządzeniach mobilnych chcemy, aby elementy te były ułożone w łatwo dostępny sposób 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 rozpychał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 demo funkcja minmax jest używana do układów siatki. Tutaj ustawiamy minimalny rozmiar paska bocznego na 150px, ale na większych ekranach pozwalamy mu się rozciągnąć 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:
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ęść 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 powoduje zawijania elementów potomnych, 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 różnych aplikacjach mobilnych (stopka jest zwykle paskiem narzędzi) i witrynach (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 stopką.
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 ma paski boczne.
Aby za pomocą jednego wiersza kodu utworzyć całą siatkę, użyj właściwości grid-template. Dzięki temu możesz ustawiać wiersze i kolumny jednocześnie.
Para właściwość–wartość to: grid-template: auto 1fr auto / auto 1fr auto. Pomiędzy pierwszą i drugą listą rozdzieloną spacjami znajduje się znak slash (ukośnik), który oznacza podział na wiersze i kolumny.
.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 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 pisać siatki w CSS. Korzystając z wartości repeat(12, 1fr); w kolumnach szablonu siatki, uzyskasz 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, w których możesz umieścić elementy podrzędne. 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 na zapisanie tego 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 implikacje dla układów i responsywnego interfejsu użytkownika. W tym pokazie szerokość ustawiasz za pomocą funkcji clamp: width: clamp(<min>, <actual>, <max>).
Ta opcja ustawia bezwzględny 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 widoków) lub mniejsze niż 23ch (w przypadku mniejszych widoków). Jak widać, gdy rozciągam i zszypucham rozmiar nadrzędnego, szerokość tej karty zwiększa się do maksymalnej wartości granicznej i zmniejsza do minimalnej wartości granicznej. Pozostanie ona wyśrodkowana w elemencie nadrzędnym, ponieważ zastosowaliśmy dodatkowe właściwości, aby ją wyśrodkować. Dzięki temu układy będą czytelniejsze, 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 różnych rozmiarów ekranów. 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, która zapewnia 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 ręcznego obliczania wartości procentowych. Możesz utworzyć kwadrat o formatach 1 / 1 lub 2 na 1, a także dowolny format, którego potrzebujesz, aby obraz był skalowany zgodnie z zadanym współczynnikiem.2 / 1
.square {
aspect-ratio: 1 / 1;
}
Ta funkcja jest jeszcze w drodze, ale warto ją poznać, ponieważ rozwiązuje wiele problemów, z którymi spotykają się deweloperzy, w tym ja sama, 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.