Médiaforma

All posts tagged webkit

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, nous allons voir comment définir une balise <div> à coins arrondis en CSS3. Plutôt que d’écrire le code CSS à la main, nous allons utiliser un générateur en ligne. Nous nous rendons sur la page http://border-radius.com/.

Il suffit d’entrer un rayon de courbure, en pixels, dans les cases qui apparaissent aux quatre angles du rectangle pour que le code CSS soit généré. Ici par exemple, nous choisissons un rayon de courbure général de 30 pixels et un rayon de courbure de 120 pixels pour le coin supérieur droit.

Remarquez qu’il est possible d’alléger le code en décochant une ou plusieurs cases. Mais attention, le code CSS ne fonctionnera plus dans les navigateurs décochés.

Il suffit maintenant de copier-coller le code CSS dans un document.

Voici le résultat de ce code dans Internet Explorer :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Vous avez vu à quel point il était simple de définir un design sur trois colonnes. Que diriez-vous de faire encore plus simple en utilisant CSS3 ?

Commencez par définir une balise <div> et remplissez-la avec un texte assez long : 300 ou 400 mots par exemple. Ici, cette balise a pour classe troiscol.

La mise en page sur 3 colonnes sera définie dans la feuille de styles styles12.css.

Vous allez devoir définir :

  • Le nombre de colonnes : column-count ;
  • La largeur des colonnes : column-width ;
  • L’espace entre les colonnes : column-gap.

Attention : Tous les navigateurs ne sont pas encore compatibles avec toutes les instructions CSS3. Pour l’instant, seuls Firefox et Chrome le sont, à condition de spécifier les préfixes -moz (pour Firefox) et -webkit (pour Chrome) avant les propriétés colum-count, column-width et column-gap.

Dans cet exemple, le texte sera réparti sur trois colonnes de largeur 160 pixels espacées entre elles de 20 pixels.

Comme prévu, Firefox et Webkit affichent le résultat attendu :

Par contre Internet Explorer (ici en version 9), n’est pas en mesure d’interpréter les instructions CSS :

Les possibilités offertes par CSS3 au niveau du multicolonnage sont certes très intéressantes et aussi, très simple à mettre en œuvre. Cependant, étant donné que les propriétés column ne sont pas compatibles avec tous les navigateurs, je vous conseille de les éviter pour l’instant. Par contre, vous pouvez utiliser les techniques de multicolonnage présentées dans les rubriques précédentes. Elles ont l’avantage de fonctionner sur tous les navigateurs.