7 niesamowitych nowych technik CSS na rok 2019
Opublikowany: 2019-05-01To właściwy moment, aby wybrać tworzenie stron internetowych jako opcję kariery. Podobnie jak projektanci stron internetowych, twórcy stron internetowych również zafascynowali się sposobami wypróbowywania nowych technik CSS i przesuwania granic tego, co może zrobić CSS.
Tutaj przyjrzymy się niektórym z nowych technik CSS i całym specyfikacjom, które trafiają do kreatywnych projektów. Możesz kontrolować prawie każdy aspekt projektu za pomocą dobrze opisanego CSS. Ponadto może poprawić ogólne wrażenia użytkownika — dzięki czystszemu i bardziej spójnemu kodowi.
1. List początkowy
Litera początkowa to właściwość CSS, właściwość, która wybiera pierwszą literę elementu i określa liczbę wierszy zajmowanych przez literę. Najczęściej jest używany w mediach drukowanych i serwisach informacyjnych, serwisach informacyjnych, gdzie pierwsza litera akapitu jest znacznie wyższa niż reszta treści.
Właściwość Initial-letter automatycznie dostosowuje zarówno liczbę wierszy potrzebnych do utworzenia stylizowanego inicjału wpuszczanego, jak i rozmiar czcionki. List wstępny zatwierdza następujące wartości:
- <liczba> wskazuje, ile wierszy zajmuje litera, w których wartości ujemne nie są akceptowane;
- normal jest przydatny, jeśli chcesz zresetować wartość, jeśli może być dziedziczona z kaskady i nie ma efektu skalowania zastosowanego do pierwszej litery;
- <liczba całkowita> określa liczbę wierszy, w których powinna zatonąć litera, gdy jej rozmiar jest ustawiony. Wartości muszą być większe od zera, a jeśli wartość nie jest określona, wartość rozmiaru jest duplikowana, obniżana do najbliższej dodatniej liczby całkowitej;
Pseudoelement ::first-letter pseudo-element może służyć do wybierania znaków, które zostaną sformatowane jako początkowe litery. Pseudoelement ::first-letter pseudo-element nie wybiera pierwszej litery elementu, który ma wyświetlanie: inline, ale działa tylko w przypadku elementów, które mają wyświetlaną wartość block, table-cell, table-caption lub list-item .
[xhtml]
<!DOCTYPE html>
<html>
<głowa>
<styl>
P {
rodzina czcionek: szeryfowa;
rozmiar czcionki: 20px;
margines-dolny: -15px;
}
h1 {
rodzina czcionek: bezszeryfowa;
rozmiar czcionki: 3.1em;
kolor czarny;
}
ciało {
wypełnienie: 10px;
}
dziel {
szerokość: 550px;
wysokość linii: 25px;
}
p:pierwszy typu:pierwsza litera {
kolor tła: czarny;
kolor biały;
pływak: lewy;
rozmiar czcionki: 50px;
margines prawy: 10px;
margines górny: 7px;
wypełnienie: 18px;
box-shadow: 0 0 10px -2px czarny;
}
</style>
</head>
<ciało>
<h1>O pierwszej literze</h1>
<div>
<p>Tylko ten, kto poświęca się sprawie całą swoją siłą i duszą, może być prawdziwym mistrzem. Z tego powodu mistrzostwo wymaga całej osoby”.</p>
<p>"Troska o człowieka i jego los musi zawsze być głównym przedmiotem zainteresowania wszystkich przedsięwzięć technicznych. Nigdy nie zapominaj o tym w trakcie tworzenia diagramów i równań"</p>
</div>
</body>
</html>
[/xhtml]
2. Zmienne czcionki
Czcionki zmienne reprezentują nowy zestaw funkcji zdefiniowanych jako część specyfikacji OpenType i pozwalają plikom czcionek zawierać wiele odmian czcionki w jednym pliku, zwanym czcionką zmienną. W praktyce pozwala na dostęp do zmiennych zawartych w pliku czcionki za pomocą tylko jednego odwołania @ font-face. Ponadto czcionki zmienne umożliwiają takie funkcje, jak przenoszenie stylów czcionek, niestandardowe style czcionek i animowanie. Zaletą korzystania z czcionki zmiennej jest to, że masz dostęp do pełnego zakresu dostępnych stylów, grubości i szerokości.
Czcionki zmienne definiują swoje wariacje poprzez osie wariacji i istnieje 5 standardowych osi:
- ital: oś kursywa działa inaczej, ponieważ jest włączona lub wyłączona, nie ma pomiędzy. Wartość można ustawić za pomocą właściwości CSS font-style. Ponadto wprowadzenie syntezy czcionek: none zapobiegnie przypadkowemu zastosowaniu przez przeglądarki osi wariacji i zsyntetyzowanej kursywy.
- wght: kontroluje wagę czcionki, a wartość można ustawić za pomocą właściwości CSS font-weight.
- wdth: kontroluje szerokość czcionki, a wartość można ustawić za pomocą właściwości CSS font-width. W CSS używając właściwości font-stretch, możemy ustawić szerokość czcionki za pomocą wartości procentowych, a jeśli podamy wartość, która jest poza czcionką- zakodowanej domeny, przeglądarka tworzy czcionkę o najbliższej dozwolonej wartości.
- opsz: optyczny rozmiar odnosi się do praktyki zmiany optycznego rozmiaru czcionki, a wartość można ustawić za pomocą CSS font-optical-sizing.Wartości rozmiaru optycznego są stosowane automatycznie w zależności od rozmiaru czcionki, ale można nimi manipulować za pomocą wariantu czcionki -settings.W przypadku korzystania z opcji optycznego określania rozmiaru czcionki, dozwolone wartości to auto lub brak, a w przypadku korzystania z ustawień wariacji czcionki podawana jest wartość numeryczna.
- slnt: kontroluje nachylenie czcionki, a wartość można ustawić za pomocą właściwości CSS font-style. Jest zmienna, wyrażona jako zakres liczbowy, a to pozwala na zmianę czcionki w dowolnym miejscu wzdłuż tej osi.
Korzystanie z czcionek zmiennych z @font-face – w przypadku korzystania z czcionek zmiennych w Internecie wiąże się to z określeniem reguł @font-face, które wskazują pliki czcionek zmiennych.Oto 2 linki, które pozwalają znaleźć czcionki zmienne: axis-praxis.org i v -fonts.com.
[xhtml]
<!DOCTYPE html>
<html>
<głowa>
<title>O czcionkach zmiennych</title>
</head>
<styl>
@font-face {
rodzina czcionek: 'Avenir Next Variable';
źródło: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
rodzina czcionek: 'Avenir Next Variable', bezszeryfowa;
}
P {
ustawienia-wariacji czcionek: 'wght' 630, 'wdth' 88;
}
</style>
<ciało>
<h1>O czcionkach zmiennych</h1>
<h2>O czcionkach zmiennych</h2>
<p>
„Każdy inteligentny głupiec może sprawić, że sprawy staną się większe i bardziej złożone… Potrzeba odrobiny geniuszu – i dużo odwagi, by ruszyć w przeciwnym kierunku”.
</p>
</body>
</html>
[/xhtml]
3. Logiczne właściwości i wartości
Logiczne właściwości i wartości to moduł CSS, który wprowadza logiczne właściwości i wartości, które umożliwiają sterowanie wyglądem poprzez logiczne kierunki i odwzorowania wymiarów. Logiczne właściwości i wartości używają terminów takich jak blok i inline, aby opisać kierunek, w którym przepływają. Specyfikacja właściwości i wartości logicznych charakteryzuje odwzorowania wartości fizycznych w ich relacjach logicznych.
Wymiar śródliniowy – jest wymiarem, wzdłuż którego pisana jest linia tekstu użytym rodzajem pisma. Tak więc w losowym dokumencie angielskim tekst jest poziomy, od lewej do prawej, w innym dokumencie arabskim pismo jest również poziome, ale od prawej do lewej, a jeśli weźmiemy pod uwagę dokument japoński, wymiar wbudowany jest teraz pionowy, ponieważ tryb pisania działa w pionie.
Wymiar bloku – odpowiada kolejności, w jakiej bloki są wyświetlane na stronie. W języku angielskim i arabskim są one wykonywane pionowo, podczas gdy w dowolnym trybie pisma pionowego są wykonywane poziomo.
[xhtml]
<!DOCTYPE html>
<html>
<głowa>
<styl>
html {
czcionka: 20px bezszeryfowa;
}
ciało {
wypełnienie: 25px;
kolor tła: jasnożółty;
kolor czarny;
}
.skrzynka {
obramowanie: 4px jednolita czerń;
promień obramowania: 20px;
wypełnienie: 20px;
margines: 12px;
}
.jeden {
rozmiar bloku: 100px;
rozmiar wbudowany: 200px;
}
.dwa {
wysokość: 100px;
szerokość: 200px;
}
</style>
</head>
<ciało>
</div>
<div id="kontener">
<div class="box one">
Mój rozmiar bloku to 100 pikseli, mój rozmiar wbudowany 200 pikseli.
</div>
<div class="pudełko drugie">
Moja wysokość to 100 pikseli, moja szerokość 200px.
</div>
</div>
</body>
</html>
[/xhtml]
4. Przyciąganie przewijania
Właściwość CSS typu scroll-snap określa sztywność, z jaką punkty załączników są stosowane do kontenera przewijania. Innymi słowy, blokuje okno do określonych elementów lub lokalizacji po zakończeniu przewijania przez użytkownika. Jest to doskonały sposób na wyświetlanie galerii obrazów .Wcześniej mógł być używany z JavaScript, ale dzięki nowemu modułowi CSS Scroll Snap, efekt można kontrolować w CSS.Scroll snapping odbywa się poprzez zdefiniowanie elementu nadrzędnego / kontenera i dzieci w kontenerze, które będą przyciągane zgodnie z reguły zdefiniowane we właściwości container.Scroll-snap-type jest najważniejszą właściwością odnoszącą się do elementu kontenera. Definiuje oś przyciągania przewijania x, y, blok, w wierszu lub obie i ścisłość przyciągania przewijania brak, bliskość lub obowiązkowa.
[xhtml]
<!DOCTYPE html>
<html>
<głowa>
<styl>
html, treść, .C {
wzrost: 50%;
}
.C {
wyświetlacz: elastyczny;
wyrównaj-elementy: środek;
uzasadnienie-treść: spacja-pomiędzy;
flex-flow: kolumna nowrap;
rodzina czcionek: arial;
}
.pojemnik {
wyświetlacz: elastyczny;
elastyczność: brak;
przepełnienie: auto
}
.kontener.x {
szerokość: 70%;
wysokość: 150px;
flex-flow: row nowrap;
}
.kontener.y {
szerokość: 256px;
wysokość: 256px;
flex-flow: kolumna nowrap;
}
.y.obowiązkowe-przewijanie-przewijanie {
scroll-snap-type: y obowiązkowe;
}
.x.przewijanie zbliżeniowe {
scroll-snap-type: x bliskość;
}
.kontener > div {
wyrównanie tekstu: środek;
scroll-snap-align: środek;
elastyczność: brak;
}
.x.kontener> div {
wysokość linii: 128px;
rozmiar czcionki: 64px;
szerokość: 100%;
wysokość: 128px;
}
.y.kontener> div {
wysokość linii: 256px;
rozmiar czcionki: 128px;
szerokość: 256px;
wysokość: 256px;
}
.y.kontener>dział:{
wysokość linii: 1,4;
rozmiar czcionki: 80px;
}
.kontener >dział:{
kolor tła: biały;
}
.kontener >dział:{
kolor tła: biały;
}
</style>
</head>
<ciało>
<div class=".C">
<div class="kontener x obowiązkowe-przewijanie-przyciąganie" dir="ltr">
<div>Przyciąganie przewijania</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="kontener i obowiązkowe przewijanie" dir="ltr">
<div>Informacje o przyciąganiu Scropp</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
[/xhtml]
5. Siatka poziomu 2 i podsiatka
Specyfikacja poziomu 2 zawiera wszystko z poziomu 1 i kilka nowych funkcji. Poziom 2 specyfikacji siatki tworzy funkcję subgrid CSS Grid. W kolejnych wierszach przyjrzymy się funkcji subgrid, tak jak jest ona obecnie szczegółowo opisana w szkicu edytora Grid Level 2. Tak więc możesz tworzyć siatki, korzystając z Opcja układu siatki, element siatki można przekształcić w kontener siatki, ustawiając na nim wyświetlanie: siatka. W poniższym przykładzie mam element, który zawiera 3 ścieżki kolumn siatki, jest to siatka kontenera z 3 ścieżkami kolumn i nie pokrywają się one ze śladami rodzica.
[xhtml]
<!DOCTYPE html>
<html>
<głowa>
<title>CSS Grid Level 2 – podsiatka</title>
</head>
<styl>
ciało {
margines: 20px;
}
.jeden {
kolor tła: czarny;
kolor biały;
promień obramowania: 20px;
wypełnienie: 20px;
rozmiar czcionki: 120%;
}
.jeden {
kolor tła: jasnoszary;
}
.KRATA {
wyświetlacz: siatka;
odstęp siatki: 10px;
kolumny szablonu siatki: 3fr 1,5fr 2fr 1fr 1fr 2fr;
kolor tła: biały;
kolor czarny;
margines: 1,5em 0;
}
.A {
wypełnienie: 0;
odstęp siatki: 15px;
kolumna siatki: auto / span 4;
wyświetlacz: siatka;
kolumny szablonu siatki: 3 fr 1,5 fr 1,5 fr;
}
</style>
<ciało>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="jeden A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</body>
</html>
[/xhtml]
Będąc projektem open source, możesz zobaczyć na GitHub, jak rozwija się praca w grupie CSS. Opracowanie specyfikacji i implementacja przeglądarki to proces okrężny. Możesz więc obserwować, jak postępuje ta funkcja podsiatki i pojawiające się implementacje przeglądarek.
6. Użyj CSS do testowania obsługi przeglądarek
CSS opracował sposób testowania obsługi nowych funkcji przez przeglądarki. Zasadniczo zadaj pytanie, aby dowiedzieć się, czy przeglądarka akceptuje określoną funkcję CSS. W ten sposób nowe funkcje są używane w bezpieczny i zwięzły sposób.Kiedy korzystasz z jakiejkolwiek nowej funkcji CSS, musisz sprawdzić, czy przeglądarka obsługuje tę funkcję.W tym wierszu zaleca się zapoznanie się z danymi na caniuse.com, gdzie możesz zaimportować dane dla swojej lokalizacji.
@supports CSS pozwala określić deklaracje, które zależą od obsługi funkcji CSS przez przeglądarkę, co nazywa się zapytaniem funkcji. Ta reguła może być zapisana na początku kodu lub może być zagnieżdżona w dowolnej innej warunkowej regule grupy.
[css]
@ obsługuje (wyświetlacz: siatka) {
dziel {
wyświetlacz: siatka;
}
}
[/css]
7. Ulepszenia składni zapytań o media – poziom 4
Specyfikacja Media Queries Level 4 zawiera pewne ulepszenia składni umożliwiające tworzenie zapytań o media przy użyciu funkcji o typie zakresu, takim jak wysokość i szerokość.
Dla przykładu używamy max-funkcjonalności dla szerokości
[css]
@media (maksymalna szerokość: 20em)
[/css]
Możemy wypróbować szerokość między dwiema losowymi wartościami za pomocą min- i max-
[css]
@media (minimalna szerokość: 20em) i (maksymalna szerokość: 35em)
[/css]
Dla lepszego zrozumienia w powyższym przykładzie chcemy powiedzieć, że szerokość jest większa lub równa 20em i mniejsza lub równa 35em
Wniosek
Twórcy stron internetowych powinni być świadomi wszelkich nowych technik CSS i stosować je w przyszłych projektach. Podniosą standardy pracy, a klienci będą zadowoleni z ulepszonego wyglądu strony internetowej.