Garder votre code de balisage CSS3 Slim

Cet article fait partie de notre "Série de tutoriels HTML5 / CSS3" - dédié à vous aider à faire de vous un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

Les développeurs Web peuvent gagner beaucoup de temps en utilisant une syntaxe CSS3 plus sophistiquée. Les utilisateurs qui visitent votre page attendent le temps de chargement le plus rapide possible. Il est donc de votre responsabilité de limiter la taille des fichiers. Il y a beaucoup de trucs de raccourci avec CSS et en particulier avec le nouveau modèle CSS3.

J'ai rassemblé quelques-unes de ces idées dans le guide ci-dessous. Nous devrions également aborder d'autres domaines tels que la minification de votre code CSS. Il existe des outils disponibles dans le navigateur pour aider les développeurs dans le processus de style, mais vous voudriez combiner des codes courts avec cette réduction de la taille du fichier afin de rationaliser le processus de rendu de votre site Web..

Conseils de base sur le formatage

Avant de passer à la syntaxe CSS actuelle, je souhaite aborder le sujet de Comment écrire votre CSS. Si vous êtes un peu familiarisé avec la conception Web, vous avez probablement déjà vu une feuille de style, probablement plusieurs fois. La première partie de chaque commande est appelée la sélecteur. Ceci cible le type d’élément qui recevra les styles ajoutés à l’intérieur des accolades, également appelé Propriétés.

Niveau en ligne

Avec les styles en ligne, chaque propriété est écrite les unes après les autres avec uniquement des espaces pour les séparer. Cette méthode s’applique mieux aux sélecteurs pour lesquels vous n’avez besoin que de quelques propriétés. Cela vous permettra d'économiser de l'espace sur la page et le défilement de votre feuille de style sera beaucoup plus rapide. Si vous n'avez jamais rencontré de CSS en ligne auparavant, j'ai ajouté un petit exemple ci-dessous ciblant les liens d'ancrage HTML..

un couleur: # 648cc8; poids de police: gras;  a: hover color: # 739cda; texte-décoration: aucun;  a.alt color: # bd4949! important;

Niveau bloc

D'autre part, les propriétés de style de bloc sont entrées sur une seule ligne par paire clé / valeur et sont souvent mises en retrait pour permettre des modifications plus rapides lors de la numérisation du code. Environ 99% des feuilles de style de nettoyage que je rencontre utilisent cette mise en forme, qui est devenue un standard pour de nombreux concepteurs. Si votre sélecteur utilise plus de 6 ou 7 propriétés, il s'agit du meilleur formatage à appliquer..

Lorsque vous prenez en compte les nombreuses nouvelles propriétés CSS3, vous vous rendez compte à quelle vitesse vos feuilles de style se remplissent rapidement. Et beaucoup de ces propriétés prennent en charge les copies spécifiques au navigateur qui nécessitent des entrées de code en double (telles que le rayon de la bordure). Vous pouvez consulter mon exemple d'un ensemble de propriétés de bloc ci-dessous ciblant un exemple de div en wrapper.

.wrap display: block; rembourrage: 6px 10px; arrière-plan: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;

Aucune des manières d'écrire CSS n'est spécifiquement meilleure que l'autre. En fin de compte, c'est à votre développeur de choisir le style que vous préférez, et même en fonction du projet sur lequel vous travaillez. Il est même courant de trouver du CSS où les concepteurs ont mélangé les deux! Je pense personnellement que “travaux en cours” Cela a tendance à être plus facile avec les styles de blocs puisque j'examine constamment la feuille de style pour apporter des modifications ou des ajouts. Mais pour les domaines à fort trafic, réduire au minimum la taille de votre fichier CSS est la meilleure façon de procéder..

Les garder mince

En utilisant les nombreux codes abrégés disponibles dans CSS3, vous pouvez gagner beaucoup de temps de développement. La modification des éléments HTML deviendra beaucoup plus facile si vous comprenez ce jargon qui fait gagner du temps. De plus, votre code apparaîtra plus net et plus facile à consulter..

Le seul inconvénient est que tous les navigateurs ne prennent pas totalement en charge ces propriétés. Il existe des solutions de contournement à de nombreux problèmes existants, tels que Internet Explorer et Netscape. Heureusement, le Web ne cesse de progresser et au fur et à mesure que la popularité de CSS3 augmente, nous allons sans aucun doute expérimenter une augmentation de la compatibilité des navigateurs.

Transparence / opacité des couleurs RGBa

La nouvelle RGBavalue n'est pas vraiment un CSS3 propriété, mais la transparence alpha est spécifique à CSS3 uniquement. Au lieu des valeurs courantes "Rouge Vert Bleu" que vous transmettez pour la couleur, vous pouvez maintenant inclure une quatrième option de transparence des couleurs. De ce fait, les développeurs Web utilisent presque entièrement des fichiers PNG transparents..

La syntaxe de base requiert une valeur comprise entre 0 et 255 dans les trois (3) premiers emplacements et entre 0 et 1,0 dans la position alpha. La gamme de couleurs est spécifique à la quantité de teinte (RVB) visible, 0 étant nul et 255 plein..

 / ** syntaxe ** / background: rgba (nom_valeur, nom_valeur, nom_valeur, nom_valeur, valeur_opacité); / ** exemple ** / div background: rgba (255, 255, 255, 0.3);

Compatibilité multi-navigateur

Une autre propriété opacité peut être utilisé dans certaines circonstances. Cependant, cela affectera l’ensemble de l’élément HTML et le contenu interne, pas seulement l’arrière-plan comme vous l’avez vu dans mon exemple..

Malheureusement, Internet Explorer ne prend pas encore en charge la valeur de couleur RGBa. Vous devez généralement inclure une propriété de repli avec une opacité totale pour ces navigateurs moins standard. Vous configurez cela avec les mêmes valeurs mais en excluant la 4ème (opacité). Ça ressemblerait à quelque chose comme rgba (255, 255, 255)

De plus, Internet Explorer peut être manipulé un peu plus gracieusement par le biais de conditions. Vous pouvez réellement vérifier si le navigateur exécute IE et afficher un filtre propriétaire Microsoft CSS sur commande. J'ai démontré cela dans mon exemple ci-dessous (notez que cela apparaîtrait quelque part dans votre fichier HTML):

Rayon de bordure CSS3

J'ai lu quelques discussions de forum déroutantes sur la création de bordures arrondies avec CSS3 - pas du tout sur la façon dont cela se fait, mais avec une prise en charge pointilleuse du navigateur, les développeurs Web cherchent le code le plus facile à utiliser et fonctionnent comme prévu..

 / ** syntaxe ** / border-radius: en haut à gauche en haut à droite en bas à droite en bas à gauche;

le rayon de la frontière property partage la même syntaxe que la création d'une bordure standard, sauf que dans ce cas, nous ciblons les coins de la boîte. Cette propriété accepte en réalité 1 à 4 valeurs et chacune cible une configuration de coins différente.

1 valeur: Les quatre coins sont arrondis à la même valeur
2 valeurs: La première valeur s'applique à en haut à gauche et en bas à droite tandis que la deuxième valeur frappe en haut à droite et en bas à gauche
3 valeurs: S'applique d'abord à la en haut à gauche coin, le second est à la fois en bas à gauche Et en haut à droite tandis que la 3ème et dernière valeur est appliquée à en bas à droite
4 valeurs: Les 4 valeurs des coins cibles dans l'ordre suivant: en haut à gauche, en haut à droite, en bas à droite, en bas à gauche

 / ** exemple ** / div border-radius: 4px 4px 8px 4px;  div border-radius: 4px 4px 8px;

Donc, dans le code ci-dessus, nous utilisons rayon de la frontière appliquer un effet arrondi 4px sur tout sauf le en bas à droite frontière qui obtient une courbe lissée 8px. Si vous l'avez remarqué, ces deux codes appliqueront le même effet de style..

Compatibilité multi-navigateur

Maintenant le problème principal est que rayon de la frontière n'est supporté que par quelques navigateurs. Internet Explorer 9 a récemment ajouté un excellent support et Opera le rendra également. Cependant, même Opera a créé sa propre propriété avec -o-border-radius ciblant leur moteur de navigateur spécifique. aditionellement -moz-border-radius est supporté par le logiciel Firefox / Gecko et -webkit-border-radius pour Google Chrome / Safari.

Le code ci-dessous est un exemple de mon modèle simple permettant de créer des angles arrondis avec la plus grande prise en charge de navigateur au monde..

 div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-border-radius: 4px 4px 8px 4px;

Envie d'une ombre portée?

L’autre facette vraiment géniale de CSS3 est le support pour boîte et ombres de texte. Cela a été un tel problème pour les développeurs dans le passé puisque les images de fond étaient la seule option réaliste. Cette syntaxe suit en réalité un rôle abrégé beaucoup plus simple que les autres propriétés que nous avons abordées. Il est difficile de se rappeler le bon ordre des valeurs clés au début - mais plus vous mettez de pratique, plus cela deviendra facile..

Malheureusement, Internet Explorer est encore une fois l'intrus. Tous les autres principaux navigateurs, y compris Firefox, Google Chrome, Safari et Opera, prennent totalement en charge la ombre de texte propriété. Les développeurs ont essayé de créer leur propre support IE, mais ils restent très limités. La syntaxe de base est écrite comme suit:

 / ** syntaxe ** / text-shadow: couleur x-offset y-offset blur-radius; / ** exemple ** / div text-shadow: 2px 2px 1px # 111;

Les décalages X et Y indiquent au navigateur la distance à laquelle l’ombre doit apparaître à droite et à gauche. Vous pouvez utiliser des valeurs négatives pour positionner l'ombre au-dessus et à gauche, respectivement. Mais cela semble très délicat alors je recommande les entiers positifs. La valeur du rayon de flou peut également être utilisée pour lisser les bords rigides, si l’ombre du texte ne semble pas naturelle..

Cette syntaxe ne fait qu'examiner la notation de base lors de la création d'un seul effet d'ombre portée. Les concepteurs très avancés ont étudié pour créer même plusieurs ombres simultanément! Je fais référence à cet article de blog génial publié en avril 2011 qui traite en détail des ombres de texte imposantes. Si vous avez le temps, parcourez le contenu simplement pour vous faire une idée des fonctionnalités les plus avancées et assurez-vous de le marquer comme référence future.!

Compatibilité multi-navigateur

Le plus gros détracteur que nous rencontrons est Internet Explorer. Maintes et maintes fois, Microsoft a sorti son propre moteur de rendu de navigateur, dont les performances étaient au mieux inférieures à la normale. Maintenant, même avec CSS3 prenant le contrôle des ombres de texte, IE est toujours en retard. Il existe un excellent site de démonstration où vous pouvez trouver des exemples de code et des commentaires conditionnels CSS traditionnels..

En gros, vous cherchez à vérifier si le navigateur que votre utilisateur exécute correspond à n’importe quelle version d’Internet Explorer 9 ou une version antérieure. Ensuite, en utilisant les filtres MS, nous pouvons appliquer une ombre à n’importe quel élément de texte (ci-dessus, nous utilisons un paragraphe).

Faciliter les transitions

CSS3 transition est la propriété la plus en vogue sur le marché du design depuis les flapjacks de mamie! Les concepteurs de sites Web ont tellement parlé des transitions CSS pures, même si la prise en charge est principalement limitée aux navigateurs Webkit. Vous pouvez bien sûr utiliser des propriétés secondaires pour Mozilla et Opera. Mais la notation abrégée est vraiment captivante, surtout si vous êtes contre les animations JavaScript pour une raison quelconque.

Tout d'abord, jetons un coup d'œil à la propriété de transition d'origine. Cela nécessitera 4 valeurs que vous pourriez également décomposer en propriétés elles-mêmes. Ils correspondent à la transition propriété(quel est l'effet), durée(combien de temps pour le tirer), fonction de chronométrage(changements de vitesse sur l'animation), et retard(nombre de secondes à attendre avant d'animer).

/ ** syntaxe ** / transition: durée de la propriété timing-function delay; / ** exemple ** / img transition-property: opacity; durée de transition: 2s; fonction de transition de synchronisation: facilité; temps de transition: 0.5s;

Vous devriez comprendre intuitivement le but de la plupart de ces propriétés, à l'exception peut-être de la fonction de minutage. Bien que déroutant au début, cette propriété anime simplement votre transition différemment de sorte que l'effet commence plus lentement, se termine plus lentement ou quelque chose de similaire..

W3 Schools a une fonction de chronométrage en ligne qui répertorie toutes les valeurs possibles que vous pouvez essayer. Je me trouve constamment à googler pour ces guides, pourtant ils font de tels marque-pages.

Compatibilité multi-navigateur

Passons maintenant au support complet du navigateur. Par défaut, la propriété de transition est seulement pris en charge par les nouvelles versions de Safari. Pourtant, de nombreux utilisateurs ont encore besoin de la -webkit préfixe qui s'applique également à Google Chrome et aux moteurs de rendu similaires. Ci-dessous est un “finalisé” modèle de bloc de code Je recommande de sauvegarder et d'utiliser si vous avez besoin d'une assistance de transition de la majorité des navigateurs Web.

 img transition: opacity 2s easy-in 1s; -webkit-transition: l'opacité 2s easy-in 1s; / * chrome, safari, troupeau * / -moz-transition: opacité 2s easy-in 1s; / * mozilla + gecko * / -o-transition: opacité 2s facilité par 1; / * opéra * /

Effets de trait de texte

Cette propriété n'est pas énorme et de nombreux concepteurs de sites Web ne l'utilisent pas aujourd'hui. Mais vous pouvez utiliser trait de texte pour créer des effets vraiment soignés avec vos polices. Les navigateurs Webkit tels que Safari et Chrome sont les seuls véritables partisans de cette propriété à ce jour. Opera et Firefox ont des difficultés à restituer des objets texte avec ces mêmes contours.

 / ** syntaxe ** / p -webkit-text-stroke: largeur couleur;  / ** exemple ** / p -webkit-text-stroke: 1px # 222;

Compatibilité multi-navigateur

Si vous ressentez le besoin d'effets de trait de texte, vous devez toujours inclure une couleur de sauvegarde. Mozilla et Opera peuvent s'en sortir, mais les utilisateurs d'Internet Explorer n'ont pas d'autre option. Malheureusement, il s’agit de l’une des propriétés les plus récentes de CSS3 qui n’a tout simplement pas été suffisamment soutenue par la communauté des développeurs de navigateurs Web. Vous devriez passer du temps à vous amuser avec cet excellent outil Web spécialement créé pour créer ces contours de texte CSS3..

Taille de la boîte

La propriété box-sizing vous donne plus de contrôle sur la largeur / hauteur totale de tout élément de bloc. Par défaut, la largeur / hauteur + bordure + marge + remplissage constituent la taille totale d'une boîte. Cependant, utiliser border-box sur votre contenu pousse tous vos marges et marges vers l'intérieur garder la largeur exactement la même. Il n'y a que deux valeurs pour cette propriété, avec contenu-box être le défaut.

div width: 550px; rembourrage: 9px; taille de la boîte: boîte-frontière; / * largeur restera à 550px * /

Comme vous pouvez l’imaginer, cela vous sera utile à un moment de votre carrière en CSS. Le rembourrage et les marges peuvent être très pénibles et lorsque vous ajoutez des bordures, vous avez tendance à perdre la trace des pixels..

Compatibilité multi-navigateur

Opera et IE 8 supportent cette nouvelle propriété par défaut. IE7 et les versions antérieures sont liées à la configuration de la zone de contenu, sauf si vos visiteurs utilisent le mode quirks. Les seuls ajouts que vous devez connaître sur les moteurs de navigateur spécifiquement ciblés sur les kits Web et sur Mozilla.

div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: border-box; / * Firefox * / box-sizing: border-box; / * Opera / IE8 + * /

Colonnes CSS3 pures

Les colonnes sont un peu délicates avec CSS3 mais peuvent être accomplies avec un minimum de code. Les 2 propriétés sur lesquelles vous souhaitez vous concentrer sont nombre de colonnes et écart de colonne. Le nombre fait référence au nombre total de colonnes que vous souhaitez appliquer, tandis que l’espace crée une marge entre elles..

 div # cols nombre de colonnes: 3; écart de colonne: 10px;

Dans mon exemple, nous pouvons voir que l'ID #cols est utilisé comme conteneur. A l'intérieur, nous divisons la division en 3 colonnes avec un espace de 10 pixels entre chacune. En outre, vous pouvez définir largeur de colonne qui est utilisé pour définir la largeur totale de chaque colonne au lieu de lister un nombre solide.

Compatibilité multi-navigateur

Toute version antérieure à IE8 ne pourra tout simplement pas utiliser cette propriété. Mais comme nous l'avons vu dans tous les exemples, Mozilla et Webkit proposent leurs propres solutions pour plusieurs navigateurs. Si vous avez besoin d'un modèle, consultez mon petit exemple de code ci-dessous:

 div # sidebar width: 210px; -moz-column-count: 3; -moz-colonne-gap: 7px; -webkit-column-count: 3; -webkit-colonne-gap: 7px; nombre de colonnes: 3; écart de colonne: 7px;

Personnalisé @ font-face

Vous devez avoir entendu parler de l'excitation suscitée par les polices personnalisées CSS3. En utilisant bien la propriété @ font-face, nous pouvons importer des styles de police externes et les utiliser comme n'importe quelle autre famille. La syntaxe est quelque peu compliquée et vous devrez passer du temps à bien faire les choses. Le bloc pour @ font-face est utilisé pour définir un nom de famille, vous pouvez ensuite l'utiliser dans votre famille de polices propriétés partout!

 @ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Internet Explorer uniquement * /

Vous voyez donc ci-dessus que je ne cible aucun type de police en particulier, mais la syntaxe est ce qui devrait ressortir. Notez que Internet Explorer ne prend en charge que .eot types de police, tandis que .ttf et .otf sont des options populaires pour les autres navigateurs. Il est également important de comprendre que vous pouvez transmettre des URL de police à partir de liens directs, c.-à-d.. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');

Il n’ya pas de réel problème multi-navigateur avec cette configuration car tous les moteurs de rendu peuvent analyser ces types de fichiers de polices. N'oubliez pas que pour le support IE, vous devez inclure une version eot ainsi que votre version originale. Je pense que l'article de W3 Schools contient un catalogue des informations les plus importantes que vous devriez consulter..

Conversion en CSS miniature

Ce sujet est fréquemment débattu car il sert un objectif différent pour chaque projet. D'une part, les développeurs Web passent beaucoup de temps à écrire leurs feuilles de style. Il n’existe aucun moyen de chiffrer ce type de données en texte brut et de les masquer. Si vous essayez d'empêcher les autres de voler votre code de manière flagrante, le mieux que vous puissiez faire est d'encombrer les styles et de supprimer tous les sauts de ligne / espaces..

Ce processus peut être étiqueté comme miniaturisation votre code. Généralement, les développeurs écrivent le CSS au format standard, puis suppriment tous les espaces avant le téléchargement sur le serveur Web. Vous avez ensuite une copie locale à éditer rapidement tout en fournissant une version plus petite du projet en direct. Cette méthode peut évidemment être utile pour réduire le nombre de pages à charger tout en maintenant les pirates de code à distance..

Le lien que j'ai posté ci-dessus, menant à Minify CSS, contient une excellente documentation sur le sujet. Le site fournit également un outil basé sur un navigateur permettant de supprimer ces espaces et les retours de clé de votre code. CSS Compressor est une autre option dotée d’une interface simple qui s’exécute directement dans votre navigateur Web. J'ai aussi entendu de bonnes choses sur Clean CSS, même si je n'ai jamais utilisé l'application moi-même..

Liens connexes

Pour vous aider à avancer, j'ai fourni six liens pratiques sur le Web. Ceux-ci incluent non seulement la notation abrégée, mais aussi des guides et des tutoriels utiles pour accéder à la mise en pratique de ce nouveau code CSS.

Guide du débutant à CSS3
Guide de sténographie CSS
Utilisez-vous CSS3 de manière appropriée??
Contenu CSS et tableau de compatibilité du navigateur
Amélioration progressive CSS3 + = Smart Design
Index complet des propriétés CSS / CSS3

Conclusion

Il faut beaucoup de dévouement et de pratique pour écrire du code CSS pour construire un calendrier concret que vous pouvez suivre pour chaque projet. La plupart des concepteurs de sites Web sont heureux de choisir de nouveaux projets et de nouvelles idées. Vous aurez donc sûrement le temps de mettre en pratique ces conseils de codage utiles. Essayez de copier une petite feuille de référence à votre convenance, au cas où vous ne trouveriez pas de feuilles de triche, ou pire encore, vous perdriez votre connexion Internet.!

Connaissez-vous d'autres propriétés ou raccourcis CSS3 utiles? Nous aimerions entendre vos pensées et vos idées dans les commentaires de la discussion. Les développeurs Web préconisent une plus grande normalisation au sein du W3C et la transition s'est clairement simplifiée. CSS3 fournit des avantages fantastiques et si vous maîtrisez le codage abrégé, cela réduira la taille de vos fichiers et dissuadera les imitateurs de voler votre code.