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
Dla pierwszego wiersza , czyli najważniejsza zagadka,
którą można dostrzec na rynku CSS: ukierunkowanie. 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 o następującej 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 obejmie wszystkie kolumny od pierwszego do ostatniego (13) i obejmie 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). „Rzeczywiste” rozmiar to 50%, co stanowi 50% szerokości elementu nadrzędnego.
Funkcja clamp() umożliwia zachowywanie tego elementu 50% szerokości do czasu 50% wartości większej niż 46ch (w szerszych widocznych obszarach) lub mniejszej 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 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%, aby ustawić współczynnik proporcji góry 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.