Tecniche HTML, CSS e JavaScript essenziali

Autore: Monica Porter

Data Della Creazione: 22 Marzo 2021

Data Di Aggiornamento: 17 Maggio 2024

Video: Learn HTML5 and CSS3 From Scratch - Full Course

Contenuto

disposizione
Clearfix
Dimensionamento della scatola
Multi-colonne
Calcoli
Stile
Trasparenza
Filtri
Sostituzione dell'immagine
Video reattivo
Funzionalità
Selezione facile degli elementi
Creazione di nuovi array
Pulisci documenti e oggetti finestra
Questo mi piaceva? Leggi questo!

Questo articolo è apparso per la prima volta nel numero 234 di .net magazine, la rivista più venduta al mondo per web designer e sviluppatori.

Una tecnica, al suo interno, è un modo per svolgere un compito e, essendo sviluppatori e designer di frontend, abbiamo molti compiti. Detto questo, spesso ci dimentichiamo di quanto sia cambiato questo paesaggio. Dal 2002 al 2010 la nostra comunità è stata marcita da codice e risorse gonfie, ostacolando le prestazioni e la manutenibilità. Per ovviare a questo, abbiamo creato una serie di suggerimenti, trucchi e hack che abbiamo soprannominato "tecnica". Stavamo ancora portando a termine compiti, ma non nel modo più efficiente.

Facendo un 360, gli ultimi anni hanno visto prendere vita standard e implementazioni di standard migliori, consentendoci come comunità di sviluppare "tecniche" più nuove e più avanzate. Questo nuovo panorama è quello che è considerato il "web moderno".

Man mano che il "Web 2.0" è diventato stagnante e confuso, lo sarà anche il "Web moderno". Dagli tempo. Detto questo, per ora, possiamo usare e abusare del termine fintanto che c'è una comprensione comune di ciò che rappresenta.

Nel 2010 è arrivata la specifica HTML5, fornendo un nuovissimo ambiente web semi-standardizzato. Browser come Opera, Firefox, Chrome e Safari hanno abbracciato questa nuova ondata e hanno spinto i loro team di sviluppo verso nuovi limiti di implementazioni di standard ed esplorazione delle API. Per darti un'idea di come sono "integrati" questi browser, controlla le visualizzazioni di www.html5readiness.com della modifica del supporto HTML5.

Non preoccuparti per la mancanza di supporto in Internet Explorer. Possiamo combatterlo grazie a Google Chrome Frame. Da quando Google lo ha introdotto nel 2010, è diventato il meccanismo di supporto di riferimento per Internet Explorer. Tutte le versioni di IE possono essere scelte come target con Chrome Frame, che richiede a un nuovo utente di scaricare un plug-in che esegue il rendering dei siti Web attivati con una versione leggera di Chrome, all'interno di IE. Per implementare Chrome Frame, aggiungiamo il seguente meta> tag all'interno del tag head> del nostro sito.

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

Da qui possiamo richiedere agli utenti di IE di scaricare il plug-in, se non già installato, utilizzando JavaScript:

tipo di script = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = function () {
CFInstall.check ({
modalità: "overlay",
destinazione: "http://www.tuodominio.com"
});
};
/ script>

destinazione può essere impostata per inviare l'utente a un determinato collegamento dopo aver installato il plug-in. Un avvertimento: sebbene Chrome Frame ci offra un metodo di sviluppo strettamente per browser veramente moderni, non dobbiamo dimenticare che l'utente ha la possibilità di non scaricare il plug-in se non lo desidera. In caso contrario, e ti viene richiesto di fornire supporto per una o altre versioni diverse di IE, dovrai dedicare un po 'più di tempo a scoprire cosa puoi e non puoi fornire, con le tue esperienze, cross-browser.

Con questo codice che fornisce un campo di gioco notevolmente più uniforme su cui sviluppare sullo stack web moderno, possiamo andare avanti con le nostre menti a proprio agio. Potresti ricordare di dover creare una serie di hack specifici del browser per rendere il tuo sito strutturato in modo corretto cross-browser, creando un numero infinito di elementi vuoti da utilizzare con le tue immagini suddivise, o persino scrivendo codice JavaScript eccessivamente dettagliato o ridondante per ottenere il funzionalità più semplice da lavorare. Tutti questi dolori sono, in un certo senso, gli stessi problemi di cui ci preoccupiamo oggi. Stiamo ancora lottando per un maggiore controllo e strumenti migliori per combattere layout, stile e funzionalità, ma a un livello maturo.

disposizione

Clearfix

Il galleggiamento di un elemento è stato introdotto in CSS 2.1 ma non si è mai rivelato essere la soluzione completa che speravamo. Uno dei problemi maggiori era mantenere le dimensioni di un elemento genitore quando un elemento figlio veniva flottato. Per risolvere questo problema, è stata creata la tecnica clearfix.

Prendi il seguente codice HTML:

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

Questa tecnica è stata scritta da Nicolas Gallagher:

.clearfix: prima,
.clearfix: dopo {
contenuto: "";
display: tabella;
}
.clearfix: dopo {
chiaro: entrambi;
}
.clearfix {
* zoom: 1;
}

Se usi HTML5Boilerplate per dare il via ai tuoi progetti, allora avrai già questa versione della tecnica clearfix incorporata.

Dimensionamento della scatola

Per anni gli sviluppatori hanno discusso su quale implementazione del box model avesse più senso. La modalità Quirks vs Standards significava davvero: "le dimensioni di un elemento cambiano, dopo essere stato impostato, quando vengono applicati bordi e spaziatura interna, oppure no".

È ormai ampiamente riconosciuto che ha più senso che i bordi e il riempimento tolgano lo spazio disponibile all'interno di un elemento e non si aggiungano alla larghezza o all'altezza dell'elemento. Il dibattito è stato reso irrilevante con l'implementazione diffusa del dimensionamento delle scatole. Il browser prenderà spunto da te invece che viceversa.

Reso popolare da Chris Coyier e Paul Irish, una tecnica onnicomprensiva può essere implementata con quanto segue:

* {
-webkit-box-dimensionamento: border-box;
-moz-box-dimensionamento: border-box;
dimensionamento scatola: border-box;
}

L'uso del selettore * in CSS è stato oggetto di discussione, a causa di potenziali successi nelle prestazioni. Questi tipi di affermazioni sono futili se non stai ottimizzando in modo eccessivo tutti gli altri aspetti del tuo sito web / app. L'uso del border-box farà sì che il browser aggiunga padding e bordi all'interno dello spazio disponibile impostato. La "Modalità standard" può essere utilizzata impostando il dimensionamento della scatola su scatola dei contenuti.

Multi-colonne

Il web è stato fortemente ispirato dalla forma scritta e dal tipo. Purtroppo siamo rimasti bloccati nella fase della pergamena. Alcuni di questi problemi stanno arrivando al culmine con le tanto attese specifiche Paged-Media e CSS Regions. Detto questo, i primi passi verso layout più simili a riviste sono stati compiuti quando i browser hanno iniziato a implementare le multi-colonne CSS. Il codice per generare questo effetto è piuttosto semplice:

p {
-webkit-conteggio colonne: 2;
-moz-column-count: 2;
conteggio colonne: 2;
}

Puoi saperne di più sulla specifica multi-colonna CSS3, nonché su un fallback JavaScript che puoi utilizzare per qualsiasi browser senza supporto, dal blog di A List Apart.

Calcoli

Il calcolo delle dimensioni può essere difficile. Ai vecchi tempi, non avevamo modo di fare alcun tipo di calcoli di unità, per non parlare di calcoli di unità misti. Tutto è cambiato grazie a calc. Creare un effetto imbottito che non influisca sulla larghezza degli elementi iniziali o utilizzare qualcosa come il dimensionamento del box: border-box; fino a poco tempo fa era possibile solo aggiungendo elementi di contenimento extra.

.padded {
margine: 0 auto;
posizione: relativa;
larghezza: -webkit-calc (100% - (20px * 2));
larghezza: -moz-calc (100% - (20px * 2));
larghezza: calc (100% - (20px * 2));
}

calc () si occupa del corretto calcolo della larghezza in base alla larghezza principale di .padded e meno un riempimento definito di 20px. L'ho moltiplicato per 2 per entrambi i lati del mio elemento, centrando l'elemento utilizzando il posizionamento relativo e un margine sinistro e destro automatico.

Stile

Trasparenza

Ottenere il giusto stile di un elemento è sempre stato dipendente dal tipo di strumenti che avevamo a disposizione nei CSS. La trasparenza è una delle prime varianti di supporto in cui ti imbatteresti nella prima metà degli anni 2000.

Con l'avvento di HTML5 e sforzi più mirati per gli standard, i browser hanno un'implementazione standard della proprietà opacity e hanno esposto il supporto del canale alfa secondo la nuova specifica del Color Module. Ciò include le linee guida RGBA e HSLA.

a {
colore: rgba (0,255,0,0.5);
sfondo: rgba (0,0,255,0.05);
confine: rgba (255,0,0,0.5);
}

Puoi utilizzare i colori RGBA o HSLA ovunque tu trovi valori HEX. C'è anche un elenco esteso di colori divertenti con nomi definiti che puoi controllare direttamente nelle specifiche. Questi sono utili quando vuoi creare una miscela dinamica tra gli elementi.

Filtri

I filtri CSS sono estremamente interessanti. Avere la capacità di cambiare dinamicamente l'aspetto degli elementi su una pagina senza la necessità di plug-in di terze parti è sorprendente e contribuirà a ridurre notevolmente il tempo trascorso in Photoshop.

img src = "market.webp">
img {
-webkit-filter: scala di grigi (100%);
}

I filtri CSS sono attualmente supportati solo nei browser WebKit, quindi il loro utilizzo dovrebbe essere di natura additiva, non dipendente. Leggi di più qui.

Sostituzione dell'immagine

La sostituzione del testo con le immagini esiste da molto tempo. Sfortunatamente, ci sono ancora degli svantaggi, dal punto di vista dell'accessibilità, alle tecniche di sostituzione delle immagini più recenti e sofisticate. Ma recentemente ne sono venuti alla luce due estremamente intelligenti e unici nei loro diritti. Il primo è stato scritto da Scott Kellman:

h1 class = ’hide-text’> Logo del mio sito web / h1>
.hide-text {
rientro del testo: 100%;
spazio bianco: nowrap;
overflow: nascosto;
}

Il secondo è stato scritto da Nicolas Gallagher:

.hide-text {
carattere: 0/0 a;
text-shadow: nessuno;
colore: trasparente;
}

Video reattivo

Ottenere la scalabilità corretta dei media in un ambiente reattivo può essere difficile. Con un numero sempre maggiore di siti Web che rispettano il design adattivo, è essenziale gestire correttamente le dimensioni e le proporzioni degli elementi.

Il video incorporato è stato uno dei tipi di media più impegnativi da discutere a causa del modo in cui i servizi di terze parti offrono il contenuto. Un tipico incorporamento di YouTube assomiglia a questo:

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

L'elemento iframe contiene quindi un oggetto Flash o un elemento embed. Usando qualcosa come iframe {maxwidth: 100%; } non funzionerà perché gli elementi nidificati non vengono ridimensionati correttamente quando la larghezza cambia. Quindi, dobbiamo fare qualche trucco.

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

Avvolgere l'iframe in un altro elemento ci darà il controllo di cui abbiamo bisogno per aggiungere la corretta funzionalità di risposta al video.

.video {
posizione: relativa;
imbottitura fondo: 56,25%;
altezza: 0;
overflow: nascosto;
}
.video iframe,
oggetto .video,
.video embed {
posizione: assoluta;
in alto: 0;
sinistra: 0;
larghezza: 100%;
altezza: 100%;
}

Impostazione del padding-bottom del wrapper .video: 56,25%; è la magia di questo metodo. L'uso del riempimento significa che la percentuale utilizzata sarà basata sulla larghezza del genitore; "56,25%" creerà un formato 16: 9. Fai i calcoli da solo, se vuoi. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (questa è la nostra percentuale).

Funzionalità

Selezione facile degli elementi

Con la popolarità di un certo numero di librerie JavaScript (jQuery, ad esempio), il comitato ECMAScript e gli standard W3C hanno preso atto di una delle funzionalità principali che mancavano agli sviluppatori in modo nativo: una buona selezione degli elementi. Metodi come getElementByID () e getElementByClassName () erano veloci ma non flessibili e robusti come i motori di selezione provenienti dalla comunità degli sviluppatori; querySelectorAll () era il modo in cui il corpo degli standard imitava parte di quella flessibilità in un metodo di selezione nativo.

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

querySelectorAll () può essere passato a selettori multipli e misti. Per saperne di più su questo.

Creazione di nuovi array

Iterare su un array è qualcosa che diventa faticoso da scrivere. Scrivere e riscrivere i cicli per () non è divertente. Nella versione 1.6 di JS il metodo map () è arrivato fornendo supporto per un modo semplice di iterare e creare un nuovo array da un altro.

var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var welcome = people.map (function (name) {
return ’Hi’ + name + ’!’;
});

Eseguendo questo codice, se dovessimo console.log (welcome) vedresti welcome è un nuovo array ["Hi Heather!", "Hi James!", "Hi Kari!", "Hi Kevin!" ].

Pulisci documenti e oggetti finestra

Le librerie JavaScript di terze parti sono inclini a fare confusione con documenti nativi e oggetti finestra. Questo può essere un problema per altre librerie di terze parti e per lo sviluppatore che le include. Come entrambe le parti, assicurati di lavorare con una versione pulita di entrambi gli oggetti creandone una nuova istanza. Il modo migliore per farlo è creare un elemento iframe, inserirlo nel DOM e archiviare le nuove istanze di quegli oggetti.

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

Sebbene ci siano stati grandi miglioramenti allo stack web, continuare a completare e perfezionare la nostra suite tecnologica per affrontare le sfide che dobbiamo affrontare all'interno del layout, dello stile e della funzionalità del nostro progetto è ancora estremamente importante. Per mantenere un buon ecosistema di crescita dobbiamo incoraggiare gli organismi di standardizzazione e i fornitori di browser a continuare a progredire con nuove specifiche e implementazioni di funzionalità innovative condividendo le nostre conoscenze con altri sviluppatori e designer. Più approfondimenti, meno hack.

Darcy Clarke è uno sviluppatore pluripremiato, co-fondatore della società di temi WordPress Themify e aggregatore di offerte giornaliere DealPage e membro del team jQuery. Lavora in Polar Mobile come sviluppatore UX senior.