Quando e perché utilizzare il tag di stile al di fuori dei fogli di stile CSS
Pubblicato: 2017-10-29I tag di stile sono una parte piuttosto interessante dello sviluppo web. Voglio dire, sono fondamentali e basilari per il funzionamento del Web attuale, ma la maggior parte delle volte lo stile effettivo del tuo sito deriva dall'importazione e dall'utilizzo di numerosi fogli di stile CSS per temi, plug-in e l'aspetto quotidiano che vedono i tuoi visitatori.
Ma ai vecchi tempi della creazione di siti Web, potevi utilizzare i tag di stile nel corpo stesso del sito Web e sarebbe andato tutto bene. La maggior parte, se non tutto, del CSS per la pagina sarebbe andato sulla pagina stessa, e allora... ha funzionato bene. Al giorno d'oggi, ci sono problemi con questo, ovviamente, come la velocità di caricamento della pagina e gli ordini di esecuzione, e le tecnologie web più mature crescono, meno spesso si desidera utilizzare i tag di stile da soli.
Ci sono, tuttavia, momenti in cui vorresti usarli. A volte, migliorano il tuo flusso di lavoro, mentre altre istanze migliorano davvero la vita dei tuoi utenti, ad esempio l'ottimizzazione dei dispositivi mobili o attirando la loro attenzione su un elemento specifico attraverso uno stile eccezionale.
Uso tipico del foglio di stile
In quasi tutti i siti Web di oggi, vedrai lo stile implementato in questo modo:
<link rel='stylesheet' id='divi-style-css' href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />
Se sei un membro di Elegant Themes che usa Divi (dovresti esserlo!), Questo richiama il foglio di stile completo da cui ho preso questo frammento:
/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
Ora, in teoria, si potrebbe mettere che in un tag stile nell'intestazione di ogni pagina che si scrive. Funzionerebbe sicuramente, ma è una codifica puzzolente e non è affatto a cosa servono i tag di stile.
Tag di stile, uso moderno
Ovviamente il tuo sito web ha fogli di stile CSS come quelli. Li userai. Hai custom.css e stylesheet.css e probabilmente molto di più. Hai capito esattamente come dovrebbe essere il tuo sito e ne sei soddisfatto.
Allora perché hai bisogno dei tag di stile?
Perché i fogli di stile sono soluzioni di grandi dimensioni. Un tag di stile è una soluzione su piccola scala.
I fogli gestiscono l'aspetto migliore del tuo sito, non i singoli elementi nitidi e i punti salienti speciali. A volte, è più lavoro di quanto valga la pena inserire un pezzo di codice una tantum in un foglio di stile.
È allora che i tag di stile diventano davvero utili. Inoltre, a volte è necessario modificare un singolo elemento o effettuare una scelta di stile specifica per determinati dispositivi o casi d'uso. Questo è il momento in cui i tag di stile brillano davvero nello sviluppo web moderno.
Una singola istanza di un elemento
Probabilmente il motivo principale per cui utilizzeresti i tag di stile nel tuo sito è se hai a che fare con un singolo elemento unico sulla tua pagina. Può essere molto fastidioso (per pochissimo, se del caso, restituire) includere lo stile in un file CSS esterno allegato all'id di quell'elemento. Quello che puoi fare, tuttavia, è inserire un tag di stile sull'elemento e andare avanti con la tua giornata.
Per esempio, se si dispone di un widget sidebar che ha bisogno di un tipo di carattere speciale, si potrebbe mettere in un div, dare il div un id CSS, e poi dirigersi verso il foglio di calcolo per includere qualcosa di semplice come {font-family: “Exo” , Arial, sans-serif;} , ma questo è un grosso problema.
L'opzione migliore sarebbe semplicemente fare questo?
<div style="font-family: "Exo", Arial, sans-serif;" />
Bada-bing, bada-boom, hai finito e quel widget ora si distingue perché è l'unico che ottiene quel particolare stile. (E sì, mi rendo conto che l'uso di un font nuovo e diverso probabilmente si scontra con il resto del tuo design. Ma è un esempio.)
Una semplice pagina
A volte, hai una pagina molto semplice e unica sul tuo sito. Potrebbe essere una splash page o una squeeze page. Probabilmente hai solo bisogno di alcune modifiche al tuo stile qui, ma hai bisogno che si applichino a questa pagina e solo a questa pagina.
Quindi puoi usare il tag !important spesso diffamato insieme a style per fare le cose più velocemente e più facilmente che creare un nuovo foglio di stile e collegarlo. Questo metodo è meglio utilizzato se non hai molti nuovi CSS perché caricare una gran quantità di CSS come questo può rallentare il caricamento della pagina. Ma questo lo sapevi già.
Qualcosa di semplice come questo, tuttavia, non peserebbe troppo sulle connessioni dei tuoi utenti e onestamente non vale la pena aggiungerlo a un foglio di stile. (E ad essere onesti, questo CSS è orribile e non vale la pena aggiungerlo a nessun sito. Tee ih!)
<style>
h2, h3, h4 {
font-family: "Exo", Arial, sans-serif!important;
text-align: right;
font-size: 2rem;
color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important;
font-size: 1.2rem;
color: red;
background: #000;}
</style>
Il punto qui, tuttavia, è che HTML 5 è fantastico con l'aggiunta di tag di stile nella testa del tuo sito Web in modo da modificare i fogli di stile esistenti. Anche se i tag !important non sono assolutamente necessari in questo caso (raramente lo sono), mi sembra che questa sia, forse, l'unica volta in cui usarli perché non causeranno molti spaghetti di tag come te (o altri sviluppatori) iniziano a lavorare sul sito perché si applicano solo a questa singola pagina.
Dimensioni multiple della finestra
Le query sui media sono tue amiche. Se non li conosci completamente, ti consiglio vivamente di leggerli. Fondamentalmente, puoi dichiarare quali parametri devono essere soddisfatti affinché determinati CSS abbiano effetto. Principalmente, tuttavia, lo utilizzerai per assicurarti che i tuoi siti funzionino su dispositivi diversi. Quando hai bisogno di una reattività a livello di sito, questa andrà in un foglio di stile.
Ma ancora una volta, se hai una singola pagina o un elemento che devi apparire in modo diverso o non apparire affatto sui dispositivi mobili (o anche risoluzioni desktop più piccole o più grandi), puoi farlo con i tag di stile nell'intestazione.
<style>
@media (max-width: 767px) {
.white_text {
color: #ffffff;
}
.blue_text {
color: #cbe1f3;
}
.white_background {
background-color: #ffffff;
}
.blue_background {
background-color: #003663;
}
#email_form_a {
display:none;
}
</style>
Stile e profilatura
I CSS sono una parte così importante dello sviluppo web ora che è qualcosa che quasi tutti devono conoscere e utilizzare. E ancora più che conoscere i CSS è sapere quando utilizzare gli strumenti sfumati a cui hai accesso.
Quindi non sentirti limitato ai fogli di stile. Certo, sono fantastici e utili e rendono l'intero Web un posto più piacevole in cui stare, ma puoi comunque utilizzare anche semplici tag di stile e dare ai tuoi siti un tocco in più.
Quindi, come usi i tag di stile al di fuori dei tuoi fogli di stile .css? Quali spunti puoi dare alla gente?
Immagine in miniatura dell'articolo di Pensieri creativi / shutterstock.com