7 noi tehnici CSS uimitoare pentru 2019
Publicat: 2019-05-01Acesta este momentul potrivit pentru a alege dezvoltarea web ca opțiune de carieră. La fel ca designerii web, dezvoltatorii web au fost, de asemenea, fascinați de modalități de a încerca noi tehnici CSS și de a depăși limitele a ceea ce poate face CSS.
Aici, vom arunca o privire asupra unora dintre noile tehnici CSS și specificații întregi care își fac loc în design-uri creative. Puteți controla aproape orice aspect al unui design printr-un CSS bine descris. De asemenea, poate îmbunătăți experiența generală a utilizatorului, cu un cod mai curat și mai consistent.
1. Scrisoarea inițială
Litera inițială este o proprietate CSS, proprietate care selectează prima literă a elementului și specifică numărul de linii ocupate de literă. Cel mai adesea este folosit în presa scrisă și site-uri de informare, site-uri de știri, unde prima literă a paragrafului este cu mult mai mare decât restul conținutului.
Proprietatea literei inițiale ajustează automat atât numărul de linii necesare pentru a crea capacul stilizat, cât și dimensiunea fontului. Scrisoarea inițială aprobă următoarele valori:
- <număr> se referă la câte rânduri ocupă litera în care nu sunt acceptate valori negative;
- normal este util dacă doriți să resetați valoarea dacă ar putea fi moștenită din cascadă și nici un efect de scalare aplicat primei litere;
- <integer> determină numărul de linii în care litera ar trebui să se scufunde atunci când dimensiunea ei este prestabilită. Valorile trebuie să fie mai mari decât zero, iar dacă valoarea nu este specificată, valoarea mărimii este duplicată, împărțită la cel mai apropiat număr întreg pozitiv;
::first-letter pseudo-element poate fi folosit pentru a selecta caractere care vor fi formatate ca litere inițiale. ::first-letter pseudo-element nu selectează prima literă a elementului care are afișajul: inline, ci funcționează numai pe elementele care au o valoare de afișare de bloc, celulă-tabel, legendă-tabel sau element-listă .
[xhtml]
<!DOCTYPE html>
<html>
<cap>
<stil>
p {
familie de fonturi: Serif;
dimensiunea fontului: 20px;
margine-jos: -15px;
}
h1 {
familie de fonturi: Sans-serif;
dimensiunea fontului: 3.1em;
culoarea neagra;
}
corp {
umplutură: 10px;
}
div {
latime: 550px;
înălțimea liniei: 25px;
}
p:first-of-type:prima-litera {
culoare de fundal: negru;
culoare albă;
plutește la stânga;
dimensiunea fontului: 50px;
margine-dreapta: 10px;
margine-sus: 7px;
umplutură: 18px;
box-shadow: 0 0 10px -2px negru;
}
</stil>
</cap>
<corp>
<h1>Despre litera inițială</h1>
<div>
<p>Numai cel care se dedică unei cauze cu toată puterea și sufletul său poate fi un adevărat maestru. Din acest motiv, stăpânirea cere totul de la o persoană”</p>
<p>„Preocuparea pentru om și soarta lui trebuie să constituie întotdeauna interesul principal al tuturor eforturilor tehnice. Nu uita niciodată acest lucru în mijlocul diagramelor și ecuației tale”</p>
</div>
</corp>
</html>
[/xhtml]
2. Fonturi variabile
Fonturile variabile reprezintă un nou set de caracteristici definite ca parte a specificației OpenType și permit fișierelor cu fonturi să conțină mai multe variații ale unui font într-un singur fișier, numit font variabil. În practică, vă permite să accesați variabilele conținute în fișierul fontului cu o singură referință @ font-face. De asemenea, fonturile variabile permit funcții precum tranziția stilurilor de font, stilurile personalizate de font și animarea. Avantajul utilizării fontului variabil este că aveți acces la întreaga gamă de stiluri, greutăți și lățimi disponibile.
Fonturile variabile își definesc variațiile prin axe de variație și există 5 axe standard:
- ital: axa italic funcționează diferit deoarece este activată sau dezactivată, nu există niciun mijloc. Valoarea poate fi setată folosind proprietatea CSS tip font. De asemenea, prin introducerea font-synthesis: none, va împiedica browserele să aplice accidental axa de variație și un italic sintetizat.
- wght: controlează greutatea fontului, iar valoarea poate fi setată folosind proprietatea CSS font-weight.
- wdth: controlează lățimea fontului, iar valoarea poate fi setată folosind proprietatea CSS font-width. În CSS folosind proprietatea font-stretch, putem seta lățimea fontului cu valori procentuale și dacă furnizăm o valoare care este în afara fontului- domeniu codificat, browserul face fontul la cea mai apropiată valoare permisă.
- opsz: dimensionarea optică se referă la practica de a schimba dimensiunea optică a fontului, iar valoarea poate fi setată folosind CSS font-optical-sizing. Valorile dimensiunii optice sunt aplicate automat în funcție de dimensiunea fontului, dar pot fi manipulate folosind varianta font -settings.La utilizarea font-optical-sizing, valorile admise sunt auto sau none, iar la utilizarea font-variation-settings, este furnizată o valoare numerică.
- slnt: controlează înclinarea fontului, iar valoarea poate fi setată utilizând proprietatea CSS în stil font. Este variabilă prin exprimarea unui interval numeric, iar acest lucru permite ca fontul să fie variat oriunde de-a lungul acelei axe.
Folosirea fonturilor variabile cu @font-face – atunci când folosiți fonturi variabile pe web, aceasta implică definirea regulilor @ font-face care indică fișiere cu fonturi variabile. Iată 2 link-uri care vă permit să găsiți fonturi variabile: axis-praxis.org și v -fonts.com.
[xhtml]
<!DOCTYPE html>
<html>
<cap>
<title>Despre fonturile variabile</title>
</cap>
<stil>
@font-face {
font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
font-family: 'Avenir Next Variable', sans-serif;
}
p {
setări pentru variația fontului: „wght” 630, „wdth” 88;
}
</stil>
<corp>
<h1>Despre fonturile variabile</h1>
<h2>Despre fonturile variabile</h2>
<p>
„Orice prost inteligent poate face lucrurile mai mari și mai complexe... Este nevoie de un strop de geniu – și mult curaj pentru a merge în direcția opusă.”
</p>
</corp>
</html>
[/xhtml]
3. Proprietăți și valori logice
Proprietăți și valori logice este un modul CSS care introduce proprietăți și valori logice care fac posibilă controlul aspectului prin direcții logice și mapări de dimensiuni. Proprietățile și valorile logice folosesc termeni precum bloc și inline pentru a descrie direcția în care curg. Specificația proprietăți și valori logice caracterizează mapările pentru valorile fizice în relațiile lor logice.
Dimensiunea inline – este dimensiunea de-a lungul căreia este scrisă o linie de text în tipul de scriere utilizat. Deci, într-un document aleatoriu englezesc, textul este orizontal, de la stânga la dreapta, într-un alt document arab, scrierea este tot orizontală, dar de la dreapta la stânga și dacă luăm în considerare un document japonez, dimensiunea inline este acum verticală deoarece modul de scriere rulează pe verticală.
Dimensiunea blocului – corespunde ordinii în care sunt afișate blocurile pe pagină. În engleză și arabă sunt executate pe verticală, în timp ce în orice mod de scriere verticală sunt executate pe orizontală.
[xhtml]
<!DOCTYPE html>
<html>
<cap>
<stil>
html {
font: 20px Sans-serif;
}
corp {
umplutură: 25px;
culoare de fundal: galben deschis;
culoarea neagra;
}
.cutie {
chenar: 4px negru solid;
chenar-rază: 20px;
umplutură: 20px;
marginea: 12px;
}
.unu {
dimensiune bloc: 100px;
dimensiune inline: 200px;
}
.Două {
înălțime: 100px;
lățime: 200px;
}
</stil>
</cap>
<corp>
</div>
<div id="container">
<div class="box one">
Dimensiunea blocului meu este de 100 de pixeli, dimensiunea mea inline de 200 de pixeli.
</div>
<div class="box two">
Înălțimea mea este de 100 de pixeli, lățimea mea de 200 de pixeli.
</div>
</div>
</corp>
</html>
[/xhtml]
4. Derulați Snapping
Proprietatea CSS de tip scroll-snap determină rigiditatea cu care punctele de atașare sunt aplicate containerului de defilare. Cu alte cuvinte, blochează fereastra de vizualizare în anumite elemente sau locații după ce utilizatorul a terminat defilarea. Este o modalitate excelentă de a afișa galerii de imagini .Anterior, acesta putea fi folosit cu JavaScript, dar datorită noului modul CSS Scroll Snap, efectul poate fi controlat în CSS. Scroll snapping se face prin definirea elementului părinte/container și a copiilor din container care se vor fixa în funcție de regulile definite în cadrul containerului. Proprietatea Scroll-snap-type este cea mai importantă proprietate care se aplică elementului container.Definește axa x, y, bloc, inline sau ambele și strictețea defilare snap nici una, proximitate sau obligatorie.
[xhtml]
<!DOCTYPE html>
<html>
<cap>
<stil>
html, body, .C {
inaltime: 50%;
}
.C {
display: flex;
alinierea elementelor: centru;
justificare-conținut: spațiu-între;
flex-flow: coloană nowrap;
familie de fonturi: arial;
}
.container {
display: flex;
flex: niciunul;
preaplin: automat
}
.container.x {
latime: 70%;
înălțime: 150px;
flex-flow: row nowrap;
}
.container.y {
lățime: 256px;
înălțime: 256px;
flex-flow: coloană nowrap;
}
.y.obligatoriu-scroll-snapping {
scroll-snap-type: y obligatoriu;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximitate;
}
.container > div {
text-align: centru;
scroll-snap-align: centru;
flex: niciunul;
}
.x.container> div {
înălțimea liniei: 128px;
dimensiunea fontului: 64px;
latime: 100%;
înălțime: 128px;
}
.y.container> div {
înălțimea liniei: 256px;
dimensiunea fontului: 128px;
lățime: 256px;
înălțime: 256px;
}
.y.container>div:{
înălțimea liniei: 1,4;
dimensiunea fontului: 80px;
}
.container >div:{
culoare de fundal: alb;
}
.container >div:{
culoare de fundal: alb;
}
</stil>
</cap>
<corp>
<div class=".C">
<div class="container x obligatorie-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>Despre Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</corp>
</html>
[/xhtml]
5. Grid Level 2 și Subgrid
Specificația de nivel 2 conține totul în Nivelul 1 și câteva funcții noi. Nivelul 2 al specificației grilei creează caracteristica subgrilă a CSS Grid. În rândurile următoare, ne vom uita la caracteristica subgrilă așa cum este detaliată în prezent în Schița editorului de Grid Nivelul 2. Deci, puteți face grile atunci când utilizați Opțiunea de aranjare a grilei, un element de grilă poate fi transformat într-un container grilă prin setarea afișajului: grilă pe el. În exemplul de mai jos, am un articol care include 3 piste coloane ale grilei, este o grilă container cu 3 piste coloane și acestea nu se aliniază cu urmele părintelui.
[xhtml]
<!DOCTYPE html>
<html>
<cap>
<title>CSS Grid Level 2 – subgrid</title>
</cap>
<stil>
corp {
marja: 20px;
}
.unu {
culoare de fundal: negru;
culoare albă;
chenar-rază: 20px;
umplutură: 20px;
dimensiunea fontului: 120%;
}
.Unul {
culoare de fundal: gri deschis;
}
.GRILĂ {
afisare: grila;
grid-gap: 10px;
grid-template-coloane: 3fr 1.5fr 2fr 1fr 1fr 2fr;
culoare de fundal: alb;
culoarea neagra;
marja: 1,5em 0;
}
.A {
umplutură: 0;
grid-gap: 15px;
grilă-coloană: auto / span 4;
afisare: grila;
grid-template-coloane: 3fr 1.5fr 1.5fr;
}
</stil>
<corp>
<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="one 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>
</corp>
</html>
[/xhtml]
Fiind un proiect open source, puteți vedea pe GitHub cum evoluează munca în grupul CSS. Dezvoltarea specificațiilor browserului și implementarea este un proces circular. Deci, puteți urmări cum progresează această caracteristică subgrid și implementările emergente ale browserului.
6. Utilizați CSS pentru a testa suportul pentru browser
CSS a dezvoltat o modalitate de a testa compatibilitatea browserului pentru funcții noi. Practic, puneți o întrebare pentru a afla dacă browserul acceptă o anumită caracteristică CSS. În acest fel, noile funcții sunt utilizate într-un mod sigur și concis. Când utilizați orice caracteristică CSS nouă, trebuie să verificați dacă browserul acceptă această caracteristică. Pe această linie, este recomandat să consultați datele de pe caniuse.com, unde puteți importa datele pentru locația dvs.
@supports CSS vă permite să specificați declarații care depind de suportul browserului pentru caracteristicile CSS, aceasta fiind numită interogare de caracteristică. Această regulă poate fi scrisă în partea de sus a codului sau poate fi imbricată în orice alt grup condiționat la regulă.
[css]
@supports (afișare: grilă) {
div {
afisare: grila;
}
}
[/css]
7. Îmbunătățiri de sintaxă pentru interogări media – Nivelul 4
Specificația Media Queries Level 4 conține unele îmbunătățiri ale sintaxei pentru a face interogări media folosind funcții care au un tip de interval, cum ar fi înălțimea și lățimea.
Pentru a exemplifica, folosim funcționalitatea maximă pentru lățime
[css]
@media (lățime maximă: 20 em)
[/css]
Putem încerca o lățime între două valori aleatorii folosind min- și max-
[css]
@media (lățime minimă: 20 em) și (lățime maximă: 35 em)
[/css]
Pentru o mai bună înțelegere, în exemplul de mai sus dorim să spunem că lățimea este mai mare sau egală cu 20em și mai mică sau egală cu 35em
Concluzie
Dezvoltatorii de site-uri web ar trebui să fie conștienți de orice noi tehnici CSS și să le aplice în proiecte viitoare. Își vor ridica standardele de lucru, iar clienții vor fi mulțumiți de aspectul îmbunătățit al site-ului.