Mythe - Ecrire CSS du futur - hideout-lastation.com
 hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs

Mythe - Ecrire CSS du futur

CSS a introduit un grand nombre de nouvelles fonctionnalités telles que les dégradés CSS, les ombres, le rayon de la bordure et l'animation qui peuvent toutes être réalisées uniquement avec CSS. Il y a aussi plusieurs fonctionnalités qui n'ont pas encore été implémentées en raison du support limité des navigateurs pour les variables CSS et les fonctions CSS calc() . Mais si vous ne pouvez pas vraiment attendre l'avenir, regardons Mythe.

Le mythe, contrairement aux autres pré-processeurs qui inventent leur propre syntaxe, utilise la même syntaxe que la spécification standard . Vous pouvez utiliser des variables, effectuer des opérations mathématiques ou de couleur, et écrire de nouvelles propriétés CSS dans son formulaire officiel. Son but est de permettre aux développeurs d'écrire du CSS pur, tout en étant capable d'utiliser la syntaxe future standard, en ce moment.

Commencer

Pour commencer, nous devons installer Myth binary pour pouvoir le compiler au standard CSS actuel. Il n'y a pas d'application GUI comme Codekit ou Koala qui supporte Myth au moment de l'écriture, c'est donc le seul moyen de compiler Myth en format CSS compatible avec le navigateur .

Dans Terminal, tapez la commande suivante:

 npm installer -g mythe 

Vous pouvez ensuite utiliser cette commande ci-dessous, par exemple, pour compiler source.css dans output.css .

 mythe source.css output.css 

Ou, tapez ceci pour surveiller le source.css et le compiler à output.css pour chaque changement.

 mythe --watch source.css output.css 

Le mythe n'introduit pas une nouvelle extension. Cela fonctionne avec .css comme indiqué ci-dessus.

Rédaction de CSS avec Mythe

Le mythe n'introduit pas non plus de fonctions et de règles propriétaires comme les autres pré-processeurs CSS, vous devriez donc pouvoir vous habituer au mythe presque immédiatement. C'est comme CSS simple.

Variables

Commençons par Variables. En CSS, une variable est déclarée, comme ceci:

 : root {var-longueur: 10px; var-color: # 000; } .class {background-color: var (couleur); width: var (longueur); } 

Mythe compile ce code dans un format conforme au navigateur:

 .class {background-color: # 000; largeur: 20px; } 

Vous pouvez consulter notre article précédent sur l'utilisation de variables CSS pour plus de détails.

Opérations mathématiques

Comme mentionné, nous pouvons également effectuer des opérations mathématiques avec la nouvelle fonction calc() CSS3. Nous avons également couvert cette fonction dans notre article précédent: Utilisation de la fonction Calc CSS3.

Prenons notre premier exemple avec:

 : root {var-longueur: 10px; var-color: # 000; } .class {background-color: var (couleur); largeur: calc (var (longueur) / 2); } 

Mythe compile les codes ci-dessus en:

 .class {background-color: # 000; largeur: 10px; } 

Ajustements de couleur

Mythe prend également en charge certaines opérations de couleur ou des ajustements comme dans LESS ou Sass. Une nouvelle fonction standard est proposée pour être incluse dans la spécification CSS appelée color() - y compris un ensemble de fonctions d'ajustement des couleurs telles que tint(), shade() et blend() pour n'en nommer que quelques-unes.

En voici un exemple: nous augmentons la luminosité de la couleur de fond de 80% et diminuons la couleur de la bordure de 50% .

 : root {var-length: 20px; var-noir: # 000; var-white: #fff; } .class {background-color: couleur (var (noir) légèreté (+ 80%)); border: var (border-width) couleur unie (var (blanc) légèreté (- 50%)); largeur: calc (var (longueur) / 2); } 

Ce code produira:

 .class {background-color: rgb (204, 204, 204); bordure: 2px solide rgb (128, 128, 128); largeur: 10px; } 

Autoprefixer

Le mythe ajoutera automatiquement le préfixe du fournisseur aux propriétés CSS. Nous pouvons simplement écrire, par exemple, CSS Box Shadow, de cette façon:

 .class {box-shadow: 2px 1px 0px var (noir); } 

La sortie est:

 .class {-webkit-box-shadow: 2px 1px 0px # 000; box-shadow: 2px 1px 0px # 000; } 

Pensée finale

J'aime l'idée de Mythe. Avec cela, nous pouvons écrire du CSS pur du futur sans se soucier de la prise en charge du navigateur. Et comme il utilise la syntaxe standard, plus tard lorsque tous les navigateurs l'auront implémenté (comme standard), nous n'aurons pas besoin de réécrire tout le code. Je pense que je vais commencer à l'utiliser dans chacun de mes futurs projets. Et vous? Voulez-vous adopter la même chose?

20 trucs et astuces utiles de Microsoft Windows 8.1

20 trucs et astuces utiles de Microsoft Windows 8.1

Avec la mise à niveau de Windows 8 à 8.1, Microsoft a fait plusieurs changements principalement pour améliorer certains aspects que Windows 8 a reçu des critiques . Pour les débutants, il y a le retour du bon vieux bouton Démarrer, la possibilité de créer un diaporama d'écran de verrouillage, et même le support pour l'impression 3D!Nous avon

(Conseils techniques et de conception)

5 mythes des travailleurs à distance, vous devez arrêter de croire

5 mythes des travailleurs à distance, vous devez arrêter de croire

Quelle est la première pensée que vous avez lorsque vous entendez le terme «travailleurs à distance»? Se réveillent-ils à midi, travaillent-ils en pyjamas sur le canapé et ne font presque rien? Ou sont-ils des mamans avec des hordes d'enfants qui courent dans la maison dans le seul but de les empêcher de se concentrer efficacement?Bien que

(Conseils techniques et de conception)