W tym poście omawiamy kilka zaawansowanych linii CSS, które wykonują najtrudniejsze zadania i pomagają tworzyć wydajne, nowoczesne układy.
Nowoczesne układy CSS pozwalają programistom pisać bardzo konkretne i solidne reguły stylu przy użyciu 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 przetestować je, skorzystaj z wbudowanego powyżej Glitcha lub wejdź na stronę 1linelayouts.glitch.me.
01. Super Centered: place-items: center
W przypadku pierwszego układu jednowierszowego musimy rozwiązać najpoważniejszą zagadkę na świecie CSS: ukierunkować kwestie. 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ść jest idealnie wyśrodkowana na elemencie nadrzędnym, niezależnie od rozmiaru wewnętrznego.
02. Naleśniki w formie dekonstrukcji: 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 z 3 elementami, zwykle z obrazem, tytułem i tekstem opisującym niektóre funkcje produktu. Na urządzeniach mobilnych powinny one dobrze się układać w grupy i rozwijać w miarę zwiększania rozmiaru ekranu.
Zastosowanie tego efektu sprawi, że zapytania o multimedia do dostosowania położenia tych elementów przy zmianie rozmiaru ekranu nie będą konieczne.
Skrót flex oznacza: flex: <flex-grow> <flex-shrink> <flex-basis>.
Z tego powodu, jeśli chcesz, by Twoje pola wypełniały się do rozmiaru <flex-basis>, zmniejsz rozmiar (ale nie rozciągaj), aby wypełnić dodatkowe miejsce, napisz: 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 były rozciągnięte i zapełniały się w następnym wierszu, ustaw <flex-grow> na 1, aby wyglądały 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. Komunikat z paska bocznego: grid-template-columns: minmax(<min>, <max>) …)
Ta wersja demonstracyjna wykorzystuje funkcję minmax w układach siatki. Ustawiam minimalny rozmiar paska bocznego na 150px, ale na większych ekranach pozwoli to rozciągać go do 25%. Pasek boczny będzie zawsze zajmować 25% obszaru poziomie elementu nadrzędnego, dopóki ten element (25%) nie spadnie poniżej 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 często nazywany jest stopką stałą, jest często używany zarówno w witrynach, jak i w aplikacjach, w tym w aplikacjach mobilnych (stopka jest tam zwykle paskiem narzędzi) i w witrynach (aplikacje jednostronicowe często używają tego układu globalnego).
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 treść nagłówka i stopki będzie automatycznie przyjmować rozmiar swoich elementów, a pozostawiona przestrzeń (1fr) zostanie zastosowana w obszarze głównym. Również wiersz o rozmiarze auto będzie przyjmować rozmiar minimalny swoich elementów, więc wraz ze wzrostem rozmiaru treści będzie się rozszerzać, aby dopasować się do nich.
05. Klasyczny Święty Graal: 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 ustawić jednocześnie wiersze i kolumny.
Para właściwości i wartości to: grid-template: auto 1fr auto / auto 1fr auto. Pomiędzy pierwszą i drugą listą rozdzieloną spacjami znajduje się znak slash (/), 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 rozmiar poziomy (szerokość), a nie pionowy (wysokość).
06. Siatka 12-elementowa: grid-template-columns: repeat(12, 1fr)
Kolejna klasyka to siatka 12 spanów. Za pomocą funkcji repeat() możesz szybko tworzyć siatki w CSS. Korzystanie z wartości repeat(12, 1fr); w kolumnach szablonu siatki powoduje 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, 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 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 omówione już koncepcje, aby utworzyć układ elastyczny z automatycznie rozmieszczonymi i elastycznymi elementami podrzędnymi. 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 polu auto-fit rozmiar ramki w poziomie przekracza 150 pikseli i wypełnia 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));
}
8. 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 punktów końcowych.
.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 tej demonstracji ustawiasz szerokość za pomocą ograniczania zakresu w ten sposób: width: clamp(<min>, <actual>, <max>).
Określa bezwzględną i maksymalną wielkość oraz rozmiar rzeczywisty. W przypadku wartości może to wyglądać tak:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Minimalny rozmiar to 23ch lub 23 znaki, a maksymalny to 46ch – 46 znaków. Jednostki szerokości znaków zależą od rozmiaru czcionki elementu (a konkretnie szerokości glifu 0). „Rzeczywisty” rozmiar wynosi 50%, co odpowiada 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). Gdy rozciągam i zmniejszam rozmiar elementu 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ć. Zwiększa to czytelność układu, ponieważ tekst nie będzie zbyt szeroki (powyżej 46ch) ani zbyt ściśnięty i wąski (mniej 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 mieściłby się w zakresie od 1.5rem do 3rem, ale zwiększałby się i zmniejszał na podstawie rzeczywistej wartości 20vw, aby dopasować się do szerokości widocznego obszaru.
To świetny sposób, by zapewnić czytelność przy minimalnych i maksymalnych wartościach rozmiaru. Pamiętaj jednak, że nie jest ona obsługiwana we wszystkich nowoczesnych przeglądarkach, więc upewnij się, że masz funkcje zastępcze, i przetestuj ją.
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. A to po prostu zachowanie proporcji obrazu.
W przypadku właściwości aspect-ratio, gdy zmieniam rozmiar karty, zielony blok wizualny zachowuje format 16 x 9. Przestrzegamy współczynnika proporcji w aplikacji 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 formatem.
.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 zapoznanie się z 10 zaawansowanymi liniami CSS. Aby dowiedzieć się więcej, obejrzyj pełny film i samodzielnie wypróbuj prezentacje.