Tècniques essencials d’HTML, CSS i JavaScript

Autora: Monica Porter

Data De La Creació: 22 Març 2021

Data D’Actualització: 17 Ser Possible 2024

Tècniques essencials d’HTML, CSS i JavaScript - Creatiu

Content

Disseny
Clearfix
Mida de la caixa
Múltiples columnes
Càlculs
Estil
Transparència
Filtres
Substitució de la imatge
Vídeo sensible
Funcionalitat
Selecció fàcil d’elements
Creació de noves matrius
Netejar objectes de documents i finestres
T'ha agradat això? Llegiu-los!

Aquest article va aparèixer per primera vegada al número 234 de la revista .net, la revista més venuda del món per a dissenyadors i desenvolupadors de webs.

Una tècnica, en el seu nucli, és una manera de dur a terme una tasca i, en ser desenvolupadors i dissenyadors de frontend, tenim moltes tasques. Dit això, sovint oblidem quant ha canviat aquest paisatge. Des del 2002 fins al 2010, la nostra comunitat va estar putrefacta de recursos i inflació de recursos, cosa que va dificultar el rendiment i la mantenibilitat. Per superar-ho, vam crear una sèrie de consells, trucs i trucs que vam anomenar "tècnica". Seguíem realitzant tasques, però no de la manera més eficient.

Fent una versió 360, els darrers anys han vist com s’obtenen millors estàndards i implementacions d’estàndards que ens permeten, com a comunitat, desenvolupar ‘tècniques’ més noves i avançades. Aquest nou panorama és el que es considera la "xarxa moderna".

A mesura que el "web 2.0" es va estancar i confondre, també ho farà el "web modern". Dóna-li temps. Dit això, de moment podem utilitzar i abusar del terme sempre que es tingui una comprensió comuna del que representa.

El 2010, l’especificació HTML5 va aterrar, proporcionant un nou entorn web semiestandarditzat. Navegadors com Opera, Firefox, Chrome i Safari van adoptar aquesta nova onada i van empènyer els seus equips de desenvolupadors a nous límits d’implementacions d’estàndards i exploració d’API. Per fer-vos una idea de com són "integrats" aquests navegadors, consulteu les visualitzacions de www.html5readiness.com sobre el canvi de suport HTML5.

No us preocupeu per la manca de suport a Internet Explorer. Podem combatre-ho gràcies a Google Chrome Frame. Des que Google el va introduir el 2010, s'ha convertit en el mecanisme de suport a Internet Explorer. Totes les versions d’IE es poden orientar amb Chrome Frame, cosa que demana a un usuari nou que descarregui un complement que faci que els llocs web amb una versió lleugera de Chrome, inclosos a IE, siguin activats. Per implementar Chrome Frame, afegim la següent meta> etiqueta al cap> etiqueta del nostre lloc.

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

Des d’aquí podem demanar als usuaris de l’IE que descarreguin el connector, si encara no està instal·lat, mitjançant JavaScript:

script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = function () {
CFInstall.check ({
mode: "superposició",
destinació: "http://www.yourdomain.com"
});
};
/ script>

es pot configurar la destinació per enviar l’usuari a un enllaç determinat després d’instal·lar el connector. Una precaució: tot i que Chrome Frame ens proporciona un mètode per desenvolupar estrictament per a navegadors realment moderns, no hem d’oblidar que l’usuari té l’opció de no descarregar el connector si no ho vol. Si no ho fan, i se us demana que proporcioneu assistència per a una o altres versions diferents d’IE, haureu de dedicar una mica més de temps a esbrinar què podeu proporcionar i què no, amb les vostres experiències, entre navegadors..

Amb aquest codi que proporciona un terreny de joc considerablement més equilibrat sobre el qual desenvolupar-se a la moderna pila web, podem avançar amb la ment a gust. Recordeu que haureu de crear una sèrie de pirates informàtics específics del navegador per fer que el vostre lloc estigui estructurat entre diversos navegadors, creant una infinitat d’elements buits per utilitzar-los amb les vostres imatges, o fins i tot escrivint un codi JavaScript excessivament detallat o redundant per obtenir el la funcionalitat més senzilla de treballar. Tots aquests dolors són, en cert sentit, els mateixos problemes que ens preocupen avui. Seguim lluitant per obtenir més control i millors eines per combatre el disseny, l'estil i la funcionalitat, però en un nivell madur.

Disseny

Clearfix

Un element flotant es va introduir de nou a CSS 2.1, però mai va resultar ser la solució completa que esperàvem. Un dels problemes més importants va ser el manteniment de les dimensions d’un element pare quan es va fer flotar un element fill. Per solucionar-ho, es va crear la tècnica clearfix.

Preneu el codi HTML següent:

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

Aquesta tècnica va ser escrita per Nicolas Gallagher:

.clearfix: abans,
.clearfix: després de {
contingut: "";
visualització: taula;
}
.clearfix: després de {
clar: tots dos;
}
.clearfix {
* zoom: 1;
}

Si utilitzeu HTML5Boilerplate per iniciar els vostres projectes, ja tindreu aquesta versió de la tècnica clearfix.

Mida de la caixa

Durant anys, els desenvolupadors van debatre sobre quina implementació del model de caixa tenia més sentit. El mode Quirks vs Standards volia dir realment: "si les dimensions d'un element canvien, després de definir-les, quan s'apliquen vores i encoixinat o no".

Ara està generalment d'acord que té més sentit que les vores i el farcit eliminin l'espai disponible dins d'un element i no s'afegeixin a l'amplada o l'alçada de l'element. El debat ha quedat irrellevant amb la implementació generalitzada del dimensionament de caixes. El navegador us prendrà les seves indicacions en lloc de viceversa.

Popularitzat per Chris Coyier i Paul Irish, es pot implementar una tècnica global que inclou:

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

S'ha debatut l'ús del selector * a CSS, a causa de possibles èxits de rendiment. Aquest tipus de reclamacions són frívols si no optimitzeu tots els altres aspectes del vostre lloc web / aplicació. L’ús de border-box farà que el navegador afegeixi farcits i vores dins del conjunt d’espai disponible. Es pot utilitzar el "Mode estàndard" configurant la mida del quadre a contingut-quadre.

Múltiples columnes

El web es va inspirar molt en la forma i el tipus escrit. Malauradament, ens vam quedar atrapats en la fase de pergamí. Alguns d’aquests problemes estan arribant a les seves expectatives amb les molt esperades especificacions de Paged-Media i CSS Regions. Dit això, els primers passos cap a dissenys més semblants a revistes es van fer quan els navegadors van començar a implementar múltiples columnes CSS. El codi per generar aquest efecte és bastant senzill:

p {
-webkit-columna-recompte: 2;
-moz-columna-recompte: 2;
recompte de columnes: 2;
}

Podeu obtenir més informació sobre l’especificació de múltiples columnes CSS3, així com una alternativa de JavaScript que podeu utilitzar per a qualsevol navegador sense suport, al bloc d’A List Apart.

Càlculs

Calcular dimensions pot ser difícil. Antigament, no teníem cap manera de fer cap tipus de càlcul d’unitat, i encara menys càlculs d’unitats mixtes. Tot ha canviat gràcies a calc. Crear un efecte encoixinat que no afecti l’amplada dels elements inicials ni utilitzi alguna cosa semblant a la mida de la caixa: border-box; fins fa poc només era possible afegint elements que contenien més.

.encoixinat {
marge: 0 automàtic;
posició: relativa;
ample: -webkit-calc (100% - (20px * 2));
ample: -moz-calc (100% - (20px * 2));
amplada: calc (100% - (20px * 2));
}

calc () s'encarrega del càlcul de l'amplada adequat en funció de l'amplada principal de .padded i menys un farciment definit de 20 px. He multiplicat això per 2 per a cada costat del meu element, centrant l'element mitjançant un posicionament relatiu i un marge automàtic esquerre i dret.

Estil

Transparència

Obtenir l’estil correcte d’un element sempre ha depès del tipus d’eines que teníem a la nostra disposició a CSS. La transparència és una de les primeres variants de suport amb què es trobaria a principis de mitjans del 2000.

Amb l'arribada de l'HTML5 i els esforços en estàndards més centrats, els navegadors tenen una implementació estàndard de la propietat d'opacitat i han exposat el suport al canal alfa segons la nova especificació del mòdul de color. Això inclou directrius RGBA i HSLA.

un {
color: rgba (0,255,0,0,5);
fons: rgba (0,0,255,0,05);
frontera: rgba (255,0,0,0,5);
}

Podeu utilitzar colors RGBA o HSLA allà on trobeu valors HEX. També hi ha una llista extensa de colors divertits amb noms definits que podeu consultar directament a l'especificació. Són útils si voleu crear una combinació dinàmica entre elements.

Filtres

Els filtres CSS són extremadament emocionants. Tenir la capacitat de canviar dinàmicament l’aspecte dels elements d’una pàgina sense necessitat de connectors de tercers és increïble i us ajudarà a reduir enormement el vostre temps passat a Photoshop.

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

Actualment, els filtres CSS només són compatibles amb els navegadors WebKit, de manera que el seu ús hauria de ser additiu i no dependre. Llegiu-ne més aquí.

Substitució de la imatge

La substitució del text per imatges existeix des de fa molt de temps. Malauradament, encara hi ha desavantatges, quant a l’accessibilitat, de les tècniques de substitució d’imatges més recents i sofisticades. Però recentment han sortit a la llum dos que són extremadament intel·ligents i únics en els seus propis drets. El primer va ser escrit per Scott Kellman:

h1 class = ’hide-text’> Logotip del meu lloc web / h1>
.hide-text {
sagnat de text: 100%;
espai en blanc: nowrap;
desbordament: amagat;
}

El segon va ser escrit per Nicolas Gallagher:

.hide-text {
font: 0/0 a;
text-ombra: cap;
color: transparent;
}

Vídeo sensible

Aconseguir que els mitjans escalin correctament en un entorn responsiu pot ser un repte. Amb cada vegada més llocs web que respecten el disseny adaptatiu, és essencial gestionar correctament les dimensions i la relació d’aspecte dels elements.

El vídeo incrustat ha estat un dels tipus de mitjans de comunicació més desafiadors a causa de la forma en què els serveis de tercers serveixen el contingut. Una inserció típica de YouTube té aquest aspecte:

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

L'element iframe conté un objecte Flash o un element d'incorporació. Utilitzant alguna cosa com iframe {maxwidth: 100%; } no funcionarà perquè els elements imbricats no es canvien de mida quan canvia l'amplada. Per tant, hem de fer una mica d’engany.

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

L’ajust de l’iframe en un altre element ens donarà el control que necessitem per afegir una funció de resposta adequada al vídeo.

.video {
posició: relativa;
fons de farciment: 56,25%;
alçada: 0;
desbordament: amagat;
}
.video iframe,
objecte de vídeo,
incrustar .video {
posició: absoluta;
superior: 0;
esquerra: 0;
amplada: 100%;
alçada: 100%;
}

Configuració del fons de farciment de l’embolcall .video: 56,25%; és la màgia d’aquest mètode. L’ús de farciment significa que el percentatge utilitzat es basarà en l’amplada del pare; El "56,25%" crearà una relació d'aspecte de 16: 9. Feu les matemàtiques vosaltres mateixos, si voleu. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (aquest és el nostre percentatge).

Funcionalitat

Selecció fàcil d’elements

Amb la popularitat de diverses biblioteques JavaScript (jQuery, per exemple), el comitè ECMAScript i els estàndards W3C van prendre nota d’una de les peces bàsiques de la funcionalitat que els desenvolupadors no tenien de forma nativa: una bona selecció d’elements. Mètodes com getElementByID () i getElementByClassName () eren ràpids però no tan flexibles i robustos com els motors de selecció provinents de la comunitat de desenvolupadors; querySelectorAll () era la forma de l'organisme estàndard d'imitar una mica d'aquesta flexibilitat en un mètode de selecció nativa.

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

querySelectorAll () es poden passar diversos selectors i mixtos. Llegiu-ne més.

Creació de noves matrius

Iterar sobre una matriu és una cosa que s’ha tornat cansat d’escriure. No és divertit escriure i reescriure per a bucles (). A la versió 1.6 de JS, el mètode map () va aterrar proporcionant suport per a una manera senzilla d'iterar i crear una nova matriu a partir d'una altra.

var people = ['Heather', 'James', 'Kari', 'Kevin'];
var dóna la benvinguda = people.map (funció (nom) {
torna 'Hola' + nom + '!';
});

Si utilitzeu aquest codi, si volíem console.log (donem la benvinguda), veureu que donem la benvinguda és una nova matriu ["Hola Heather!", "Hola James!", "Hola Kari!", "Hola Kevin!" ].

Netejar objectes de documents i finestres

Les biblioteques JavaScript de tercers són propenses a embolicar-se amb objectes de documents i finestres natius. Això pot ser un problema per a altres biblioteques de tercers i per al desenvolupador que les inclogui. Com a qualsevol de les parts, assegureu-vos de treballar amb una versió neta d’ambdós objectes creant-ne una nova instància. La millor manera de fer-ho és mitjançant la creació d’un element iframe, la inserció al DOM i l’emmagatzematge de les noves instàncies d’aquests objectes.

var iframe = document.createElement ('iframe');
iframe.style.display = "cap";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Tot i que hi ha hagut grans millores a la pila web, continuar completant i sofisticant la nostra suite tecnològica per afrontar els reptes als quals ens enfrontem en el disseny, l’estil i la funcionalitat del nostre projecte continua sent molt important. Per mantenir un bon ecosistema de creixement, hem d’encoratjar els organismes d’estàndards i els proveïdors de navegadors a continuar avançant amb noves especificacions i implementacions de funcions innovadores alhora que compartim el nostre propi coneixement amb altres desenvolupadors i dissenyadors. Més informació, menys pirates informàtics.

Darcy Clarke és un desenvolupador guardonat, cofundador de l’empresa temàtica WordPress Themify i agregador d’ofertes diàries DealPage, i membre de l’equip jQuery. Treballa a Polar Mobile com a desenvolupador sènior de UX.