css4design.com | Le blogzine du designer web

CSS Selectors — Visualiser les sélecteurs CSS de manière interactive

Bruno Bichet — Mon, 14 May 2012 09:26:44 +0000

CSS Selectors – Si comme moi vous avez parfois des difficultés à distinguer la portée de certains sélecteurs CSS, ce site vous sera très utile. il suffit de sélectionner un sélecteur dans la liste et de regarder les éléments qui sont mis en évidence dans le marquage HTML qui sert d’exemple. Cerise sur le gâteau, la page précise les navigateurs compatibles et affiche la règle CSS en cours.

Exemple pour first-child

La règle CSS

#target p:first-child {font-weight: bold;}

Le marquage HTML


    Where the Buggalo Roam
    Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. No! Don't jump! Dr. Zoidberg, that doesn't make sense.
    
        Does anybody else feel jealous and aroused and worried?
    
    The Mutants Are Revolting
    But, okay! I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.
    Space Pilot 3000
    Now, now. Perfectly symmetrical violence never solved anything.

L’unique paragraphe sélectionné se trouve dans la balise div sans identifiant. Les sélecteurs disponibles sont : first-of-type, first-child, descendant, child, nth-child, adjacent sibling, general sibling, first-line, nth-of-type et last-of-type.

Via @dhoko_

Articles sur le même sujet

Quel est le coeur de métier de l’intégrateur web ?

Bruno Bichet — Thu, 10 May 2012 18:21:08 +0000

Cet article s’inspire d’un tweet de Sophie Drouvroy ‏@cyberbaloo_ qui pose une question apparemment toute simple : Pour vous un intégrateur web est censé savoir faire quoi techniquement ? L’intégrateur web devrait maitriser le couple HTML & CSS et connaitre suffisamment Photoshop pour découper les portions d’images. Il doit également pouvoir travailler au milieu d’un langage côté serveur comme PHP ou client comme Javascript. En effet, il arrive souvent que l’intégrateur intervienne sur des projets déjà en production.

Bien sûr, c’est très réducteur car ce métier est au carrefour de beaucoup d’autres : graphisme, design, ergonomie, accessibilité, développement, référencement (SEO), rédaction, etc. Chaque intégrateur et intégratrice web sera plus ou moins à l’aise avec tout ou partie de ces domaines, en fonction de son background et de ses expériences.

La question de Sophie est en fait plus précise : est-ce que l’intégrateur web doit obligatoirement connaitre Javascript ? Oui, l’intégrateur doit posséder des connaissances suffisantes pour modifier ou adapter du code Javascript ou plus prosaïquement pour rechercher le meilleur plugin jQuery en terme de fonctionnalités, de performances et d’accessibilité.

Qu’est-ce que l’intégration web ?

L’intégrateur web produit généralement des pages web à partir d’indications visuelles ou auditives : maquette plus ou moins détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il créent le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composant la page. Il peut ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript.

Source : Définir le métier « intégrateur web » ou « intégratrice web »

Qui fait de l’intégration web ?

Intégrateur web: Au sens strict, c’est celui ou celle qui découpe une maquette Photoshop (ou tout autre logiciel de traitement d’image) pour la transformer en page web à l’aide principalement de HTML et CSS. Il peut utiliser Javascript, le plus souvent sous la forme de plugin jQuery pour les carousels, les menus déroulants, etc
Webdesigner: C’est le graphiste spécialisé dans le web qui fait l’intégration de ses maquettes,
Développeur front-end: C’est le développeur PHP/Javascript qui fait la partie frontale du site en allant piocher les informations à afficher dans une base de données. Il utilise principalement PHP, Javascript, HTML et CSS.
Webmaster: Chargé d’alimenter le site web dont il a la charge, il peut être amené à coder les contenus ou à décliner des pages existantes.
Community manager: Ne rigolez pas. Oui, le community manager peut être amené à faire de l’intégration web.

La question subsidiaire est de savoir à partir de quel moment on devient un développeur qui fait aussi de l’intégration ?

Articles sur le même sujet

La journée mondiale de l’accessibilité, c’est maintenant !

Bruno Bichet — Wed, 09 May 2012 17:49:58 +0000

Le GAAD (Global Accessibility Awareness Day) dédie cette journée du 9 mai 2012 à la sensibilisation du plus grand nombre à l’accessibilité des contenus et applications digitales (web, logiciel, application mobile, etc.) pour les personnes en situation de handicap.

Demain, le Web sera plus humain

Merci à Monique Brunel (Webatou) d’avoir partagé cette vidéo.

Articles sur le même sujet

Guide de bonnes pratiques HTML & CSS par Google

Bruno Bichet — Thu, 03 May 2012 13:58:58 +0000

Soyez cohérent. C’est la conclusion que nous propose Google dans ce guide des bonnes pratiques de codage à l’usage des développeurs web et autres intégrateurs HTML et CSS. Lorsque vous reprenez du code, il est important de tenir compte du style d’écriture d’origine. Si votre prédécesseur utilise des espaces de part et d’autre des opérateurs arithmétiques, faites de même. Si les commentaires sont encadrés de symboles pour dessiner un bloc, faites de même aussi. Soyez cohérent.

Pour nous aider à choisir une conventions de codage pour les langages HTML et CSS, Google propose une liste de suggestions pour que tous les membres d’un projet partagent le même vocabulaire. L’idée est de se concentrer sur ce que l’on a à dire plutôt que sur comment le dire. Via le blog des nouvelles technologies.

→ Lire Google HTML/CSS Style Guide

Articles sur le même sujet

Editeur de dégradés CSS3 à la mode de Photoshop

Bruno Bichet — Wed, 02 May 2012 17:37:34 +0000

ColorZilla, connu pour ses extensions couleur pour Mozilla et Chrome, met à notre disposition Ultimate CSS Gradient Generator. C’est un générateur de dégradés CSS3 en ligne qui reprend grosso modo l’interface utilisateur de Photoshop pour fournir les déclarations CSS pour l’ensemble des préfixes propriétaires -moz-, -webkit-, -o-, -ms-. Pour Internet explorer 6 à 8, l’outil génère la propriété filter ; pour les versions IE9 et au-delà il y a même le commentaire conditionnel à ajouter pour annuler filter et basculer sur la génération du dégradé via SVG en base 64.

Les dégradés prédéfinis sont une aubaine pour l’intégrateur web : dans la plupart des cas, il suffira de modifier un des 140 exemples proposés.

Les paramètres modifiables sont :

Positionnement des curseurs pour déterminer la longueur, l’opacité et le seuil des couleurs prises en compte,
Ajustement des couleurs via des curseurs dynamique pour la teinte, la saturation et la luminosité,
L’orientation du dégradé : horizontal, vertical, diagonal (droite-gauche), diagonale (gauche-droite) et radial,

Une fenêtre de prévisualisation permet de voir les changements en direct-live avec une case à cocher pour voir comment Internet Explorer se comporte avec les propriétés qu’il ne prend pas en compte.

Les CSS sont prêt à copier-coller avec en option l’équivalent pour SCSS (Sass) et le choix du mode colorimétrique (HEX, RGB, RGBa, HSL, HSLa).

Exemples SCSS (Sass)

// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(228,245,252); // Old browsers

@include filter-gradient(#e4f5fc, #2ab0ed, vertical); // IE6-8

// IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%));

Exemple CSS

background: rgb(228,245,252); /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZjVmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2JmZThmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzlmZDhlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYWIwZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */

background: linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-8 */

Pour IE9 — IE10

Envie de plus de générateur de CSS ?

→ Rendez-vous sur Le petit journal permanent de CSS3 — 100+ ressources pour commencer.

PS : Trois message subliminaux se sont glissés dans ce billet :-)

Articles sur le même sujet

Optimiser les images PNG, JPG, GIF

Bruno Bichet — Sun, 29 Apr 2012 18:01:32 +0000

Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site :

Outils en ligne

PunyPNG — Réduit le poids des fichiers PNG, JPEG et GIF
Smush.it — Compresse les images au format PNG

Logiciels à installer

ScriptPNG et ScriptJPG sont des logiciels pour Windows 32 bits permettant d’optimiser les fichiers images en utilisant différents niveaux de compression pour réduire la taille des fichiers :

ScriptPNG convertit les formats GIF, BMP, JPG, PCX, ou TGA vers le formats PNG.
ScriptJPG optimise les fichiers JPG grâce à un algorithme avec ou sans perte en fonction de la qualité d’image que vous voulez.

Autres outils

→ Comparatif entre les différentes solutions. Merci @nhoizey pour le lien o/

Articles sur le même sujet

Recommandations pour développeurs web front-end

Bruno Bichet — Thu, 26 Apr 2012 16:12:07 +0000

Front-End Development Guidelines — Ce document regroupe un ensemble de bonnes pratiques et de recommandations pour les développeurs web : accessibilité, Javascript (& jQuery), HTML et CSS (& CSS3). Cerise sur le gâteau, vous aurez en prime des ressources complémentaires pour aller plus loin. Les liens qui suivent peuvent aider à la standardisation du code. Ils permettent de s’assurer que les fonctionalités CSS3 et HTML5 pourront être utilisées sur un grand nombre de navigateurs.

jQuery — Javascript sans grumeau
jQuery UI — Est à UX/UI ce que jQuery est à JavaScript
Modernizr — Détectez les fonctionnalités, pas le navigaeur !
RespondJS — Responsive web design dans les vieux navigateurs.
@font-face Generator – Les polices de caractère pour tous, partout.
RaphaelJS — Simplifie le dessin vectoriel dans les navigateurs.
HTML5 Boilerplate — L’alpha de vos projects web même si on pourrait encore faire le ménage.
Twitter Bootstrap — Prototypez rapidement vos applications web.

Merci à @picodix pour le lien o/

Articles sur le même sujet

Lutte des classes CSS !

Bruno Bichet — Wed, 25 Apr 2012 11:37:11 +0000

Les classes CSS sont probablement le meilleur ami de l’intégrateur web, mais peuvent vite devenir un cauchemar si la réflexion ne précède pas l’action. Au-delà des conventions de nommage plus ou moins sémantiques, il existe de nombreuses stratégies pour mettre en place une architecture CSS modulable et évolutive. Un temps décriées au profit des identifiants uniques pour de viles questions de performances, les classes reprennent du poil de la bête. Sans forcément tomber dans la «classite» aiguë, voyons rapidement différentes manières d’organiser nos feuilles de style CSS.

Exemple 1

Exemple de code permettant d’appliquer un style commun aux éléments commençant par .btn- et de décliner des styles spécifiques pour .btn-left ou .btn-right. Larry Botha dans About HTML semantics and front-end architecture.

[class*="btn-"] { } // Styles génériques
.btn-small { }      // Diminuer font-size
.btn-medium { }     // Taille par défaut
.btn-large { }      // Augmenter font-size
.btn-primary { }    // Faire flotter le bouton à gauche
.btn-secondary { }  // Faire flotter le bouton à droite
.btn-left { }       // Ajouter une icône à gauche des boutons
.btn-right { }      // Ajouter une icône à droite des boutons

Exemple 2

On peut aussi s’inspirer du modèle d’architecture de l’exemple précédent en jouant sur les classes multiples :

.btn { }            // Styles génériques pour les boutons
.icon-right { }     // Ajouter une icône à droite de n'importe quel élément
.icon-left { }      // Ajouter une icône à gauche de n'importe quel élément
.btn.icon-right { } // Ajouter une icône à droite du bouton
.btn.icon-left { }  // Ajouter une icône à gauche du bouton

Exemple 3

Autre manière d’application d’un style générique à un élément .item déclinable selon le contexte. Rapide et pratique, cette solution présente tout de même l’inconvénient de ne pas être totalement scalable si vous décider de créer un nouveau contexte tel que #header .item {}

.item {}             // styles génétiques pour item
#cart .item { }     // styles spécifiques pour item dans le contexte du panier
#category .item { } // styles spécifiques pour item dans le contexte des catégories
#product .item { }  // styles spécifiques pour item dans le contexte des produits

Pour rendre ce dernier exemple plus scalable et plus performant (en évitant d’obliger le navigateur de boucler sur trop de sélecteurs), on pourrait utiliser :

.item { }
.item-cart {  }
.item-category { }
.item-product { }

L’approche des classes multiples est moins performante mais permet de modulariser votre feuille de style de manière plus fine. A condition toutefois d’en avoir vraiment besoin. En effet, leur utilisation se traduit forcément par une intrusion accrue des classes CSS dans le code HTML et nécessite plus de règles dans la feuille de style, ce qui peut manquer de… classe !

.item { }
.cart { }
.category { }
.product { }
.item.cart {  }
.item.category { }
.item.product { }

Pour aller plus loin

Organiser ses classes CSS — Comment ça, il n’existe pas de consensus sur l’organisation des feuilles de style CSS ?
SMACSS – Scalable and Modular Architecture for CSS. A flexible guide to developing sites small and large. (cf. SMACSS — Architecture évolutive et modulaire pour CSS
About HTML semantics and front-end architecture – Covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.
Writing efficient CSS selectors – The difference in speed between an ID and a class is almost totally irrelevant.

Articles sur le même sujet

Tutoriels pour apprendre HTML & CSS

Bruno Bichet — Wed, 18 Apr 2012 18:21:02 +0000

Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux.

Learn HTML & CSS présente 10 leçons proposées par @shayhowe pour débuter avec HTML & CSS et développer votre premier site web :

Terminologie, syntaxe et introduction — Avant de commencer ce voyage dans HTML & CSS il est important de bien comprendre les termes utilisés.
Eléments et sémantique — Passage en revue des balises HTML et la sémantique qui leur est associée.
Modèle de boite et positionnement — Comment gérer la taille des éléments (largeur, hauteur, marges internes et externes, bordures) et comment les positionner (positionnement flottant, absolu, fixé).
Typographie — Mettre en gras, en italique, en exergue, utiliser les polices de caractère. Bref, tout ce qu’il faut savoir sur la gestion du texte pour rendre vos compositions plus belles et plus lisibles.
Fonds et dégradés — Les fonds sont un élément important pour attirer l’attention des visiteurs. Apprenez comment mettre une image en background ou un dégradé avec CSS3.
Listes (ordonnées, non-ordonnées et définition) — Les listes font partie de notre vie quotidienne : recettes, choses à faire, instructions, etc.
Images, audio et vidéo — Apprenez à gérer l’affichage des médias sur le web avec les dernières technologies et les fallbacks qui vont bien. Le point également sur les éléments figure et figcaption.
Formulaires — Les bases concernant les formulaires, les bonnes pratiques, des exemples.
Données tabulaires (tableaux) — La gestion des tableaux peut s’avérer complexe. Cette page fait le point sur chaque élément à connaitre.
Bonnes pratiques de développement et ressources — Les bonnes pratique de développement avec HTML & CSS : balisage sémantique et valide, bonne utilisation des attributs (notamment title et alt), séparation du fond et de la forme, les commentaires, les préfixes vendeurs, le regroupement et l’alignement des déclarations, etc.

Un bien joli site très didactique qui donne, pour chaque rubrique, l’ensemble des éléments et des attributs à prendre en compte avec de nombreux exemples pratiques. Un must-read (et oui, toutes ces bonnes choses sont écrites en anglais). Via @pomeh

CSS Débutant — Si vous êtes plus à l’aise avec le français, je vous invite à consulter le site de @PascaleLC où vous pourrez cultiver les standards du web :

Premiers pas en CSS — Pour appréhender progressivement et facilement les feuilles de style et les rudiments du HTML
Tutoriels CSS — Techniques pour réaliser des boutons, des formulaires, des menus, etc.
CSS3 – Créer des ombres, arrondir les coins, ou encore adapter ses pages aussi bien aux grands écrans qu’aux smartphones.
Boite à outils — Besoin d’un générateur de CSS ou de bouton, d’outils de développement ou d ‘une liste de discussion peuplée de gens compétents et sympas ? C’est là que ça se passe.

CSS : l’Art & la Science — Encore en français — et suggéré par LeonsaysHi –, ce tutoriel empreint de poésie et d’humour aborde avec intelligence les neuf points suivants :

Un tango se danse à deux — HTML & CSS, attributs, sémantique, flux
Le pinceau CSS — Syntaxe, sélecteurs, héritage
Au plaisir des yeux — Color, font, text, word
L’abîme — Background, sprite
La dimension de nos espérances — Height, width, margin, padding, border
Au vent favorable — Float, clear
La prise, l’empire du désir — Position : relative, absolute, fixed, static
Pratiques de base — Le petit bassin
Bonnes pratiques — Le grand bassin

Cours de XHTML conforme et accessible – Ce cours proposé par Normand Lamoureux est conçu pour vous permettre d’apprendre le XHTML 1.0 (langage de balisage hypertexte extensible). Un concentré de bonnes pratiques pour créer des pages Web qui répondent aux normes de qualité du W3C.

Plan de cours :

Articles sur le même sujet

Media queries et téléchargement des images par les mobiles

Bruno Bichet — Mon, 16 Apr 2012 14:11:15 +0000

A l’heure où l’on parle beaucoup de Responsive Webdesign via notamment les propriétés CSS3 Media Queries, il est important de s’interroger sur la manière dont les différents périphériques mobiles se comportent au moment de télécharger les images. Disons que vous affichez une image en tant “normal” et que vous décidez de lui appliquer display: none si max-width: 600px. L’idéal serait que le périphérique ciblé ne demande pas l’image afin d’épargner la bande passante.

Media Query & Asset Downloading Results fait état d’une série de tests où il apparait que :

Si vous décidez de ne pas afficher une image, il ne faut pas compter à coup sûr sur la propriété display: none. A la place l’auteur recommande d’utiliser Javascript ou une approche côté serveur.
Pour masquer une image définie en background-image, il est préférable de masquer l’élément parent. Si cela n’est pas possible, il est possible d’utiliser une surcharge CSS avec background-image: none.
Pour permuter des images de fond, il faut les définir toutes les deux à l’intérieur des Medias Queries