De la autor: CSS poate face mult mai mult decât își dau seama mulți dezvoltatori web. În fiecare an, limbajul de marcare a stilului devine din ce în ce mai puternic, creând noi funcționalități în browsere care anterior puteau fi implementate doar prin JS. În acest articol, ne vom uita la 8 trucuri cu funcții CSS care nu necesită niciun JS.

Sfaturi instrumente folosind CSS pur

O mulțime de site-uri web încă folosesc JS pentru a crea sfaturi despre instrumente, dar în zilele noastre este mult mai ușor să le faci cu CSS. Cea mai simplă modalitate este să adăugați textul descrierii la atributul de date din codul HTML. De exemplu, data-tooltip="...". Pentru a afișa textul descrierii în interiorul funcției attr(), trebuie să adăugați următorul cod CSS la marcajul existent:

Tooltip::after ( conținut: attr(data-tooltip); )

Nu este nevoie de explicații, nu? Desigur, trebuie să adăugați niște cod și să stilați corect balonul, dar nu vă faceți griji. Doar pentru aceste scopuri există o bibliotecă specială scrisă în CSS, Hint.css.

Folosind atribute de date personalizate și funcția attr().

Am folosit deja funcția attr() pentru a crea sfaturi, dar are alte utilizări. Folosind această funcție, împreună cu atributele de date, puteți crea previzualizări ale imaginii cu un titlu și o descriere. Și toate acestea se fac singur șir HTML cod:

Funcția attr() poate fi acum utilizată pentru a afișa titlul și descrierea:

Subtitrare::după ( conținut: attr(titlu-date); ... )

Mai jos este un exemplu de imagine de previzualizare cu un titlu pop-up pe evenimentul de trecere cu mouse-ul:

Contoare CSS

Ceea ce putem face cu contoarele CSS este ca o magie. Această caracteristică nu este cea mai cunoscută și majoritatea oamenilor ar crede că este slab susținută. Cu toate acestea, toate browserele acceptă contoare CSS:

Nu ar trebui să utilizați contoare CSS pe liste numerotate (ol). Cu toate acestea, sunt grozave pentru navigarea în pagină sau pentru afișarea numerelor sub articolele din galerie. Puteți chiar număra numărul de elemente selectate, ceea ce este impresionant având în vedere codul mic din spatele acestuia (și fără JS deloc).

Contoarele CSS sunt, de asemenea, excelente pentru schimbarea dinamică a numerelor dintr-o listă de elemente care pot fi amestecate cu mouse-ul:

Ca și în exemplul anterior, rețineți că există probleme de accesibilitate cu conținutul generat.

Efect de sticlă mată Ajutor CSS filtre

Odată cu lansarea iOS 7, Apple ne-a oferit efectul de sticlă mată - un element translucid, neclar, care arată ca sticla mată. Datorită Apple, acest efect a început să apară în multe locuri. Este destul de dificil să recreezi efectul. Înainte de apariția filtrelor CSS, efectul de sticlă mată a trebuit să fie simulat imagini neclare. Pe în acest moment filtre CSS sunt pe deplin acceptate în aproape toate browserele, este mult mai ușor să recreați acest efect.

În viitor, vom putea crea efecte similare folosind filtre de fundal și funcția filter(), care în prezent sunt acceptate doar în Safari.

Utilizarea etichetelor HTML ca imagini de fundal

De obicei ca imagine de fundal sau gradientul pe care îl specificați fișiere JPEG sau PNG. Știați că puteți utiliza funcția element() pentru a seta o etichetă div ca imagine de fundal? În prezent, funcția element() este acceptată numai în Firefox:

Posibilitățile funcției sunt aproape nesfârșite, iată un exemplu de la MDN.

Rețele inteligente folosind calc()

Ochiurile lichide sunt un instrument grozav, dar există mai multe probleme serioase. De exemplu, nu puteți face separatoarele din partea de sus și de jos de aceeași dimensiune ca separatoarele din stânga și din dreapta. În plus, în funcție de sistemul de grilă utilizat, marcajele sunt pur și simplu aglomerate. Nici măcar nu-l poți numi flexbox cea mai buna solutie, cu toate acestea, cu funcția calc(), care poate fi folosită ca valoare în CSS, grilele pot deveni mult mai bune. În acest tutorial SitePoint, George Martzoukos arată mai multe exemple practice, inclusiv o grilă de galerie cu spațiere perfectă. CU Preprocesoare CSS crearea unui sistem de grilă poate deveni incredibilă o sarcină simplă, iar grila în sine va fi foarte ușor de întreținut. Suportul pentru funcții este foarte bun, asigurați-vă că utilizați funcția calc().

Alinierea elementelor cu poziția: fixată folosind funcția CSS calc()

Un alt exemplu de utilizare a funcției calc() este alinierea elementelor cu o poziție fixă. De exemplu, aveți un înveliș bloc pentru conținut cu umplutură fluidă în stânga și în dreapta și doriți să aliniați cu precizie un element fix în interiorul containerului. Ar trebui să petreceți mult timp calculând valorile exacte pentru proprietățile din dreapta sau din stânga. Cu toate acestea, cu calc() puteți combina valorile relative și absolute pentru o aliniere perfectă.

Bună ziua. Vreau să vă spun despre tendința funcțiilor din CSS 3 și despre cum poate și chiar uneori ar trebui să fie utilizat în proiecte.

Pentru a nu vă pierde timpul, vă voi descrie proprietățile despre care aș dori să vă spun:

• functie de contor
• funcția calc
• funcția attr
• funcția de comutare
• unitate de măsură - rem
• unitate de măsură - vw
• unitate de măsură - vh

Funcții în css 3

O mare bucurie a răsunat în legiunea de dezvoltatori când am primit una dintre primele funcții - media queries, care ne-a permis să acceptăm anumite stiluri în funcție de tot felul de factori externi. De fapt, a fost doar un mare plus față de funcționalitatea care a fost standardizată în versiunea CSS 2.1.

Datorită apariției unor astfel de oportunități, lumea a devenit mai strălucitoare, site-urile au devenit mult mai convenabile atunci când sunt vizualizate de pe tot felul de gadget-uri și s-au născut concepte precum Responsive Web Design și Adaptive Web Design (de fapt, al doilea este un subset din primul).

W3c nu s-a oprit aici și recent am auzit despre o funcție precum suporturile sau CSS Feature Queries, care este acceptată doar în firefox începând cu versiunea 21, Chrome începând cu versiunea 28 și în cea mai recentă opera (12.1).

Acestea sunt vedetele noastre, sunt în centrul atenției și toată lumea le iubește. Cu ei totul este destul de clar și evident. Acum să aruncăm o privire la funcțiile mai puțin semnificative.

Contra

Aceasta este o funcție de creștere în css, care, apropo, există încă din versiunea 2.1. Ce face ea, întrebi?! Și ea face următoarele:
Funcția de contor vă permite să porniți un contor cu un nume, să îl incrementați și să îl resetați la zero. Conținutul contorului poate fi afișat prin pseudoelementele după și înainte. În general, imitați listele dvs., deși nu am găsit niciun beneficiu în această funcție pentru mine.

Calc

Referitor la suport:

• Internet Explorer 9+
• Mozilla Firefox 19+
• Chrome 24+
• Safari 6+
• Operă nu suporta

Pentru mine personal această funcțieÎmi place foarte mult, pentru că îmi va permite să scurtez puțin codul atunci când, de exemplu, trebuie să centrez un element:

Casetă (poziție: absolut; lățime: 400px; stânga: calc(50% - 200px); )

Comutați

Funcția de comutare vă permite să acceptați anumite stiluri în funcție de stilurile elementului părinte.

Parent ( font-style: italic; ) .child ( font-style: toggle(italic, normal); )

Ca rezultat, avem următoarea logică: Dacă proprietatea tip font a părintelui are valoarea italic, atunci se aplică normal elementului copil, dar dacă părintele are o valoare diferită de italic, atunci elementul fiu va fi italic.

Informații de asistență această metodă Nu l-am găsit, dar rezultatele testelor m-au făcut să cred că nimeni nu susține încă acest lucru. Ei bine, nu sunt supărat, nu folosesc deloc o cascadă, așa că nu am nevoie de astfel de capacități și, în general, sunt cu profil îngust.

attr

Cred că mulți oameni sunt, de asemenea, familiarizați cu funcția attr.

Funcția vă permite să afișați valoarea oricărui atribut prin pseudoelementele de după și înainte. Funcția, de altfel, există și din versiunea css 2.1, dar a primit o actualizare în versiunea 3. Acest atribut vă va permite să scrieți lucruri precum:

stoc > * ( afișare: bloc; lățime: attr(lungime em); /* implicit 0 */ înălțime: 1 em; chenar: solid subțire; margine: 0,5 em; )

În prezent, nu există suport pentru această îmbunătățire nicăieri.

Din păcate acest material sunt în starea de recomandare de candidat și nu se știe încă dacă bunătățile de mai sus vor funcționa în viitorul apropiat. Documentul conține, de asemenea, următorul rând:

Următoarele caracteristici sunt expuse riscului și pot fi renunțate în timpul perioadei CR: „calc()”, „toggle()”, „attr()”.

Deci s-ar putea să nu vedem toate aceste delicii.

Concluzie

Personal, îmi place că css introduce funcții și vă permite să faceți lucruri care au fost făcute anterior și cred că este grozav. Acolo am terminat de vorbit despre funcții.

Rem, vw și vh

Valoarea rem este analogă cu em, cu singura diferență la care se uită întotdeauna valoare html, și nu părintele ca în cazul ems obișnuit. De aici și numele root em => rem.

rem este susținut de toată lumea browsere moderne, inclusiv 9 și 10 Internet Explorer. Dacă acceptați versiunea 8 a ie, atunci, din păcate, nu veți putea folosi rem.

vw și vh

În spatele acestor abrevieri, care sunt de neînțeles la prima vedere, se află unități de măsură foarte clare și utile.

1 unitate vh sau vw este egală cu 1% din lățimea sau înălțimea ferestrei de vizualizare a utilizatorului. Prin urmare, 100wh va fi egal cu 100% din lățimea ferestrei browser, ceea ce în unele cazuri poate fi util, deoarece atunci când setați o valoare, de exemplu, lățimea, nu porniți de la lățimea părinte, ci din fereastra de vizualizare, care nu te-ai putea descurca cu %.

Sprijin:

• Internet Explorer 9+
• Mozilla Firefox 19+
• Chrome 24+
• Safari 6+
• Operă nu suporta

Vă mulțumim pentru atenție, sper că acest lucru vă va fi de folos în sarcina noastră uneori dificilă.

CSS poate face mult mai mult decât vă așteptați. În fiecare an, acest limbaj devine din ce în ce mai puternic, câștigând funcționalități care anterior erau disponibile doar în JavaScript. În acest articol, ne vom uita la 8 trucuri inteligente cu funcții CSS care nu necesită JS.

1. Sfaturi instrumente

Multe site-uri încă folosesc JavaScript pentru a crea sfaturi despre instrumente, dar de fapt este mult mai ușor să le faci cu CSS. Cea mai ușoară soluție ar fi să scrieți textul indicativ în atributul de date al codului HTML, de exemplu, data-tooltip="..." . Acum puteți utiliza CSS pentru a afișa textul descrierii în funcția attr():

Tooltip::after ( conținut: attr(data-tooltip); )

Totul este extrem de simplu. Desigur, stilul necesită mai mult cod, dar, din fericire, există o bibliotecă grozavă pentru aceasta numită Hint.css.

2. Utilizarea atributelor de date și a funcției attr().

Am folosit deja attr() pentru sfaturi cu instrumente, dar asta nu singura cale aplicarea acestuia. În combinație cu atributele de date, puteți crea o imagine de etichetă cu un titlu și o descriere folosind doar o singură linie de HTML:

Acum puteți folosi funcția attr() pentru a afișa titlul și descrierea:

Subtitrare::după ( conținut: attr(titlu-date); ... )

Iată un exemplu de lucru cu o animație hover:

3. Contoare CSS

Ce poți face cu contoarele CSS este ca o magie. Aceasta nu este cea mai cunoscută caracteristică a limbii și mulți oameni cred că are puțin suport, dar acest lucru nu este adevărat:

Contoarele CSS sunt, de asemenea, excelente pentru afișarea numerelor care se schimbă dinamic în liste care pot fi resortate prin glisare și plasare:

4. Efect de sticlă înghețată folosind filtre CSS

Înapoi în iOS 7, Apple a adăugat efectul „sticlă înghețată” - elemente translucide, neclare. Acest efect devine destul de popular. Implementarea acestuia nu era atât de ușoară înainte - înainte de apariția filtrelor CSS, imaginile trebuiau distorsionate. Acum totul a devenit mult mai ușor.

6. Grilă îmbunătățită folosind calc()

Ochiurile flexibile sunt un lucru foarte util, dar atunci când lucrați cu ele, apar probleme. diverse probleme, legate în principal de aspectul și dimensiunea blocurilor. Nici măcar flexbox nu poate face treaba singur. Dar funcția calc(), care poate fi folosită ca valoare, poate fi de mare folos. Acest ghid oferă exemple de utilizare a acestei funcții. Folosind un preprocesor precum Sass și funcția calc(), crearea unei grile utile ar trebui să fie rapidă. În plus, această caracteristică este acceptată de aproape toate browserele.

Vedeți Pot folosi calc? Date pe sprijin pentru funcția calc în browserele majore de la caniuse.com.

7. Alinierea elementelor fixe

Funcția calc() poate fi folosită și pentru a alinia elemente cu o poziție fixă. De exemplu, dacă aveți un înveliș cu margini de dimensiuni variabile în stânga și în dreapta și trebuie să aliniați cu precizie un element în interiorul învelișului, va trebui să vă grăbiți creierul alegând dimensiunea corectă indentare. Cu calc() puteți combina valori absolute și relative pentru o aliniere perfectă:

Wrapper (max-width: 1060px; margin: 0 auto; ) .floating-bubble (poziție: fix; dreapta: calc(50% - 530px); /* 50% - jumătate din lățimea wrapperului */ )

Funcția attr() este utilizată pentru a adăuga valoarea atributului unui element HTML la o proprietate de stil. De exemplu, puteți obține valoarea atribut de clasăși apoi folosiți-o ca valoare a proprietății de fundal pentru a schimba culoarea.

Denumiri

Valori

<атрибут>Numele atributului elementului a fost transmis CSS-ului.<тип>Tipul valorii Proprietăți CSS. Următoarele sunt acceptabile cuvinte cheie: șir (șiruri), culoare (culoare), url (adresă web), întreg (întreg), număr ( număr real), unghi (unghi), timp (timp), grade (grad) și unități CSS ca em, px, etc.<значение>Valoarea care trebuie utilizată dacă atributul nu există sau browserul nu îl poate obține.

Între versiuni CSS există o mică diferență în citirea unora dintre caracteristicile attr() . În CSS2.1, funcția attr() poate fi utilizată numai împreună cu proprietatea conținut și returnează întotdeauna un șir ca valoare. În CSS3, attr() poate fi folosit cu orice proprietate, iar valoarea returnată poate fi în orice format valid pentru CSS3.

Exemplu

Site util

ÎN în acest exemplu După legăturile cu clasa de site, valoarea atributului href căruia i se aplică stilul este afișată în paranteze.

Caietul de sarcini

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.