Archives des tags : css

Pas encore de description pour le tag css. Suggérez à l'administrateur du site de d'y remédier.

Sass & Compass

Sass et Compass : Scout, Prepros ou ligne de commande ?

CSS évolue mais pas assez vite semble-t-il aux yeux de certains, ce qui explique l’apparition des préprocesseurs comme Less ou Sass qui ont ajouté les variables, les sélecteurs imbriqués, les calculs, etc. Sass et Compass sont des gemmes Ruby qui s’utilisent habituellement en ligne de commande. Toutefois, il existe des logiciels permettant de compiler des fichiers Sass et Compass en CSS. Ces logiciels peuvent être utiles, dans un premier temps, pour aplanir la courbe d’apprentissage : Scout pour sa simplicité rassurante et Prepros pour la richesse de ses options (en plus de sa capacité à compiler une foultitude d’autres langages). Je terminerai bien évidemment avec l’utilisation de la ligne de commande, bien plus efficace sur le moyen et long terme (même si on utilise Windows 8.1). →

HTML & CSS

Faut-il sauver le soldat CSS ?

Le monde des CSS est agité par des questions existentielles. Dernier débat à la mode : on reproche à CSS de ne pas être un langage de programmation. Ce qui gêne dans CSS ? Une broutille ! Principalement le « C » de cascade et le « S » de stylesheet, reste le style. Il est vrai que la cascade est un mécanisme puissant qui peut poser des problèmes de prédictibilité sur les styles d’un éléments donné. Pas facile, en effet, de prédire le destin d’un élément situé en bout de chaine une fois qu’il est sous la cascade. Voici un résumé du débat en question. →

Extension WordPress

Pastacode : la coloration syntaxique de Prism.js dans WordPress

Pastacode coloration syntaxique de prism pour wordpress

Suite à une requête de @GizMecano concernant le manque de coloration syntaxique sur les bouts de code présents dans mes articles, j’ai installé le script Prism.js dont le thème Coy colle particulièrement avec ma charte graphique. Prism, c’est cool à condition d’avoir envie d’ajouter à la main le type de langage utilisé sur chaque balise <code> à colorer ! C’est pourquoi, je me suis tourné vers l’extension Pastacode de @BoiteAWeb et @willybahuaud qui reprend Prism tout en permettant d’ajouter du code directement depuis la barre d’outils de WordPress. →

Conception de site web

Des pages web de plus de 2 Mo, à qui la faute ?

Graphique représentant le temps moyen de réponse par type de fichiers

On aurait pu croire que 2015 serait l’année de la performance web, mais on s’est trompé. Le poids moyen d’une page web a augmenté de 7,5% en 5 mois pour dépasser les 2 Mo. C’est en tout cas ce que nous rapporte Craig Buckler dans l’article 2Mb Web Pages: Who’s to Blame? qui cite le rapport publié dernièrement par http archive. Ce dernier a rassemblé les chiffres de près de 500 000 pages, et les nouvelles ne sont pas très bonnes : →

Extension WordPress

WP Super Cache et Autoptimize — Optimiser les performances de WordPress

La mise en cache et la minification des fichiers HTML, CSS et Javascript sont deux solutions permettant d’optimiser les performances de son site WordPress à moindre frais. Il suffit en effet d’installer deux extensions, d’effectuer quelques réglages, et l’affaire est dans le sac. Découvrez WP Super Cache et Autoptimize, les deux extensions que j’ai choisies pour transformer mon canasson préféré en cheval de course. →

HTML & CSS

Flexible Math — Convertir des pixels en pourcentages

Le meilleur moyen pour rendre son site internet responsive consiste à utiliser des valeurs en pourcentage, tandis que le meilleur moyen de mettre en place une maquette, passe souvent par les pixels. Pour mettre tout le monde d’accord, il existe un mode de calcul aussi simple qu’efficace pour passer des pixels aux pourcentages : cible ÷ contexte = résultat. En d’autres termes, on prend la valeur de la cible en pixel, on la divise par le contexte (la valeur en pixel de l’élément parent) pour obtenir un ratio qu’il suffira de multiplier par 100 pour avoir les précieux pourcentages. →

Intégration web

Basehold.it — Afficher une ligne de base

Basehold.it permet d’afficher une ligne de base sur vos éléments html (balise html, body ou le container de votre contenu principal) pour faciliter le calage de votre grille verticale, la petite soeur de la grille horizontale, composée de colonnes. Pour l’utiliser, rien de plus simple : il suffit de faire un lien dans un appel de feuille de style, par exemple <link rel="stylesheet" href="http://basehold.it/24"> affichera une ligne de base d’une valeur de 24 pixels. →

Tutoriel

Equivalents natifs de fonctions jQuery

On a tous tendance à dégainer la bibliothèque Javascript jQuery dès que l’occasion se présente. Or, il faut garder à l’esprit que les fonctions intégrées à Javascript en ont sous le pied ! Des exemples ? L’article Native equivalents of jQuery functions fait un tour rapide quelques fonctions jQuery les plus utilisés avec leur équivalent Javascript « natif » bien plus rapide : sélecteurs, manipulation du DOM, classes CSS, modification des propriétés CSS.

Typographie

Bariol, la cerise sur la typo

Bariol est une toute nouvelle famille de police de caractère créée par atipo. Elle est arrondie et légèrement condensée. Familière mais pas «mièvre», Bariol a la particularité — essentielle à mes yeux — d’être particulièrement lisible, même dans les petits corps, grâce à des formes sobres et une construction sans fioriture. →

WP News

WordPress Basics 0.5.1 — HTML5 Boilerplate 4.0.1 et Caption shortcode

Après plusieurs mois sans modification, j’ai fais pas mal de changements dans Basics (et accessoirement dans Beyond Basics) en raison du passage de la version 3.0.2 de HTML5 Boilerplate à la version 4.0.1, d’une part, et de l’évolution de la syntaxe du shortcode pour l’insertion des images depuis WordPress 3.4, d’autre part. →