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 powyższej prezentacji oraz w kolejnych postach omówimy 10 zaawansowanych linii CSS, które wykonują poważną pracę.
Aby sprawdzić działanie wersji demonstracyjnej lub wypróbować je samodzielnie, zapoznaj się z opisem umieszczonego powyżej lub wejdź na stronę 1linelayouts.glitch.me.
01. Superwyśrodkowany: place-items: center
W przypadku pierwszego układu jednowierszowego musimy rozwiązać największą zagadkę na świecie CSS: ukierunkowanie na różne elementy. Pamiętaj, że z place-items: center jest to łatwiejsze, niż Ci się wydaje.
Najpierw określ grid jako metodę display, a następnie zapisz place-items: center w tym samym elemencie. place-items to skrót umożliwiający ustawienie jednocześnie align-items i justify-items. Jeśli ustawisz wartość center, 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 jest zdekonstruowany naleśnik. Jest to typowy układ np. w przypadku witryn marketingowych, który może zawierać rząd 3 elementów, zwykle ze zdjęciem, tytułem i tekstem opisującym niektóre cechy produktu. W przypadku urządzeń mobilnych chcemy, aby te elementy dobrze się komponowały i rozwinęły 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> ma wartość 150px, więc wygląda to tak:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Jeśli chcesz, aby pola były rozciągane i wypełniały przestrzeń w miarę zawijania się do następnego wiersza, ustaw wartość <flex-grow> na 1, aby wyglądały one tak:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Teraz, gdy zwiększasz lub zmniejszasz rozmiar ekranu, te elastyczne elementy zmniejszają się i wzrastają.
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 ten element jako wartość szablonów siatki-kolumny z następującą wartością: minmax(150px, 25%) 1fr. Element w pierwszej kolumnie (w tym przypadku na pasku bocznym) ma wartość minmax wynoszącą 150px w miejscu 25%, a drugi element (sekcja main tutaj) zajmuje resztę miejsca jako pojedynczą ścieżkę 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 pliku z naleśnikami zdekonstruowanymi w tym przykładzie ten przykład nie zawija elementów podrzędnych po zmianie rozmiaru ekranu. Ten układ, nazywany przyklejoną stopką, jest często stosowany zarówno w przypadku witryn i aplikacji, w aplikacjach mobilnych (stopka to zwykle pasek narzędzi) oraz na stronach internetowych (aplikacje na jednej stronie często używają tego układu globalnego).
Jeśli dodasz do komponentu element display: grid, uzyskasz siatkę z jedną kolumną, ale główny obszar będzie tak wysoki jak treść, a pod nim stopka.
Aby stopka przyklejała się u dołu, dodaj:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Spowoduje to, że treść nagłówka i stopki automatycznie przyjmie rozmiar elementów podrzędnych, a pozostała część (1fr) zostanie zastosowana do obszaru głównego. Wiersz o rozmiarze auto zajmie minimalną zawartość elementów podrzędnych. Dzięki temu, gdy treść się powiększy, sam wiersz będzie się dostosowywał.
5. Klasyczny Święty Graal: grid-template: auto 1fr auto / auto 1fr auto
W tym klasycznym układzie świętego Graala są nagłówek, stopka, lewy pasek boczny, prawy pasek boczny i zawartość główna. 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ć jednocześnie wiersze i kolumny.
Para właściwości i wartości to: grid-template: auto 1fr auto / auto 1fr auto. Ukośnik między pierwszą i drugą listą rozdzielaną 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 nagłówek i stopka zawierają treści o automatycznym rozmiarze, rozmiar lewego i prawego paska bocznego jest automatycznie dostosowywany na podstawie rozmiaru wrodzonego dziecka. Tym razem jest to rozmiar poziomy (szerokość), a nie pionowa (wysokość).
6. Siatka 12-spanów: grid-template-columns: repeat(12, 1fr)
Kolejna klasyka to siatka 12 spanów. Możesz szybko pisać siatki w CSS za pomocą funkcji repeat(). Jeśli użyjesz w szablonie siatki opcji repeat(12, 1fr);, otrzymasz po 12 kolumn na każdą z tych wartości 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Mając 12-kolumnową siatkę ścieżek, możemy umieścić w niej elementy podrzędne. Jednym ze sposobów może być umieszczenie ich za pomocą linii siatki. Na przykład dyrektywa grid-column: 1 / 13 obejmuje cały wiersz od pierwszego do ostatniego (13) i obejmuje 12 kolumn. grid-column: 1 / 5; obejmie pierwsze cztery.
Innym sposobem jest użycie słowa kluczowego span. W span ustawiasz linię początkową i liczbę kolumn, które mają zostać uwzględnione w danym punkcie początkowym. W tym przypadku grid-column: 1 / span 12 będzie równoważne parametrowi grid-column: 1 / 13, a grid-column: 2 / span 6 – grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
7. RAM (powtarzanie, automatyczne, 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. Dobrze. Najważniejsze terminy do zapamiętania to repeat, auto-(fit|fill) i minmax()'. Zapamiętaj je jako „RAM”.
Łącznie wygląda to tak:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Ponownie stosujesz powtarzanie, ale tym razem używasz słowa kluczowego auto-fit zamiast bezpośredniej wartości liczbowej. Umożliwi to automatyczne umieszczanie tych elementów podrzędnych. Te podrzędne mają też podstawową wartość 150px o maksymalnej wartości 1fr. Oznacza to, że na mniejszych ekranach zajmują całą szerokość 1fr, a gdy osiągną szerokość 150px, zaczną wypływać w tej samej linii.
W polu auto-fit rozmiar ramki w poziomie przekracza 150 pikseli i wypełnia całą pozostałą przestrzeń. Jeśli jednak zmienisz tę wartość na auto-fill, reklamy nie będą rozciągane po przekroczeniu rozmiaru podstawowego 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 głównym punktem do zademonstrowania jest schemat justify-content: space-between, w którym pierwszy i ostatni element podrzędny umieszcza się na krawędziach ramki ograniczającej. Pozostała część miejsca jest równomiernie rozmieszczona między elementami. W przypadku tych kart są one wyświetlane w trybie wyświetlania Flexbox, a kierunek ustawiony na kolumnę jest ustawiony na kolumnę flex-direction: column.
Spowoduje to umieszczenie bloku tytułu, opisu i obrazów w pionowej kolumnie na karcie nadrzędnej. Następnie zastosowanie polecenia justify-content: space-between powoduje zakotwiczenie pierwszego i ostatniego elementu (tytułu) i ostatniego (bloku obrazów) do krawędzi arkusza Flexbox. Opisy między nimi są umieszczane z równymi odstępami między punktami końcowymi.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
9. Zakotwiczenie w moim stylu: clamp(<min>, <actual>, <max>)
Dowiadujemy się teraz o kilku technikach, które mają mniej niż obsługę przeglądarek, ale mają też naprawdę fascynujący wpływ na układy i elastyczne projektowanie interfejsów. 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. Z wartościami mogą one 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 elementowi zachowanie szerokości 50%, dopóki 50% będzie większe niż 46ch (w szerszych widocznych obszarach) lub mniejsze niż 23ch (w mniejszych). Jak widać, gdy rozciągam i zmniejszam rozmiar elementu nadrzędnego, szerokość tej karty zwiększa się do maksymalnego ustawionego punktu, a potem maleje do minimalnego limitu. Pozostanie wyśrodkowana na elemencie nadrzędnym, ponieważ zastosowano do niego dodatkowe właściwości. 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).
Jest to również świetny sposób na wdrożenie typografii responsywnej. Możesz na przykład napisać: font-size: clamp(1.5rem, 20vw, 3rem). W takim przypadku rozmiar czcionki nagłówka będzie zawsze ograniczony od 1.5rem do 3rem, a będzie się powiększać lub zmniejszać na podstawie rzeczywistej wartości 20vw, by 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 aspektu: aspect-ratio: <width> / <height>
Ostatnie z tych narzędzi jest najbardziej eksperymentalnym narzędziem. Niedawno została ona wprowadzona w Chrome Canary w Chromium 84. Firefoksa pracuje nad jej wdrożeniem, ale obecnie nie jest ona dostępna w żadnej stabilnej wersji przeglądarki.
Chcę jednak o tym wspomnieć, bo to bardzo często spotykany problem. A to po prostu zachowanie proporcji obrazu.
Dzięki właściwości aspect-ratio podczas zmiany rozmiaru karty zielony blok wizualny zachowuje współczynnik proporcji 16 x 9. Przestrzegamy współczynnika proporcji w aplikacji aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Aby zachować współczynnik proporcji 16 x 9 bez tej właściwości, musisz skorzystać z metody padding-top hacka, dodając dopełnienie 56.25% w celu ustawienia współczynnika proporcji górnej do szerokości. Wkrótce udostępnimy usługę, która pozwoli uniknąć ataku hakerskiego i obliczać wartość procentową. Możesz utworzyć kwadrat o współczynniku proporcji 1 / 1 i współczynniku 2:1 (2 / 1) oraz właściwie wszystko, co jest potrzebne, aby obraz skalował się z określonym współczynnikiem.
.square {
aspect-ratio: 1 / 1;
}
Choć ta funkcja jest wciąż w fazie rozwoju, warto się jej przyjrzeć, bo rozwiązuje wiele problemów programistów, z którymi borykam się wiele razy, zwłaszcza w odniesieniu do wideo i elementów 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.