Opt sfaturi CSS pentru aspecte și efecte avansate

Domeniul dezvoltării web front-end a făcut progrese considerabile în ultimii ani. Cu toate acestea, front-end-ul web, așa cum îl văd utilizatorii, este în continuare același: marcaj HTML stilat cu CSS.

Multe probleme de aspect pot părea simple la început, dar adesea se dovedesc a fi dificile. Fără cunoștințe extinse despre cum funcționează anumite funcții CSS, aceste aspecte avansate pot părea imposibil de realizat doar cu CSS.

În acest articol, veți găsi opt sfaturi și trucuri CSS experți care folosesc funcții CSS mai puțin cunoscute pentru a implementa unele dintre aceste aspecte și efecte avansate.

1. Maximizarea selectoarelor de frați CSS

Problema: pierdeți oportunități de optimizare dacă nu utilizați selectoare de frați.

Soluția: folosiți selectoare de frați ori de câte ori are sens. Ori de câte ori lucrați cu o listă de articole și trebuie să tratați primul sau ultimul element diferit, primul dvs. instinct poate fi să utilizați selectoarele pseudo CSS :first-child și :last-child .

De exemplu, când creați o pictogramă de meniu hamburger numai pentru CSS:

Vedeți Pen Maximizing CSS Sibling Selecters 1 de Rico Mossesgeld (@ricotheque) pe CodePen.

Acest lucru are sens: fiecare bară are o marjă de jos, cu excepția ultimei.

Totuși, același efect este posibil și prin selectorul de frați alăturat (+):

Vedeți Pen Maximizing CSS Sibling Selectors 2 de Rico Mossesgeld (@ricotheque) pe CodePen.

Acest lucru are, de asemenea, sens: totul după prima bară are un margine-top. Acest truc CSS nu numai că economisește câțiva octeți în plus (care se pot adăuga cu ușurință pentru orice proiect de dimensiune medie), dar deschide și o lume de posibilități.

Luați în considerare această listă de carduri:

Vedeți Pen Maximizing CSS Sibling Selecters 3 de Rico Mossesgeld (@ricotheque) pe CodePen.

Fiecare are un titlu și un text, acesta din urmă fiind ascuns implicit. Dacă doriți să faceți vizibil doar textul cardului activ (cu clasa .active ) și a celor care îl urmăresc, o puteți face rapid folosind doar CSS:

Vedeți Pen Maximizing CSS Sibling Selectors 4 de Rico Mossesgeld (@ricotheque) pe CodePen.

Cu puțin JavaScript, acesta poate fi și interactiv.

Bazându-ne numai pe JavaScript pentru toate acestea, ar avea ca rezultat un script ca acesta:

Vedeți Pen Maximizing CSS Sibling Selecters 5 de Rico Mossesgeld (@ricotheque) pe CodePen.

unde includerea jQuery ca dependență vă permite să aveți un cod oarecum scurt.

2. Dimensiunea coerentă a elementelor HTML

Problema: elementele HTML au dimensiuni inconsecvente în diferite browsere.

Soluția: setați box-sizing pentru toate elementele la border-box . Internet Explorer a făcut un lucru corect: a dimensionat cutiile corect.

Alte browsere se uită numai la conținut atunci când calculează lățimea unui element HTML, totul fiind tratat ca surplus. O width: 200px div de 200 de pixeli, cu 20px de 20 de pixeli și un 2px de 2 pixeli, se redă ca lățime de 242 de pixeli.

Internet Explorer consideră căptușeala și chenarul ca parte a lățimii. Aici, div-ul de sus ar avea o lățime de 200 de pixeli.

Vedeți Pen CSS Box Model Demo 1 de Rico Mossesgeld (@ricotheque) pe CodePen.

Odată ce ați înțeles, veți găsi că a doua abordare este mai logică, chiar dacă nu respectă standardele.

Dacă spun că lățimea este de 200 px, la naiba, va fi o cutie de 200 px, chiar dacă am 20 px de umplutură.

În orice caz, următorul CSS menține dimensiunile elementelor (și, prin urmare, aspectul) consistente în toate browserele:

Vedeți Pen CSS Box Model Demo 2 de Rico Mossesgeld (@ricotheque) pe CodePen.

Cel de-al doilea set de selectoare CSS protejează elementele HTML stilate fără margini de întrerupere a aspectului.

box-sizing: border-box este atât de util încât face parte dintr-un cadru CSS relativ popular numit sanitize.css.

3. Elemente dinamice de înălțime

Problema: Menținerea înălțimii unui element HTML proporțional cu lățimea acestuia.

Soluția: Folosiți căptușeală verticală ca înlocuitor pentru înălțime.

Să presupunem că doriți ca înălțimea unui element HTML să se potrivească întotdeauna cu lățimea CSS. height: 100% nu modifică comportamentul implicit al elementelor care se potrivesc cu înălțimea conținutului său.

Vedeți Elementele de înălțime dinamică ale stiloului 1 de Rico Mossesgeld (@ricotheque) pe CodePen.

Răspunsul este să setați înălțimea la 0 și să utilizați padding-top sau padding-bottom pentru a seta în schimb înălțimea reală a .container . Oricare dintre proprietăți poate fi un procent din lățimea elementului:

Vedeți Pen Dynamic Height Elements 2 de Rico Mossesgeld (@ricotheque) pe CodePen.

Acum .container va rămâne un pătrat indiferent cât de larg va deveni. overflow: hidden împiedică conținutul lung să rupă acest raport.

Această tehnică, cu unele modificări, este excelentă pentru a crea încorporații video care își păstrează raportul de aspect la orice dimensiune. Doar aliniați încorporarea cu partea de sus și din stânga a .container position: absolute , setați ambele dimensiuni ale încorporarii la 100%, astfel încât să „se umple” .container și schimbați padding-bottom a umpluturii .container pentru a se potrivi cu aspectul videoclipului raport.

Vedeți Pen Dynamic Height Elements 3 de Rico Mossesgeld (@ricotheque) pe CodePen.

position: relative pentru .container asigură că poziționarea absolută iframe funcționează corect. Noul padding-bottom este doar înălțimea raportului de aspect împărțit la lățimea sa, ori 100. De exemplu, dacă raportul de aspect al videoclipului încorporat este 16:9, procentul padding-bottom ar trebui să fie 9 împărțit la 16 (.5625) și înmulțit cu 100 (56,25).

4. Elemente de lățime dinamică

Problema: Menținerea lățimii unui element HTML proporțional cu înălțimea acestuia.

Soluția: Folosiți dimensiunea fontului ca bază pentru dimensiunile elementului.

Acum, cum rămâne cu reversul sau cu containerele care își schimbă lățimea pe măsură ce înălțimea lor? De data aceasta, este font-size pentru salvare. Amintiți-vă că lățimea și înălțimea pot fi în em s, ceea ce înseamnă că pot fi un raport dintre font-size elementului.

Un element cu o font-size 40 pixeli, o lățime de 2 2em și o înălțime de 1em ar avea 80 pixeli (40 x 2) lățime și 40 pixeli (40 x 1) înălțime.

Vedeți Elementele de lățime dinamică a stiloului de pe Rico Mossesgeld (@ricotheque) pe CodePen.

Doriți să schimbați înălțimea .container ? Schimba marimea fontului.

Singura avertizare este că este imposibil să faceți ca dimensiunea fontului unui element să se potrivească automat cu înălțimea părintelui său numai prin CSS. Cu toate acestea, această tehnică permite ca un script de redimensionare Javascript să fie tăiat din:

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

la:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. Centrarea verticală a conținutului dinamic

Problema: Păstrarea unui element HTML (cu înălțime necunoscută) centrat vertical în interiorul altuia.

Soluția: setați elementul exterior să display: table , apoi convertiți elementul interior într table-cell CSS . Sau pur și simplu utilizați CSS Flexbox.

Este posibil să centrați vertical o linie de text cu line-height :

Vedeți Centrarea verticală a creionului a conținutului dinamic 1 de Rico Mossesgeld (@ricotheque) pe CodePen.

Pentru mai multe rânduri de conținut text sau non-text, tabelele CSS sunt răspunsul. Setați .container la table , apoi utilizați display: table-cell și vertical-align: middle pentru .text :

Vedeți Pen Centrarea verticală a conținutului dinamic 2 de Rico Mossesgeld (@ricotheque) pe CodePen.

Gândiți-vă la acest truc CSS ca la echivalentul vertical al margin: 0 auto . Flexbox-ul CSS3 este o alternativă excelentă pentru această tehnică dacă suportul pentru bug-uri din Internet Explorer este acceptabil:

Vedeți Pen Centrarea verticală a conținutului dinamic 3 de Rico Mossesgeld (@ricotheque) pe CodePen.

6. Coloane de aceeași înălțime

Problema: menținerea coloanelor la aceeași înălțime.

Soluția: pentru fiecare coloană, utilizați o valoare mare negativă margin-bottom și anulați-o cu un padding-bottom la fel de mare. Tabelele CSS și Flexbox funcționează, de asemenea.

Folosind float sau display: inline-block , este posibil să creați coloane una lângă alta prin CSS.

Vedeți Coloanele la aceeași înălțime ale stiloului 1 de Rico Mossesgeld (@ricotheque) pe CodePen.

Rețineți utilizarea box-sizing: border-box pentru a dimensiona corect .cols . Consultați Dimensiunea coerentă a elementelor HTML de mai sus.

Granițele primei și ultimei coloane nu coboară până la capăt; nu se potrivesc cu înălțimea celei de-a doua coloane mai înalte. Pentru a remedia acest lucru, trebuie doar să adăugați overflow: hidden to .row . Apoi setați margin-bottom a fiecărui .col la 99999 px și la padding-bottom px (99999 px + umplutura de 10 px aplicată celorlalte părți ale .col ).

Vedeți Coloanele la aceeași înălțime ale stiloului 2 de Rico Mossesgeld (@ricotheque) pe CodePen.

O alternativă mai simplă este Flexbox. Din nou, utilizați acest lucru numai dacă suportul pentru Internet Explorer nu este obligatoriu.

Vedeți coloanele 3 la aceeași înălțime a stiloului de Rico Mossesgeld (@ricotheque) pe CodePen.

Încă o alternativă cu suport mai bun pentru browser: tabelele CSS (fără vertical-align: middle ).

Vedeți coloanele 4 la aceeași înălțime a stiloului de Rico Mossesgeld (@ricotheque) pe CodePen.

7. Trecerea dincolo de cutie

Problema: Cutiile și liniile drepte sunt atât de clișeate.

Soluția: Folosiți transform: rotate(x) sau border-radius .

Luați o serie tipică de panouri de pe un site web de marketing sau broșură: un teanc vertical de diapozitive cu un punct singular. Markup-ul și CSS-ul ar putea arăta cam așa:

Vedeți Pen Going Beyond the Box 1 de Rico Mossesgeld (@ricotheque) pe CodePen.

Cu prețul de a face marcajul mult mai complicat, aceste panouri cutituite ar putea fi transformate într-un teanc de paralelograme.

Vedeți Pen Going Beyond the Box 2 de Rico Mossesgeld (@ricotheque) pe CodePen.

Se întâmplă multe aici:

Înălțimea fiecărui panou este controlată de .pane-container. Marja de jos negativă se asigură că panourile se stivuiesc perfect.

• .pane-background , copilul său .mask-box și nepotul său .image sunt toate setate la position: absolute . Fiecare element are valori diferite de top , left , bottom și right . Acest lucru elimină orice spațiere creată de rotațiile detaliate mai jos.
• .mask-box este rotită cu 2 grade (în sens invers acelor de ceasornic).
• .image este rotită cu -2 grade pentru a contracara .mask-box -ului.
• .mask-box este ascunsă astfel încât părțile sale de sus și de jos rotite clipesc elementul .image .

Într-o notă similară, transformarea unei imagini într-un cerc sau oval este foarte simplă. Doar aplicați border-radius: 100% elementului img .

Vedeți Pen Going Beyond the Box 3 de Rico Mossesgeld (@ricotheque) pe CodePen.

Modificările CSS în timp real, cum ar fi acestea, reduc nevoia de a pregăti conținutul înainte de a fi publicat pe un site web. În loc să aplice o mască circulară unei fotografii în Photoshop, dezvoltatorul web poate aplica același efect prin CSS fără a schimba fotografia originală.

Avantajul suplimentar este că, lăsând conținutul neatins și nedependat de designul actual al site-ului web, sunt facilitate viitoare reproiectări sau reproiectări.

8. Modul Noapte

Problema: Implementarea unui mod de noapte fără a crea o nouă foaie de stil.

Soluția: Folosiți filtre CSS.

Unele aplicații au un mod de noapte, în care interfața se întunecă pentru o mai bună lizibilitate în condiții de lumină slabă. Pe browserele mai noi, filtrele CSS pot crea același efect, aplicând efecte asemănătoare Photoshop.

Un filtru CSS util este invert , care (fără surpriză) inversează culorile a tot ce se află în interiorul unui element. Acest lucru face să fie inutilă crearea și aplicarea unui nou set de stiluri.

Vedeți Pen Night Mode 1 de Rico Mossesgeld (@ricotheque) pe CodePen.

Utilizarea acestui filtru pe text negru și fundal alb simulează modul de noapte. !important se asigură că aceste culori noi depășesc orice stiluri existente.

Vedeți Pen Night Mode 2 de Rico Mossesgeld (@ricotheque) pe CodePen.

Din păcate, imaginea arată ciudat, deoarece culorile ei au fost inversate cu orice altceva. Vestea bună este că se pot aplica mai multe filtre în același timp. Adăugarea filtrului de rotație a nuanței revine imaginile și alt conținut vizual la normal:

Vedeți Pen Night Mode 3 de Rico Mossesgeld (@ricotheque) pe CodePen.

De ce funcționează asta? hue-rotate(180deg) doar creează același efect ca și invert(1) . Iată o demonstrație a modului în care ar funcționa CSS în modul noapte atunci când este comutat printr-un buton alimentat de JavaScript.

Profitați la maximum de CSS

Dacă browserul sau modul în care sunt construite site-urile web nu se schimbă dramatic în viitor, o bună cunoaștere a CSS va rămâne o abilitate fundamentală în spațiul de dezvoltare web.

Toate aceste sfaturi CSS au ceva în comun: maximizează utilizarea CSS ca limbaj de stil, lăsând browserul însuși să facă treaba grea. Și, atunci când este făcut corect, acest lucru va produce întotdeauna rezultate mai bune, performanțe mai bune și, prin urmare, o experiență de utilizator mai bună.

Spuneți-ne dacă aveți vreun truc CSS pe care îl găsiți interesant și util în secțiunea de comentarii de mai jos.