Quand et pourquoi utiliser la balise de style en dehors des feuilles de style CSS
Publié: 2017-10-29Les balises de style sont une partie assez intéressante du développement Web. Je veux dire, ils sont fondamentaux et fondamentaux pour le fonctionnement du Web actuel, mais la plupart du temps, le style réel de votre site provient de l'importation et de l'utilisation de nombreuses feuilles de style CSS pour les thèmes, les plugins et l'apparence quotidienne que voient vos visiteurs.
Mais à l'époque de la création de sites Web, vous pouviez utiliser des balises de style dans le corps même du site Web, et ce serait bien. La plupart, sinon la totalité, des CSS de la page iraient sur la page elle-même, et à l'époque… cela fonctionnait bien. De nos jours, il y a bien sûr des problèmes avec cela, tels que la vitesse de chargement des pages et les ordres d'exécution, et plus les technologies Web matures se développent, moins vous souhaitez utiliser les balises de style toutes seules.
Il y a cependant des moments où vous voudriez les utiliser. Parfois, ils améliorent votre flux de travail, tandis que d'autres cas améliorent vraiment la vie de vos utilisateurs - l'optimisation mobile, par exemple, ou en attirant leur attention sur un élément spécifique grâce à un style génial.
Utilisation typique d'une feuille de style
Dans presque tous les sites Web aujourd'hui, vous verrez le style mis en œuvre comme ceci :
<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' />
Si vous êtes un membre d'Elegant Themes qui utilise Divi (vous devriez l'être !), cela appelle la feuille de style complète dont j'ai pris cet extrait :
/*
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;
}
Maintenant, en théorie, vous pourriez mettre cela dans une balise de style dans l'en-tête de n'importe quelle page que vous écrivez. Cela fonctionnerait certainement, mais c'est du codage puant et pas du tout à quoi servent les balises de style.
Étiquettes de style, utilisation moderne
Bien sûr, votre site Web a des feuilles de style CSS comme celles-ci. Vous allez les utiliser. Vous avez custom.css et stylesheet.css et probablement bien plus que cela. Vous avez trouvé exactement à quoi devrait ressembler votre site et vous en êtes satisfait.
Alors pourquoi avez-vous besoin des balises de style ?
Parce que les feuilles de style sont des solutions globales. Une balise de style est une solution à petite échelle.
Les feuilles gèrent la plus grande apparence de votre site, pas les éléments individuels essentiels et les points saillants spéciaux. Parfois, c'est plus de travail qu'il n'en vaut la peine de jeter un seul morceau de code dans une feuille de style.
C'est alors que les balises de style deviennent vraiment utiles. De plus, vous devez parfois modifier un seul élément ou faire un choix de style spécifique pour certains appareils ou cas d'utilisation. C'est à ce moment-là que les balises de style brillent vraiment dans le développement Web moderne.
Une instance unique d'un élément
La principale raison pour laquelle vous utiliseriez des balises de style sur votre site est probablement si vous traitez un seul élément unique sur votre page. Cela peut être très compliqué (pour très peu, voire aucun, retour) d'inclure le style dans un fichier CSS externe attaché à l'identifiant de cet élément. Ce que vous pouvez faire, cependant, est de jeter une balise de style sur l'élément et de continuer votre journée.
Par exemple, si vous avez un widget de barre latérale qui a besoin d'une police spéciale, vous pouvez le mettre dans un div, lui donner un identifiant CSS, puis vous diriger vers votre feuille de calcul pour inclure quelque chose d'aussi simple que {font-family: "Exo" , Arial, sans-serif;} , mais c'est beaucoup de problèmes.
La meilleure option serait de le faire simplement ?
<div style="font-family: "Exo", Arial, sans-serif;" />
Bada-bing, bada-boom, vous avez terminé et ce widget se démarque maintenant car il est le seul à avoir ce style particulier. (Et oui, je me rends compte que l'utilisation d'une police nouvelle et différente entre probablement en conflit avec le reste de votre conception. Mais c'est un exemple.)
Une page simple
Parfois, vous avez une page unique très simple sur votre site. Il peut s'agir d'une page de démarrage ou d'une page de compression. Vous n'avez probablement besoin que de quelques ajustements à votre style ici, mais vous en avez besoin pour les appliquer à cette page, et à cette page seule.
Vous pouvez donc utiliser la balise !important souvent décriée avec le style pour faire avancer les choses plus rapidement et plus facilement que de créer une nouvelle feuille de style et de la lier. Cette méthode est mieux utilisée si vous n'avez pas beaucoup de nouveaux CSS, car le chargement de oodles de CSS comme celui-ci peut ralentir le chargement des pages. Mais vous le saviez déjà.
Cependant, quelque chose de simple comme celui-ci ne mettrait pas trop de pression sur les connexions de vos utilisateurs, et honnêtement, cela ne vaut pas la peine d'être ajouté à une feuille de style. (Et pour être juste, ce CSS est hideux et ne vaut pas la peine d'être ajouté à un site. Tee hee!)
<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>
Le point ici, cependant, est que HTML 5 est sympa avec l'ajout de balises de style dans la tête de votre site Web afin que vous puissiez modifier les feuilles de style existantes. Bien que les balises !important ne soient certainement pas nécessaires dans ce cas (elles le sont rarement), j'ai l'impression que c'est peut-être la seule fois pour les utiliser car elles ne vont pas provoquer beaucoup de spaghettis de balises comme vous (ou autres développeurs) commencent à travailler sur le site car ils ne s'appliquent qu'à cette seule page.
Plusieurs tailles de fenêtre
Les requêtes médiatiques sont vos amies. Si vous n'êtes pas totalement familier avec eux, alors je vous suggère fortement de les lire. Fondamentalement, vous pouvez déclarer quels paramètres doivent être remplis pour que certains CSS prennent effet. La plupart du temps, cependant, vous l'utiliserez pour vous assurer que vos sites fonctionnent sur différents appareils. Lorsque vous avez besoin d'une réactivité à l'échelle du site, cela ira dans une feuille de style.
Mais encore une fois, si vous avez une seule page ou un seul élément dont vous avez besoin pour apparaître différemment ou pas du tout sur mobile (ou même des résolutions de bureau plus petites ou plus grandes), vous pouvez le faire avec des balises de style dans l'en-tête.
<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>
Stylin' et profilin'
CSS est une partie si importante du développement Web maintenant que presque tout le monde doit le connaître et l'utiliser. Et encore plus que de savoir CSS, il faut savoir quand utiliser les outils nuancés auxquels vous avez accès.
Ne vous sentez donc pas limité aux feuilles de style. Bien sûr, ils sont fantastiques et utiles, et ils font de l'ensemble du Web un endroit plus agréable, mais vous pouvez toujours utiliser des balises de style simples et donner à vos sites un peu plus d'éclat.
Alors, comment utilisez-vous les balises de style en dehors de vos feuilles de style .css ? Quelles informations pouvez-vous donner aux gens ?
Image miniature de l'article par Creative Thoughts / shutterstock.com