Tehnici esențiale HTML, CSS și JavaScript

Autor: Monica Porter

Data Creației: 22 Martie 2021

Data Actualizării: 17 Mai 2024

Video: HTML, CSS, and Javascript in 30 minutes

Conţinut

Aspect
Clearfix
Dimensiunea cutiei
Coloane multiple
Calcule
Stil
Transparenţă
Filtre
Înlocuirea imaginii
Videoclip receptiv
Funcționalitate
Selectarea cu ușurință a elementelor
Crearea de matrici noi
Curățați documentele și obiectele ferestrei
I-a plăcut asta? Citiți acestea!

Acest articol a apărut pentru prima dată în numărul 234 al revistei .net - cea mai vândută revistă din lume pentru designeri și dezvoltatori de web.

O tehnică, la baza sa, este o modalitate de a realiza o sarcină și, fiind dezvoltatori și designeri frontend, avem o mulțime de sarcini. Acestea fiind spuse, uităm adesea cât de mult s-a schimbat acest peisaj. Din 2002 până în 2010, comunitatea noastră a fost putredă de umflarea codului și a resurselor, împiedicând performanța și mentenabilitatea. Pentru a depăși acest lucru, am creat o serie de sfaturi, trucuri și hacks pe care le-am numit „tehnică”. Încă îndeplineam sarcini, nu doar în modul cel mai eficient.

Făcând un 360, în ultimii câțiva ani, standardele mai bune și implementările standardelor au prins viață, permițându-ne, ca comunitate, să dezvoltăm „tehnici” mai noi și mai avansate. Acest nou peisaj este ceea ce este considerat „web-ul modern”.

Pe măsură ce „Web 2.0” a devenit stagnant și confuz, la fel și „web-ul modern”. Dă-i timp. Acestea fiind spuse, deocamdată putem folosi și abuza termenul atâta timp cât există o înțelegere comună a ceea ce reprezintă.

În 2010, specificațiile HTML5 au aterizat, oferind un mediu web nou, semi-standardizat. Browsere precum Opera, Firefox, Chrome și Safari au îmbrățișat acest nou val și și-au împins echipele de dezvoltatori către noi limite de implementare a standardelor și explorare API. Pentru a vă face o idee despre cât de „la bord” sunt aceste browsere, verificați vizualizările www.html5readiness.com privind modificarea suportului HTML5.

Nu vă faceți griji cu privire la lipsa suportului în Internet Explorer. Putem combate acest lucru datorită Google Chrome Frame. De când Google l-a introdus în 2010, a devenit mecanismul de asistență pentru Internet Explorer. Toate versiunile de IE pot fi vizate cu Chrome Frame, ceea ce solicită unui nou utilizator să descarce un plug-in care redă site-urile web optate cu o versiune ușoară de Chrome, în interiorul IE. Pentru a implementa Chrome Frame, adăugăm următoarea meta> etichetă în capul> etichetei site-ului nostru.

meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />

De aici putem solicita utilizatorilor IE să descarce pluginul, dacă nu este deja instalat, folosind JavaScript:

tip de script = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = function () {
CFInstall.check ({
mod: "suprapunere",
destinație: „http://www.domeniuldvs.com”
});
};
/ script>

destinația poate fi setată pentru a trimite utilizatorul la un anumit link după instalarea pluginului. Un cuvânt de precauție: deși Chrome Frame ne oferă o metodă de dezvoltare strictă pentru browsere cu adevărat moderne, nu trebuie să uităm că utilizatorul are opțiunea de a nu descărca pluginul dacă nu dorește. În caz contrar, și vi se cere să oferiți asistență pentru una sau alte versiuni diferite de IE, va trebui să petreceți mai mult timp aflând ce puteți și ce nu puteți furniza, cu experiențele dvs., cross-browser.

Cu acest cod care oferă un teren de joc mult mai egal pe care să ne dezvoltăm pe stiva web modernă, putem merge mai departe cu mintea în largul nostru. Este posibil să vă amintiți că trebuie să creați un număr de hack-uri specifice browserului pentru a vă structura site-ul direct pe un browser încrucișat, creând un număr nenumărat de elemente goale pentru a fi utilizate cu imaginile dvs. feliate sau chiar scriind un cod JavaScript prea exagerat sau redundant pentru a obține cea mai simplă funcționalitate de lucru. Toate aceste dureri sunt, într-un anumit sens, aceleași probleme de care ne îngrijorăm astăzi. Încă luptăm pentru mai mult control și instrumente mai bune pentru a combate aspectul, stilul și funcționalitatea, dar la un nivel matur.

Aspect

Clearfix

Flotarea unui element a fost introdusă înapoi în CSS 2.1, dar niciodată nu sa dovedit a fi soluția completă pe care am sperat-o. Una dintre cele mai mari probleme a fost menținerea dimensiunilor unui element părinte atunci când un element copil a fost plutit. Pentru a aborda acest lucru, a fost creată tehnica clearfix.

Luați următorul HTML:

div>
div> ... / div>
div> ... / div>
/ div>

Această tehnică a fost scrisă de Nicolas Gallagher:

.clearfix: înainte,
.clearfix: după {
conținut: "";
display: tabel;
}
.clearfix: după {
clar: ambele;
}
.clearfix {
* zoom: 1;
}

Dacă utilizați HTML5Boilerplate pentru a vă lansa proiectele, atunci veți avea deja această versiune a tehnicii clearfix.

Dimensiunea cutiei

Ani de zile dezvoltatorii au dezbătut ce implementare a modelului de cutie avea mai mult sens. Modul Quirks vs Standard a însemnat cu adevărat: „dacă dimensiunile unui element se modifică, după ce au fost setate, când se aplică sau nu chenarele și căptușeala”.

Acum este larg acceptat că are mai mult sens ca marginile și căptușeala să îndepărteze spațiul disponibil din cadrul unui element și să nu se adauge la lățimea sau înălțimea elementului. Dezbaterea a fost făcută irelevantă prin implementarea pe scară largă a dimensiunii cutiei. Browserul își va lua semnele de la dvs. în loc de invers.

Popularizată de Chris Coyier și Paul Irish, o tehnică cuprinzătoare poate fi implementată cu următoarele:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Utilizarea selectorului * în CSS a fost dezbătută, din cauza potențialelor accesări ale performanței. Aceste tipuri de revendicări sunt frivole dacă nu optimizați toate celelalte aspecte ale site-ului / aplicației dvs. Utilizarea chenarului va face ca browserul să adauge căptușeli și margini în interiorul setului de spațiu disponibil. „Modul standard” poate fi utilizat prin setarea dimensiunii casetei la conținutul casetei.

Coloane multiple

Web-ul a fost foarte inspirat de forma și tipul scris. Din păcate, am rămas blocați în faza de pergament. Unele dintre aceste probleme se apropie de cap cu specificațiile mult așteptate Paged-Media și CSS Regions. Acestea fiind spuse, primii pași către mai multe aspecte asemănătoare revistelor au fost făcuți atunci când browserele au început să implementeze coloane multiple CSS. Codul pentru a genera acest efect este destul de simplu:

p {
-webkit-coloană-număr: 2;
-moz-număr-coloane: 2;
număr de coloane: 2;
}

Puteți afla mai multe despre specificațiile CSS3 cu mai multe coloane, precum și o alternativă JavaScript pe care o puteți utiliza pentru orice browser fără suport, de pe blogul A List Apart.

Calcule

Calculul dimensiunilor poate fi dificil. În vremurile vechi, nu aveam nici o modalitate de a face niciun fel de calcule unitare, darămite calcule unitare mixte. Totul s-a schimbat datorită calc. Crearea unui efect căptușit care să nu afecteze lățimea elementelor inițiale sau să utilizeze ceva de genul box-sizing: border-box; a fost, până de curând, posibil doar prin adăugarea de elemente suplimentare care conțin.

.padded {
marja: 0 auto;
poziție: relativă;
lățime: -webkit-calc (100% - (20px * 2));
lățime: -moz-calc (100% - (20px * 2));
lățime: calc (100% - (20px * 2));
}

calc () are grijă de calculul lățimii corecte pe baza lățimii părinte a .padded și minus o umplutură definită de 20px. Am înmulțit acest lucru cu 2 pentru fiecare parte a elementului meu, centrând elementul utilizând poziționarea relativă și o marjă stângă și dreaptă automată.

Stil

Transparenţă

Obținerea stilului corect al unui element a fost întotdeauna dependentă de tipul de instrumente pe care le-am avut la dispoziție în CSS. Transparența este una dintre primele variante de asistență pe care le-ați întâlni la începutul până la mijlocul anilor 2000.

Odată cu apariția HTML5 și a eforturilor de standarde mai concentrate, browserele au o implementare standard a proprietății opacității și au expus suportul pentru canalele alfa conform noii specificații a modulului de culoare. Aceasta include liniile directoare RGBA și HSLA.

A {
culoare: rgba (0,255,0,0,5);
fundal: rgba (0,0,255,0,05);
frontieră: rgba (255,0,0,0.5);
}

Puteți utiliza culorile RGBA sau HSLA oriunde ați găsi valori HEX. Există, de asemenea, o listă extinsă de culori distractive cu nume definite pe care le puteți verifica chiar în specificație. Acestea sunt utile când doriți să creați un amestec dinamic între elemente.

Filtre

Filtrele CSS sunt extrem de interesante. Posibilitatea de a schimba în mod dinamic aspectul elementelor de pe o pagină fără a fi nevoie de pluginuri terțe este uimitor și vă va ajuta să vă reduceți considerabil timpul petrecut în Photoshop.

img src = "market.webp">
img {
-webkit-filter: tonuri de gri (100%);
}

Filtrele CSS sunt acceptate doar în prezent în browserele WebKit, astfel încât utilizarea lor trebuie să fie de natură aditivă, nu dependentă. Citiți mai multe aici.

Înlocuirea imaginii

Înlocuirea textului cu imagini există de mult timp. Din păcate, există încă dezavantaje, în ceea ce privește accesibilitatea, la cele mai recente și mai sofisticate tehnici de înlocuire a imaginii. Dar recent au ieșit la lumină două extrem de inteligente și unice în propriile lor drepturi. Primul a fost scris de Scott Kellman:

h1 class = 'hide-text'> Sigla site-ului meu / h1>
.hide-text {
text-indent: 100%;
spațiu alb: nowrap;
overflow: ascuns;
}

Al doilea a fost scris de Nicolas Gallagher:

.hide-text {
font: 0/0 a;
text-shadow: none;
culoare: transparentă;
}

Videoclip receptiv

Obținerea unei dimensiuni corecte a mediilor într-un mediu receptiv poate fi o provocare. Cu tot mai multe site-uri web care respectă designul adaptiv, este esențial să gestionați corect dimensiunile elementelor și raportul de aspect.

Videoclipurile încorporate au fost unul dintre cele mai provocatoare tipuri de media care s-au confruntat din cauza modului în care serviciile terților servesc conținutul. O încorporare tipică pe YouTube arată cam așa:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

Elementul iframe conține apoi un obiect Flash sau un element de încorporare. Folosind ceva de genul iframe {maxwidth: 100%; } nu va funcționa deoarece elementele imbricate nu se redimensionează corect atunci când lățimea se schimbă. Deci, trebuie să facem niște trucuri.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Înfășurarea iframe-ului într-un alt element ne va oferi controlul de care avem nevoie pentru a adăuga funcționalitate adecvată de reacție la videoclip.

.video {
poziție: relativă;
fund de umplutură: 56,25%;
înălțime: 0;
overflow: ascuns;
}
.video iframe,
obiect video.
.video embed {
poziție: absolută;
sus: 0;
stânga: 0;
lățime: 100%;
înălțime: 100%;
}

Setarea fundului de umplere .video wrapper: 56,25%; este magia acestei metode. Folosirea căptușelii înseamnă că procentul utilizat se va baza pe lățimea părintelui; „56,25%” va crea un raport de aspect de 16: 9. Faceți singuri calculele, dacă doriți. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (acesta este procentul nostru).

Funcționalitate

Selectarea cu ușurință a elementelor

Odată cu popularitatea mai multor biblioteci JavaScript (jQuery, de exemplu), comitetul ECMAScript și standardele W3C au luat în considerare una dintre piesele de bază ale funcționalității pe care dezvoltatorilor le lipsea în mod nativ - o selecție bună a elementelor. Metode precum getElementByID () și getElementByClassName () au fost rapide, dar nu la fel de flexibile și robuste precum motoarele de selecție provenite din comunitatea de dezvoltatori; querySelectorAll () a fost modalitatea organismului de standardizare de a imita o parte din acea flexibilitate într-o metodă de selecție nativă.

var items = document.querySelectorAll ('# header .item');

querySelectorAll () pot fi transmise mai multe și selectoare mixte. Citiți mai multe despre acest lucru.

Crearea de matrici noi

Iterarea peste o matrice este ceva care a devenit obositor de scris. Scrierea și rescrierea pentru () bucle nu este distractiv. În versiunea JS 1.6, metoda map () a aterizat oferind suport pentru o modalitate ușoară de a repeta și de a crea o nouă matrice de la alta.

var people = ['Heather', 'James', 'Kari', 'Kevin'];
var întâmpină = people.map (funcție (nume) {
returnează „Bună” + nume + ’!’;
});

Rularea acestui cod, dacă ar fi să consolăm log (bun venit), ați vedea că bun venit este o nouă matrice [„Bună Heather!”, „Bună James!”, „Bună Kari!”, „Bună Kevin!” ].

Curățați documentele și obiectele ferestrei

Bibliotecile JavaScript de la terțe părți sunt predispuse la încurcarea cu documentele native și obiectele de fereastră. Aceasta poate fi o problemă pentru alte biblioteci terțe și pentru dezvoltator, inclusiv pentru acestea. Ca oricare dintre părți, asigurați-vă că lucrați cu o versiune curată a ambelor obiecte, creând o nouă instanță a acestora. Cel mai bun mod de a face acest lucru este prin crearea unui element iframe, inserarea acestuia în DOM și stocarea noilor instanțe ale acelor obiecte.

var iframe = document.createElement („iframe”);
iframe.style.display = "nici unul";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Deși au existat mari îmbunătățiri ale stivei web, continuarea completării și sofisticării suitei noastre de tehnologie pentru a face față provocărilor cu care ne confruntăm în aspectul, stilul și funcționalitatea proiectului nostru este încă extrem de importantă. Pentru a menține un ecosistem bun de creștere, trebuie să încurajăm organismele de standarde și furnizorii de browsere să continue progresul cu noi specificații și implementări de caracteristici inovatoare, împărtășind în același timp propriile noastre cunoștințe cu colegii dezvoltatori și designeri. Mai multe informații, mai puține hacks.

Darcy Clarke este un dezvoltator premiat, cofondator al companiei tematice WordPress Themify și a agregatorului zilnic de oferte DealPage și membru al echipei jQuery. Lucrează la Polar Mobile ca dezvoltator senior UX.