Exemple pour first-child

La règle CSS

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

Le marquage HTML

<div id="target">
    <h2>Where the Buggalo Roam</h2>
    <p>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.</p>
    <div>
        <p>Does anybody else feel jealous and aroused and worried?</p>
    </div>
    <h2>The Mutants Are Revolting</h2>
    <p>But, okay! I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</p>
    <h2>Space Pilot 3000</h2>
    <p>Now, now. Perfectly symmetrical violence never solved anything.</p>
</div>

Via @dhoko_

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Guide de bonnes pratiques HTML & CSS par Google
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Le petit journal du web — WordPress, développement web, etc.

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

• CSS Selectors — Visualiser les sélecteurs CSS de manière interactive
• Quel est le coeur de métier de l’intégrateur web ?
• Recommandations pour développeurs web front-end
• Lutte des classes CSS !
• Tutoriels pour apprendre HTML & CSS

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

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

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

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• HTML5 et CSS pour l'intégrateur web
• CSS3 Generator : éditeur de CSS3
• Nouvelle méthode de remplacement de texte par une image

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

• AdvanceCOMP
• CryoPNG
• OptiPNG
• PNGCrush
• PNGOptimizer
• PNGOUT
• PNGRewrite
• PNGWolf
• TruePNG
• DeflOpt
• defluff
• Huffmix
• PrePNG
• pngquant
• pngnq
• Color Quantizer

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

Articles sur le même sujet

• 31 outils en ligne simples et efficaces pour les travailleurs du web
• 15 « Photoshop-like » en ligne testés et commentés
• PNGHack — La fin de 7 ans de malheur avec IE 6
• [résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…
• Opacité CSS et effet de trame avec GIF/PNG transparent

• 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

• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• 139 ressources Javascript et jQuery
• Guide de bonnes pratiques HTML & CSS par Google
• 35 blogs de développeurs web

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

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

.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

• Quel est le coeur de métier de l’intégrateur web ?
• Guide de bonnes pratiques HTML & CSS par Google
• Tutoriels pour apprendre HTML & CSS
• Check your <body> avec le W3C
• SMACSS — Architecture évolutive et modulaire pour CSS

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 :

1. Terminologie, syntaxe et introduction — Avant de commencer ce voyage dans HTML & CSS il est important de bien comprendre les termes utilisés.
2. Eléments et sémantique — Passage en revue des balises HTML et la sémantique qui leur est associée.
3. 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é).
4. 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.
5. 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.
6. Listes (ordonnées, non-ordonnées et définition) — Les listes font partie de notre vie quotidienne : recettes, choses à faire, instructions, etc.
7. 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.
8. Formulaires — Les bases concernant les formulaires, les bonnes pratiques, des exemples.
9. Données tabulaires (tableaux) — La gestion des tableaux peut s’avérer complexe. Cette page fait le point sur chaque élément à connaitre.
10. 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 :

1. Premiers pas en CSS — Pour appréhender progressivement et facilement les feuilles de style et les rudiments du HTML
2. Tutoriels CSS — Techniques pour réaliser des boutons, des formulaires, des menus, etc.
3. CSS3 – Créer des ombres, arrondir les coins, ou encore adapter ses pages aussi bien aux grands écrans qu’aux smartphones.
4. 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 :

1. Un tango se danse à deux — HTML & CSS, attributs, sémantique, flux
2. Le pinceau CSS — Syntaxe, sélecteurs, héritage
3. Au plaisir des yeux — Color, font, text, word
4. L’abîme — Background, sprite
5. La dimension de nos espérances — Height, width, margin, padding, border
6. Au vent favorable — Float, clear
7. La prise, l’empire du désir — Position : relative, absolute, fixed, static
8. Pratiques de base — Le petit bassin
9. 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 :

1. Les outils
2. Balisage et absence de balisage
3. Les en-têtes et les paragraphes
4. Créer et imbriquer des listes
5. Votre premier fichier valide
6. Parenthèse sur le rôle du langage CSS
7. Faire des citations
8. Le gras, l’italique et compagnie
9. Créer des liens hypertextes

Articles sur le même sujet

• Check your <body> avec le W3C
• Quelques notes — Programme de formation HTML & CSS
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur la balise h1 avec HTML5
• HTML5 et CSS pour l'intégrateur web

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

Articles sur le même sujet

• Nouvelle méthode de remplacement d’image en CSS
• La journée mondiale de l’accessibilité, c’est maintenant !
• Check your <body> avec le W3C
• Nouvelle méthode de remplacement de texte par une image
• 11 vidéos pour comprendre l'accessibilité du point de vue… des mal-voyants

• Style Bootstrap — Une page web pour styler visuellement tous les composants de Bootstrap : typographie, boutons, formulaires, etc.
• Responsinator– Entrez l’URL de votre choix et admirez (ou pas) l’affichage de votre page dans les formats mobiles suivants :
  • iPhone portrait 320 x 480
  • iPhone landscape 480 x 320
  • Crappy Android portrait 240 x 320
  • Crappy Android landscape 320 x 240
  • Nicer Android portrait 295 x 515
  • Nicer Android landscape 515 x 295
  • iPad portrait 768 x 1024
  • iPad landscape 1024 x 768
  • Kindle portrait 600 x 1024
  • Kindle landscape 1024 x 600
• Triangles CSSS– Quatre exemples de code CSS pour faire des triangles sans image :

  .arrow-up {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid black;
  }
  .arrow-down {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #f00;
  }
  .arrow-right {
      width: 0;
      height: 0;
      border-top: 60px solid transparent;
      border-bottom: 60px solid transparent;
      border-left: 60px solid green;
  }
  .arrow-left {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 10px solid blue;
  }

  → Voir Des bulles de dialogue en CSS3 sans image pour aller plus loin.
• Dive into Responsive Prototyping with Foundation — Article didactique qui présente la mise en œuvre du framework Zurb Fondation avec un exemple de prototype.
• Responsive.is — Ajoutez votre URL dans le champs adéquat et sélectionnez les périphériques mobiles : Tablet Landscape, Tablet Portrait, Smartphone Landscape, Smartphone Portrait. L’interface s’adapte progressivement aux différentes dimensions.

Articles sur le même sujet

• Quelques liens sur les Media Queries en CSS3
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• 11 vidéos pour comprendre l'accessibilité du point de vue… des mal-voyants
• Le Petit Journal du Web — 09/2011
• WordPress de A à Z — E comme Extensions (les plugins)

EM Calculator

Si vous voulez utiliser une taille par défaut de 14px pour le texte, il vaut mieux appliquer une taille de 0.875em sur le body et sortir la calculette pour les autres tailles. Si vous avez la flemme d’utiliser votre calculatrice, EM Calculator est fait pour vous.

EM Calculator est un outil créé en JavaScript par Piotr Petrus pour convertir des px en em pour simplifier l’usage des em.

EM Calculator est un service simple et efficace pour déterminer l'équivalent em d'une taille exprimée en px.

Une des pierres d’achoppement des em's est qu’il faut remettre un coup de font-size: 1em; lorsque les balises sont imbriquées. Pour pallier cet inconvénient, EM Calculator permet de choisir sur quels niveaux de profondeur le calcul doit s’effectuer. Bien sûr, certains diront que l’unité rem est faite pour cela, mais l’utilisation de EM Calculator n’est tout de même pas si rédhibitoire.

Les plus

Comme vous pouvez le constater sur l’illustration ci-dessus, il est possible de choisir entre un élément frère (sibling) ou enfant (child). Parmi les options, nous pouvons modifier la taille par défaut de l’agent utilisateur (en général 16px). Cerise sur le gâteau, on peut sauvegarder plusieurs sessions de travail.

Le moins

Il ne semble pas possible d’exporter les CSS.

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• Une solution CSS accessible pour remplacer du texte HTML par une image
• CSS Selectors — Visualiser les sélecteurs CSS de manière interactive
• Quel est le coeur de métier de l’intégrateur web ?
• Guide de bonnes pratiques HTML & CSS par Google