7 noi tehnici CSS uimitoare pentru 2019

Publicat: 2019-05-01

Acesta 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șarea: inline, ci funcționează numai pe elementele care au o valoare de afișare de bloc, celulă-tabel, legendă-tabel sau element-listă .

<!DOCTYPE html>
<html>
<head>
<style>
p {
 font-family: Serif;
 font-size: 20px;
 margin-bottom: -15px;
}
h1 {
 font-family: Sans-serif;
 font-size: 3.1em;
 color: black;
}
body {
 padding: 10px;
}
div {
 width: 550px;
 line-height: 25px;
}
p:first-of-type:first-letter {
 background-color: black;
 color: white;
 float: left;
 font-size: 50px;
 margin-right: 10px;
 margin-top: 7px;
 padding: 18px;
 box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>

Initial letter

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: optical sizing se referă la practica de a schimba dimensiunea optică a fontului, iar valoarea poate fi setată folosind CSS font-optical-sizing. Valorile de dimensiune optică sunt aplicate automat în funcție de dimensiunea fontului, dar pot fi manipulate folosind font-variation -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ă folosind proprietatea CSS de tip 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 utilizaț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.

<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@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 {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
	"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>

Variablefonts

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țiile de 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ă.

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font: 20px Sans-serif;
}
body {
  padding: 25px;
  background-color: lightyellow;
  color: black;
}
.box {
  border: 4px solid black;
  border-radius: 20px;
  padding: 20px;
  margin: 12px;
}
.one {
  block-size: 100px;
  inline-size: 200px;
}
.two {
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
  My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
  My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>

Logical properties and values

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, putea fi folosit cu JavaScript, dar datorită noului modul CSS Scroll Snap, efectul poate fi controlat în CSS. Scroll snapping se realizează 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.

<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
  height: 50%;
}
.C {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: arial;
}
.container {
  display: flex;
  flex: none;
  overflow: auto
}
.container.x {
  width: 70%;
  height: 150px;
  flex-flow: row nowrap;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
.x.container> div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container> div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
.y.container>div:{
  line-height: 1.4;
  font-size: 80px;
}
.container >div:{
  background-color: white;
}
.container >div:{
  background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-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>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>

Scroll snapping

5. Grid Level 2 și Subgrid

Specificația de nivel 2 conține totul în Nivelul 1 și câteva caracteristici 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.

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
  margin: 20px;
}
.one {
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
}
.A .one {
  background-color: lightgrey;
}
.GRID {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
  background-color: white;
  color: black;
  margin: 1.5em 0;
}
.A {
  padding: 0;
  grid-gap: 15px;
  grid-column: auto / span 4;
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<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>
</body>
</html>

Grid level 2 and subgrid

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. Așadar, puteți urmări cum progresează această funcție subgrilă ș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.

Use CSS to test browser support

@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ă.

@supports (display: grid) {
  div {
    display: grid;
  }
}

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

@media (max-width: 20em)

Putem încerca o lățime între două valori aleatorii folosind min- și max-

@media (min-width: 20em) and (max-width: 35em)

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 ar trebui să cunoască orice tehnici noi 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.