Html-css ( 10 / 11 articles - Voir la liste )

Astuce Centrer une popin Boostrap 3

Sur le site de Bootstrap, voici le code pour afficher un bouton ouvrant une popin :

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Par défaut la popin sera placée en haut de la fenêtre, ce qui n'est pas toujours très joli :

Popin Bootstrap 3 non centrée verticalement

Si vous préférez que vos popin soient centrées verticalement, vous pouvez ajouter ces quelques lignes à votre feuille de style :

.modal.in .modal-dialog {
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}

Vous obtenez alors ce résultat :

Popin Bootstrap 3 centrée verticalement

Astuce Introduction aux micro-données

Principe

Les micro-données permettent de renforcer la sémantique de votre code HTML. Elles sont interprétées par les principaux moteurs de recherche (Google, Yahoo, Bing, ...).

Par exemple, si vous présentez un film, vous aller pouvoir indiquer que telle valeur est le titre du film, telle autre est sa date de sortie, son réalisateur, ...

C'est ce genre de données qui aide Google à créer les encarts à droite des résultats de recherche :

Recherche Google

De très nombreuses choses peuvent être décrites grâce aux micro-données (évènement sportif, adresse, personne, recette de cuisine, ...).

Elles sont de plus organisées avec un système d'héritage (comme en langage objet). Le site schema.org récapitule tout ça de manière arborescente.

Application

Les micro-données se présentent sous forme d'attributs HTML, utilisables sur n'importe quelle balise du DOM à l'intérieur du body.

Exemple :

<p itemtype="http://schema.org/PostalAddress" itemscope="">
    <span itemprop="streetAddress">1 Grande Rue</span><br />
    <span itemprop="postalCode">75000</span>
    <span itemprop="addressLocality">Paris</span>
    <meta itemprop="addressCountry" content="FR" />
</p>

Cet exemple va afficher un paragraphe avec les informations suivantes :

1 Grande Rue
75000 Paris

Explications :

  • Pour annoncer que le paragraphe va contenir une adresse postale, on lui ajoute l'attribut itemtype, avec pour valeur l'URL du schéma de données à utiliser. On ajoute également l'attribut itemscope pour lier la micro-donnée à l'élément p.
  • Pour détailler les différentes parties de l'adresse, on les délimite via une balise HTML (span ici par exemple) à laquelle on ajoute l'attribut itemprop contenant le nom de la propriété correspondante.
  • Certaines propriétés sont obligatoires et doivent être définies même si on ne veut pas les voir à l'écran. Pour les ajouter au code HTML sans les afficher (et sans CSS particulier), on utilise une balise meta autofermante, dont le contenu est spécifié via l'attribut content.

Bonus

Pour valider vos micro-données et savoir comment Google les interprétera, il fournit un outil de validation à cette adresse : https://developers.google.com/structured-data/testing-tool/

Le site alsacréations propose un article plus détaillé sur les micro-données.

Astuce Centrer verticalement en CSS

Pour centrer un élément par rapport à son conteneur, il faut utiliser la propriété CSS vertical-align avec pour valeur middle :

vertical-align: middle;

Initialement, cette propriété n'était utilisable que dans un tableau, où les cellules ont un display particulier.

Elle est maintenant disponible pour tout élément dont le display est inline-block.

Voici un exemple avec une image, un bloc de texte et un tableau centrés verticalement par rapport à un conteneur :

Centrer verticalement en CSS

Voici le code HTML associé :

<html class="no-js" lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Centrer verticalement en CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">[...]</style>
</head>
<body>
    <div class="container">
        <!-- Image -->
        <div class="child item-1">
            <img src="image.jpg" alt="" />
        </div>

        <!-- Texte -->
        <p class="child item-2">
            Duis eget eros neque. Nunc ante ex, scelerisque vehicula orci in, ultrices lacinia lorem. Aenean tincidunt a felis gravida egestas. Suspendisse potenti. Nullam congue commodo euismod. Sed non rutrum orci. Proin eu neque finibus augue aliquam hendrerit in vitae odio. Aenean sagittis mauris quis eros egestas rutrum. Nam tempor ante id lacus placerat dignissim. Aliquam mollis ligula nec justo consequat, id laoreet libero tincidunt. Sed accumsan hendrerit velit et fermentum. Morbi aliquet rhoncus ante vitae posuere. Integer malesuada augue turpis, vel egestas ligula pharetra nec. Quisque ut malesuada mi, non consequat nunc. Nullam posuere, enim quis ullamcorper cursus, lectus nunc pulvinar tellus, in dignissim augue lacus eget sapien.<br />
            Sed mollis metus tortor. Proin pulvinar augue sed augue sodales, vel interdum mi interdum.
        </p>

        <!-- Tableau -->
        <table class="child item-3">
            <tr>
                <th>Colonne 1</th>
                <th>Colonne 2</th>
            </tr>
            <tr>
                <td>Valeur 1</td>
                <td>Valeur 2</td>
            </tr>
            <tr>
                <td>Valeur 1</td>
                <td>Valeur 2</td>
            </tr>
        </table>
    </div>
</body>
</html>

Et le CSS :

img {
    max-width: 100%;
}
.container {
    display: inline-block; /* Ou block */
    line-height: 400px; /* Facultatif si l'un des enfants prend toute la hauteur */
    background-color: #EAF3FB;
}
.child {
    display: inline-block; /* Obligatoire */
    padding: 20px;
    line-height: 1; /* Facultatif si le parent n'a pas de line-height. */
    vertical-align: middle; /* Obligatoire */
    background-color: #FFFFFF;
}
.item-1 {
    width: calc(15% - 40px);
}
.item-2 {
    width: calc(45% - 40px);
}
.item-3 {
    width: calc(40% - 8px); /* Dernier élément donc -40px inutile */
}

Remarque :

Seules les propriétés marquées comme obligatoires/facultatives concernent le centrage vertical.

Bonus :

  • max-width: 100%; évite que l'image ne dépasse de son conteneur lorsque la fenêtre est rétrécie en largeur
  • width: calc(40% - 40px); permet de définir la taille de l'élément en pourcentage par rapport à son parent, tout en utilisant un padding. En toute logique la somme des padding left et right doit être soustraite au %. Il est à noter que le dernier élément n'a pas besoin de -40px, car son padding est intégré automatiquement lors du calcul de sa largeur. (calc() est reconnu depuis IE9 seulement)
  • width: calc(40% - 8px); permet de gérer la marge automatique ajoutée entre les éléments inline-block. Pour une taille de police non modifiée, un espace fait 4px de large. On a 3 éléments, donc 2 espaces, soient les 8px. Sans cette histoire d'espace width: 40%; aurait suffit.

Astuce Éviter les flottements en CSS avec clear

Lorsque vous faites flotter un bloc en CSS, le suivant essaiera de s'afficher à droite du premier (avec float: left;), ou à sa gauche (avec float: right;).

Si vous voulez qu'il s'affiche à la ligne, vous avez plusieurs solutions :

  • Supprimer le float du premier bloc
  • Définir des largeurs au deux éléments, pour qu'ils ne rentrent pas côte à côte.
  • Utiliser la propriété clear: left.

La propriété clear peut prendre principalement 4 valeurs : none (par défaut), left, right et both.

  • Si la valeur sur un bloc est à left, et qu'un flottant se trouve à sa gauche, le bloc ira à la ligne.
  • Si la valeur sur un bloc est à right, et qu'un flottant se trouve à sa droite, le bloc ira à la ligne.
  • Si la valeur sur un bloc est à both, et qu'un flottant se trouve à sa droite ou à sa gauche, le bloc ira à la ligne.
  • Si la valeur sur un bloc est à none, qu'un flottant se trouve à côté et qu'il a la place il se positionnera à côté.

Exemple d'utilisation :

<div style="width: 90px;">Mon bloc conteneur avec une largeur de 90px</div>
    <div style="float: left; width: 30px;">Mon premier flottant</div>
    <div style="float: left; width: 30px;">Mon deuxième flottant</div>
    <div style="clear: left; width: 30px;">Mon bloc à afficher en dessous</div>
</div>

Explication :

Le troisième bloc a la place de s'afficher à droite des deux premiers.

  • Sans clear: left;, il s'affiche à côté d'eux.
  • Avec clear: left;, il s'affiche en dessous.

Astuce Simuler le readonly sur un bouton checkbox

Dans un formulaire, vous pouvez brider les éléments input, pour ne pas qu'ils soient modifiables par les utilisateurs.

Cela revient au même qu'un champ de type hidden, sauf qu'il sera visible par l'utilisateur. Malheureusement cet attribut ne fonctionne que sur les champs input de type text.

<!-- Champ texte : le readonly fonctionne -->
<input type="text" name="champ1" id="champ1" value="valeur1" readonly="readonly" />

<!-- Champ checkbox : le readonly ne fonctionne pas -->
<input type="checkbox" name="champ2" id="champ2" value="valeur2" readonly="readonly" />

Pour simuler le même fonctionnement avec un champ input de type checkbox, vous pouvez utiliser l'attribut disabled :

<!-- Champ checkbox avec disabled -->
<input type="checkbox" name="champ2" id="champ2" value="valeur2" disabled="disabled" />
<input type="hidden" name="champ2" id="champ2Hidden" value="valeur2" />

Explications :

  • La checkbox étant disabled, sa valeur ne sera pas envoyée par le navigateur à la page cible du formulaire.
  • Pour parer à ça, on la couple a un input de type hidden, avec le même attribut name et la même valeur. C'est lui qui enverra la donnée.

Astuce Forcer le rendu du navigateur d'Internet Explorer et Google Chrome

Lorsque vous affichez une page sous Internet Explorer, il arrive très souvent que ce navigateur n'utilise pas le moteur de rendu le plus récent. Par exemple, vous naviguez avec IE9 et pourtant le moteur de rendu utilisé est celui d'IE7.

Cela est problématique car toutes les propriétés CSS reconnues par IE9 mais pas par IE7 ne fonctionnent donc pas.

Ce comportement peut également se produire avec Google Chrome. Pour connaitre le moteur de rendu utilisé par IE, appuyez sur F12 (à partir de IE8).

Pour éviter ce problème, vous pouvez forcer le navigateur à utiliser son dernier moteur de rendu, via une balise meta dans votre head HTML :

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Astuce Rendre son site responsive

Pour qu'un site s'affiche correctement quel que soit le terminal de visualisation (mobile, tablette, ordinateur, ...), il faut adapter son code HTML et surtout son CSS. En effet, en fonction de la résolution du terminal, l'apparence d'un site peut être totalement dégradée.

Côté HTML

Le nombre de pixels affichables par un terminal mobile ne correspond pas au nombre de pixels CSS utilisables par le navigateur. Un article complet sur le sujet est disponible sur le site alsacréations.

Concrètement, pour synchroniser ces deux "types de pixels", ajoutez la balise meta suivante dans votre head HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Côté CSS, les media queries

CSS 3 introduit un nouvel élément : les media queries. Elles permettent de définir des propriétés de manière conditionnelle.

Vous pouvez par exemple définir que tout un bloc CSS ne doit être interprété que si la taille de la fenêtre est inférieure à 400px. Cela est très utile dans le cas du responsive, car on peut ainsi influer sur la taille des blocs de la page, leurs marges, s'ils doivent apparaître ou non, et tout ça en fonction de la résolution du terminal.

Voici comment utiliser les media queries directement dans vos feuilles CSS :

/* Écrans normaux - entre 860px et 1140px */
@media only screen and (min-width: 53.75em) and (max-width: 71.25em) {

    /* Largeur de la page */
    div#page {
        width: 100%;
    }

    /* Menu 2 */
    #menu2 {
        display: none;
    }
}

/* Écrans moyens - entre 592px et 859px */
@media only screen and (min-width: 37em) and (max-width: 53.6875em) {

    /* Largeur de la page */
    div#page {
        width: 90%;
    }
}

/* Petits écrans - en dessous 592px */
@media only screen and (max-width: 36.9375) {

    /* Largeur de la page */
    div#page {
        width: 80%;
    }
}

Cet exemple présente 3 fourchettes de tailles répandues, pour lesquelles l'affichage est amélioré.

Explications :

  • On ajoute un niveau d'imbrication à la feuille css en ajoutant des blocs media query.
  • Dans chacun de ces blocs on définit les propriétés css à appliquer uniquement si la condition est vraie.
  • Les conditions utilisées dans ces media queries définissent une largeur maxi et/ou mini d'écran. (D'autres conditions sont possibles.)

Remarques :

  • IE 8 et inférieur ne reconnaissent pas les media queries, ainsi que Firefox 3. La librairie Respond.js permet alors de les simuler.
  • Vous pouvez également définir ces conditions de media queries directement dans votre head HTML, via l'attribut media de la balise link.

Un article complet sur les media queries est présent sur le site alsacréations.

Astuce Modifier le nombre de colonnes disponibles dans Bootstrap

Le système de grid de Bootstrap est pratique, mais parfois insuffisant. Il propose seulement 12 largeurs de colonne, ce qui limite les possibilités d'affichage.

Ce nombre de colonnes est heureusement paramétrable grâce aux fichiers .less des sources de Bootstrap. Il vous suffit de modifier et compiler ces sources pour générer une feuille Bootstrap avec le nombre de colonnes de votre choix.

Pour Bootstrap v3.0.0, il faut par exemple modifier le fichier variables.less :

// Grid system
// --------------------------------------------------

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-tablet;

Remarque :

Si vous n'êtes pas familier avec les fichiers less, vous pouvez utiliser le formulaire de customisation de Boostrap proposé sur le site officiel. Il permet de modifier non seulement le nombre de colonnes, mais beaucoup d'autres paramètres.

Astuce Utiliser les flottants en CSS

Pour mettre des blocs côte à côte en CSS, il faut faire flotter l'un deux.

Voici un exemple simple avec une structure en 4 blocs comme on en voit souvent : un en-tête, une colonne de menus, une colonne principale et un pied de page.

Exemple de layout en colonnes

Code HTML

Le code html est très simple :

<div id="global-container">
    <div id="header">...</div>
    <div id="navigation">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

Explication :

On a un div pour chaque zone du site, et un autre pour le conteneur global.

Code CSS

Le CSS se compose également de 5 parties, une pour chaque div :

#global-container {
    padding: 10%;
    background-color: #CACACA;
}
#header {
    height: 100px;
    margin-bottom: 20px;
    background-color: #868686;
}
#navigation {
    height: 300px;
    width: 20%;
    float: left;
    margin-right: 5%;
    background-color: #262626;
}
#content {
    height: 300px;
    overflow: hidden;
    background-color: #555555;
}
#footer {
    height: 80px;
    margin-top: 20px;
    background-color: #868686;
}

Explications :

  • Le bloc de navigation est positionné à gauche grâce à la propriété float: left.
  • Le bloc de contenu est bien positionné à droite (et pas en dessous), grâce à la propriété overflow: hidden.
  • La marge entre les deux est définie sur le bloc de navigation car c'est lui qui est flottant.
  • Le bloc de navigation peut flotter par rapport au bloc de contenu, car il est écrit AVANT, dans le code HTML.

Marque-page Propriétés CSS interprêtées par les logiciels de messagerie et webmail

Lorsque vous créez des mails en HTML, il est très difficile d'avoir le même rendu sur tous les logiciels de messagerie et sur tous les webmails.

Le problème vient de l’interprétation non standard du CSS, en particulier par Outlook 2007/2010/2013.

Voici la liste des propriétés reconnues par les logiciels de messagerie et webmails les plus répandues : http://www.campaignmonitor.com/css/