Les bonnes pratiques - EyrollesDans cet exemple, un point d’arrêt est défini à 768 px : il permet de déclencher certaines fonctions lorsque la largeur du navigateur passe en

Corinne Schillinger

Intégration webLes bonnes pratiques

LE GUIDE DE SURVIE DE L’ INTÉGRATEUR !

DESIGN

Préface d’Élie Sloïm & Laurent Denis

© Groupe Eyrolles, 2012ISBN : 978-2-212-13370-7

ANNEXES

Le zoning schématise l’organisation générale d’une page en identifiant les différentes zones à l’aide de blocs. Il permet d’illustrer le fonctionnement global et de dégager les zones de contenu principales.

Annexe A1

Annexe B Établi à partir du zoning, le wireframe (ou maquette fil de fer) met en avant le contenu. Les zones précédemment identifiées sont remplies et leur contenu est organisé de la manière la plus fonctionnelle et ergonomique possible.

Annexe A2

La feuille de styles présentée ci-après est une version personnalisée du fichier normalize.css conçu par Nicolas Gallagher et Jonathan Neal. Elle est agrémentée de notes et de références complémentaires, et nettoyée des instructions relatives aux balises de structures HTML5, car je trouve encore prématuré de les utiliser à l’heure actuelle. Dans cette version, les hacks navigateurs ont été remplacés par des correctifs s’appuyant sur les classes conditionnelles définies dans le gabarit HTML.

Le fichier est consultable et téléchargeable à l’adresse suivante : https://github.com/inseo/bpi-normalize

Contenu du fichier « normalize »/** Uniformisation des styles navigateurs * @lastmodified 2012-08-03 * * Version personnalisée de normalize.css * @see http://necolas.github.com/normalize.css * * Les valeurs prises en références sont celles recommandées par le WHATWG * @see http://www.iecss.com/whatwg.css */

/** --- = @section BASE --- */

/** Rend le zoom texte fonctionnel lorsque la police est définie en 'em' sur <body>. * @bugfix * @affected IE 6, IE 7 * @see http://fvsch.com/code/bugs/ie-em-bug/ */html { font-size: 100%;}

/** Supprime les marges externes. */body { margin: 0;}

/** --- = @section TITRES --- */

/** Applique les marges externes et tailles de caractères recommandées. * @css-for IE 6, IE 7 */h1 {

Annexe B

370 INTÉGRATION WEB : LES BONNES PRATIQUES

margin: 0.67em 0; font-size: 2em;}

h2 { margin: 0.83em 0; font-size: 1.5em;}

h3 { margin: 1em 0; font-size: 1.17em;}

h4 { margin: 1.33em 0; font-size: 1em;}



/** --- = @section LISTES --- */

/** Applique les marges recommandées. * @css-for IE 6, IE 7 */dl,ol, ul { margin: 1em 0;}

ol, ul { padding: 0 0 0 40px;}

dd { margin: 0 0 0 40px;}

/** --- = @section TABLEAUX --- */

371 ANNEXE B

/** Supprime l’espace entre les cellules et fusionne les bordures. */table { border-spacing: 0; border-collapse: collapse;}

/** --- = @section FORMULAIRES --- */

/** Applique les marges externes recommandées. * @css-for IE 6, IE 7 */form { margin: 0;}

/** 1. Applique les marges recommandées. @css-for IE 6, IE 7 * 2. Uniformise la bordure. */fieldset { margin: 0 2px; /** 1 */ border: 1px solid gray; /** 2 */ padding: 0.35em 0.625em 0.75em; /** 1 */}

/** 1. Rétablit l’héritage de la propriété 'color'. * @bugfix * @affected Internet Explorer * 2. Uniformise les marges internes. * 3. Permet au texte de revenir à la ligne du texte. * @bugfix * @affected FF 3.6 * @see http://stackoverflow.com/questions/6133571/how-can-i-make-legend-text-wrap * @note IE 6 et IE 7 nécessitent une solution de contournement alternative. */legend { border: 0; /** 1 */ padding: 0; /** 2 */ white-space: normal; /** 3 */}

/** Supprime les marges externes. * Uniformise l’alignement vertical. * Rétablit l’héritage de la taille de police. * Uniformise la famille de police utilisée. */button,input, select, textarea { margin: 0; vertical-align: baseline; font-size: 100%; font-family: sans-serif;}


/** Uniformise la hauteur des champs texte. * @see http://www.456bereastreet.com/archive/201108/line-height_in_input_fields/ */input[type="text"] { border: 1px solid dimgray; padding: 2px; height: 1.2em; font-size: 1em line-height: 1.2;}

/** 1. Modifie l’apparence du curseur sur certains éléments de formulaire. * @note Ne fonctionne pas sur IE 6 * 2. Permet de rendre les labels fonctionnels. * @bugfix * @affected iOS * @see http://twitter.com/sorccu/status/211364032098213888 */label,button, input[type="button"],input[type="checkbox"], input[type="radio"],input[type="reset"], input[type="submit"] { cursor: pointer;}

/** Rétablit le curseur par défaut.* @note Ne fonctionne pas sur IE 6, IE 7 et IE 8 */button[disabled], input[disabled] { cursor: default;}

/** Supprime les marges internes incompressibles. * @css-for Firefox * @see http://www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}

/** Normalise le modèle de boîte et supprime les marges internes. * @css-for IE 8, IE 9 */input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0;}

/** 1. Uniformise l’alignement vertical. * 2. Masque la barre de défilement présente par défaut. * @css-for Internet Explorer

373 ANNEXE B

* 3. Autorise le redimensionnement vertical du champ * @note Ne fonctionne pas sur Internet Explorer. */textarea { vertical-align: top; /** 1 */ overflow: auto; /** 2 */ resize: vertical; /** 3 */}

/** --- = @section AUTRES COMPOSANTS --- */

/** Applique les marges recommandées. * @css-for IE 6, IE 7 */blockquote { margin: 1em 40px;}

/** Applique les marges recommandées. * @css-for IE 6, IE 7 */p,pre { margin: 1em 0;}

/** Améliore la lisibilité de l’élément. */pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word;}

/** Uniformise l’aspect du texte. */code, pre,kbd, samp { font-family: monospace, serif; font-size: 1em;}

/** Uniformise le contour. * @css-for Chrome, Safari */a:focus { outline: thin dotted;}

/** Améliore la lisibilité au survol et à la prise de focus. * @see people.opera.com/patrickl/experiments/keyboard/test */a:active, a:hover {


outline: 0;}

/** Ajoute la bordure recommandée. * @css-for Internet Explorer, Chrome, Safari */abbr[title] { border-bottom: 1px dotted;}

/** Applique la graisse recommandée. * @css-for Firefox */b, strong { font-weight: bold;}

/** Uniformise la taille de l’élément. */small { font-size: 75%;}

/** Empêche les éléments 'sub' et 'sup' d’affecter l’interlignage du parent. * @see gist.github.com/413930 */sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0;}

sup { top: -0.5em;}

sub { bottom: -0.25em;}

/** Supprime les guillemets automatiques. * @css-for IE 6, IE 7 */q { quotes: none;}

/** Supprime les guillemets automatiques. * @css-for Chrome, Safari * @see http://www.paulchaplin.com/blog/css-reset-and-quirky-quotes */q:before, q:after { content: ''; content: none;

375 ANNEXE B

}

/** 1. Supprime la bordure des images se trouvant dans un lien. * @css-for Internet Explorer, FF3.6 * 2. Supprime l’espace indésirable apparaissant sous les images. * @see http://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html */img { border: 0; /** 1 */ vertical-align: middle; /** 2 */}

/** Supprime l’ombre portée du texte lors de sa sélection. * @see h5bp.com/ * @note Les couleurs de texte et d’arrière-plan doivent être redéfinies pour que l’instruction soit appliquée.*/::selection { text-shadow: none; color: black; background-color: lightblue;}

/** Supprime l’ombre portée du texte lors de sa sélection. * @css-for Firefox */::-moz-selection { text-shadow: none; color: black; background-color: lightblue;}

/** --- = @section IE --- */

/** Corrige le problème de marge externe gauche incompressible. * @bugfix * @affected IE 6, IE 7 * @see http://jamesfrank.info/2011/06/18/fieldset-legends-ie7/ */.ie6 legend, .ie7 legend { margin-left: -7px;}

/** Uniformise l’alignement vertical. * @css-for IE 6, IE 7 */.ie6 button, .ie6 input, .ie6 select, .ie6 textarea,.ie7 button, .ie7 input, .ie7 select, .ie7 textarea { vertical-align: middle;}


/** Supprime la marge interne incompressible. * bugfix * @affected IE 7 * @see http://www.brownbatterystudios.com/sixthings/2006/02/14/ * @note Ne fonctionne pas sur IE 6 */.ie7 button,.ie7 input[type="button"], .ie7 input[type="reset"], .ie7 input[type="submit"] { overflow: visible;}

.ie7 table button,

.ie7 table input[type="button"], .ie7 table input[type="reset"], .ie7 table input[type="submit"] { overflow: auto;}

/** Supprime la marge interne des éléments. * @bugfix * @affected IE 7 * @note Ne fonctionne pas sur IE 6 */.ie7 input[type="checkbox"], .ie7 input[type="radio"] { height: 13px; width: 13px;}

/** Remplace la police 'monospace' par 'courrier new' dont le rendu est meilleur. * @bugfix * @affected IE 6 * @see en.wikipedia.org/wiki/User:Davidgothberg/Test59 */.ie6 code, .ie6 pre,.ie6 kbd, .ie6 samp { font-family: "courier new", monospace;}

/** Améliore la qualité des images redimensionnées. * @css-for IE 7 * @see http://code.flickr.com/blog/2008/11/12/ * @note Ne fonctionne pas sur IE 6 */.ie7 img { -ms-interpolation-mode: bicubic;}

/** --- = @section MOBILES --- */

/** Empêche le redimensionnement du texte au changement d’orientation du terminal. * 1. @bugfix * @affected iOS * @see http://filamentgroup.com/examples/iosScaleBug/ * @note Cette instruction préserve la fonction de zoom utilisateur */html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /** 1 */}

377 ANNEXE B

/** 1. Évite que l’instruction 2 ne casse les contrôles natifs des éléments 'audio' et 'video'. * @bugfix * @affected WebKit in Android 4.0.* * 2. Autorise la personnalisation des éléments. * @bugfix * @affected iOS */button,html input[type="button"], /** 1 */input[type="reset"], input[type="submit"] { -webkit-appearance: button; /** 2 */}

Dans cet exemple, un point d’arrêt est défini à 768 px : il permet de déclencher certaines fonctions lorsque la largeur du navigateur passe en dessous (enter) ou au-dessus (exit) de cette limite.

Au-dessus de 768 px, le carrousel est activé : une classe activated est ajoutée, des flèches de navigation précédent/suivant sont générées et insérées et le plug-in Cycle est appliqué.

En dessous, il est désactivé : la classe activated est enlevée, les flèches de navigation sont retirées, l’instance du Cycle est détruite et tous les événements qui y sont liés sont supprimés.

Exemple d’utilisation du script breakpoint.js/** @author: Marie Alhomme (PouipouiDesign) */

/** ACTIVER LE CARROUSEL (SUR LES NAVIGATEURS PLUS LARGES QUE 768PX) */function activateSlideshow(elt) { /** SI L’ÉLÉMENT CORRESPONDANT EST PRÉSENT DANS LE DOM MAIS PAS DÉJÀ ACTIVÉ */ if ( jQuery(elt+'.activated').size() < 1 ) { /* AJOUT D’UNE CLASS MARQUANT L’ACTIVATION, INSERTION DES FLÈCHES DE CONTRÔLE ET LANCEMENT DU CARROUSEL */ jQuery(elt).addClass('activated').before('<span id="'+elt+'Prev" /><span id="'+elt+'Next" />').cycle(); }}

// DÉSACTIVER LE CARROUSEL (SUR LES NAVIGATEURS MOINS LARGES QUE 768PX)function deactivateSlideshow(elt) { /** SI L’ÉLÉMENT CORRESPONDANT EST PRÉSENT DANS LE DOM ET ACTIVÉ */ if ( jQuery(elt+'.activated').size() > 0 ) { /* RETRAIT DE LA CLASS MARQUANT L’ACTIVATION ET DESTRUCTION DU CARROUSEL */ jQuery(elt).removeClass('activated').cycle('destroy'); /* RETRAIT DES FLÈCHES DE CONTRÔLE */ jQuery(elt+'Prev, '+elt+'Next').remove(); }}

// FONCTIONS À DÉCLENCHER QUAND LA LARGEUR DU NAVIGATEUR PASSE AU-DESSUS DE 768PX$(window).bind('exitBreakpoint768',function() { /** SI L’ÉLÉMENT CORRESPONDANT EST PRÉSENT DANS LE DOM */ if ( jQuery('#slideshow').size() > 0 ) { deactivateSlideshow('#slideshow'); }});

// FONCTIONS À DÉCLENCHER QUAND LA LARGEUR DU NAVIGATEUR PASSE EN DESSOUS DE 768PX

Annexe C

379 ANNEXE C

$(window).bind('enterBreakpoint768',function() { /** SI L’ÉLÉMENT CORRESPONDANT EST PRÉSENT DANS LE DOM */ if ( jQuery('#slideshow').size() > 0 ) { activateSlideshow('#slideshow'); }});

// MISE EN PLACE DES BREAKPOINTS$(window).setBreakpoints({ // TABLEAU DE LARGEURS EN PIXELS OÙ LES BREAKPOINTS DOIVENT ÊTRE DÉCLENCHÉS breakpoints: [ 768 ] });

Annexe D Le fichier présenté ici regroupe les styles d’impression visant à améliorer la lisibilité de la version imprimée. Il est scindé en deux parties : d’un côté, les styles génériques réutilisables tels quels et, de l’autre, certains styles spécifiques (commentés par défaut) pouvant être librement adaptés.

Le fichier est consultable et téléchargeable à l’adresse suivante : https://github.com/inseo/bpi-print

Contenu du fichier « print »/** --- = @section STYLES GÉNÉRIQUES --- */

/** Réinitialiser la couleur du texte pour accélérer l’impression. * @see http://www.sanbeiji.com/archives/953 * Supprimer les ombres portées et les couleurs d’arrière-plan. */* { color: black !important; box-shadow: none !important; text-shadow: none !important; -ms-filter: none !important; filter: none !important; background-color: transparent !important;}

/** Supprimer les éventuelles marges et largeur de <body>. * Initialiser la taille de police en points. */body { margin: 0 !important; padding: 0 !important; width: auto !important; font-size: 12pt;}

/** Éviter que les titres ne soient suivis par un changement de page. * @note Fonctionne uniquement sur Opera et IE 8+. * @see http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#cite_ref-75 */h1, h2, h3, h4, h5, h6 { page-break-after: avoid;}

/** Éviter que ces éléments ne soient scindés par un changement de page. * @note Fonctionne uniquement sur Opera et IE 8+. */h1, h2, h3, h4, h5, h6,blockquote,

381 ANNEXE D

code, pre,tr,img { page-break-inside: avoid;}

/** Spécifier le nombre minimal de lignes pouvant être isolés en bas ou en haut d’une page. * @note Ne fonctionne pas sur Firefox. */p { orphans: 3; /** bas de page */ widows: 3; /** haut de page */}

/** Forcer la répétition des en-têtes de tableaux lorsqu’ils sont répartis sur plusieurs page. */thead { display: table-header-group;}

/** Souligner les liens. */a:link { text-decoration: underline;}

/** Afficher l’URL des liens. */a[href]:after { content: " (" attr(href) ")";}

/** Masquer l’URL des ancres nommées. */a[href^="#"]:after { content: "";}

/** Renseigner la signification des abréviations. */abbr[title]:after { content: " (" attr(title) ")";}

/** Restreindre la largeur de l’image à celle de son conteneur */img { max-width: 100% !important;}


/** --- = @section STYLES PARTICULIERS --- */

/** Supprimer certains éléments inutiles sur la version papier. *//** #skip-nav, #search, #nav, .social, #top,#footer { display: none;}*/

/** Réinitialiser les marges et la largeur du conteneur principal. *//**#container { margin: 0 !important; padding: 0 !important; width: auto !important;}*/

/** Linéariser certains éléments de contenu. *//** .classe-a-remplacer, #identifiant-a-remplacer { float: none;}

.classe-a-remplacer, #identifiant-a-remplacer { position: static;}*/

/** Remplacer un arrière-plan par une bordure. *//**.classe-a-remplacer, #identifiant-a-remplacer { border: 1px solid MediumPurple; color: MediumPurple; background-color: transparent;}*/

/** Remplacer une image par sa description détaillée. *//**.classe-a-remplacer img, #identifiant-a-remplacer img { display: none;}

.classe-a-remplacer .visually-hidden,

.classe-a-remplacer .visually-hidden caption,#identifiant-a-remplacer .visually-hidden,

383 ANNEXE D

#identifiant-a-remplacer .visually-hidden caption { position: static; clip: auto;} */

Le fichier .htaccess présenté ci-après regroupe certaines instructions visant à éviter les problèmes dus à l’utilisation d’un mauvais jeu de caractères, à améliorer les perfor-mances d’affichage, à minimiser certaines risques de sécurité, et à améliorer l’expérience utilisateur.

Le fichier est consultable et téléchargeable à l’adresse suivante : https://github.com/inseo/bpi-htaccess

Contenu du fichier .htaccess# --- MODE DE COMPATIBILITÉ IE ---# Interdire le mode de compatibilité sur IE# Activer Google Chrome Frame s’il est installé<IfModule mod_headers.c> Header set X-UA-Compatible "IE=Edge,chrome=1"

<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|vcf)$" > Header unset X-UA-Compatible </FilesMatch></IfModule>

# --- FONTES PERSONNALISÉES --- # Autoriser un domaine tiers (ou un sous-domaine) à accéder# aux fichier EOT, WOFF, TTF, TTC, OTF et SVG# => "http://domaine-autorise.fr" à modifier<IfModule mod_headers.c> <FilesMatch "\.(eot|woff|ttf|ttc|otf|svg)$"> Header set Access-Control-Allow-Origin "http://domaine-autorise.fr" </FilesMatch></IfModule>

# --- TYPE MIME ---# Associer un type MIME à certaines extensions

# JavaScript / JSON# (écrase les types MIME text/javascript erronés)AddType application/javascript js jsonpAddType application/json json

# AudioAddType audio/ogg oga oggAddType audio/mp4 m4a f4a f4b

Annexe E

385 ANNEXE E

# VidéoAddType video/ogg ogvAddType video/mp4 mp4 m4v f4v f4pAddType video/webm webmAddType video/x-flv flv

# SVGAddType image/svg+xml svg svgzAddEncoding gzip svgz

# FontesAddType application/vnd.ms-fontobject eotAddType application/x-font-ttf ttf ttcAddType font/opentype otfAddType application/x-font-woff woff

# Formats diversAddType image/x-icon icoAddType image/webp webpAddType text/cache-manifest appcache manifestAddType text/x-component htcAddType application/xml rss atom xml rdfAddType application/x-web-app-manifest+json webappAddType text/x-vcard vcf

# --- COMPRESSION GZIP ---<IfModule mod_deflate.c>

# 1. Identifier les en-têtes modifiés et forcer la prise en charge de la compression # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/ <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule>

# 2. Compresser tous les fichiers dont le type MIME correspond à l’un de ceux # qui sont listés <IfModule mod_filter.c> AddOutputFilterByType DEFLATE application/atom+xml \ application/javascript \ application/json \ application/rss+xml \ application/vnd.ms-fontobject \ application/x-font-ttf \ application/xhtml+xml \ application/xml \ font/opentype \ image/svg+xml \ image/x-icon \


text/css \ text/html \ text/plain \ text/x-component \ text/xml </IfModule>

</IfModule>

# --- EXPIRATION DES DONNÉES ---<IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month"

# Cache manifeste ExpiresByType text/cache-manifest "access plus 0 second"

# Document HTML ExpiresByType text/html "access plus 0 second"

# Données ExpiresByType text/xml "access plus 0 second" ExpiresByType application/xml "access plus 0 second" ExpiresByType application/json "access plus 0 second"

# Flux de syndication ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon (ne pas être renommée) ExpiresByType image/x-icon "access plus 1 week"

# Images, audio et vidéo ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month"

# Composants HTC ExpiresByType text/x-component "access plus 1 month"

# Fontes ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

387 ANNEXE E

# CSS et JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year"</IfModule>

# --- ETAG ---# Si le module mod_headers est disponible, l’en-tête Etag est supprimé<IfModule mod_headers.c> Header unset ETag</IfModule>

# S’il ne l’est pas, l’instruction FileETag None est appliquée# (cette instruction n’est pas suffisante pour tous les serveurs)FileETag None

# --- RÉÉCRITURE D’URL ---<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On</IfModule>

# Remplacer les URL préfixées par leur équivalent non préfixé# www.domaine.fr => domaine.fr<IfModule mod_rewrite.c> RewriteCond %{HTTPS} !=on RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]</IfModule>

# --- PAGE D’ERREUR PERSONNALISÉE ---# la page 404.html est placée à la racine du serveurErrorDocument 404 /404.html

# --- CODAGE UTF-8 ---# Indiquer que utf-8 doit être utilisé comme jeu de caractères par défaut# (appliqué par défaut aux fichiers de type text/plain et text/html)AddDefaultCharset utf-8

# Force l’encodage utf-8 sur les fichiers CSS, JavaScript, JSON, RSS, Atom et XMLAddCharset utf-8 .css .js .json .rss .atom .xml

# --- SÉCURITÉ ---# Interdire l’accès aux dossiers et aux fichiers cachés<IfModule mod_rewrite.c>

Index388 INTÉGRATION WEB : LES BONNES PRATIQUES

RewriteCond %{SCRIPT_FILENAME} -d [OR] RewriteCond %{SCRIPT_FILENAME} -f RewriteRule "(^|/)\." - [F]</IfModule>

# Interdire l’accès aux fichiers sensibles<FilesMatch "(\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~)$"> Order allow,deny Deny from all Satisfy All</FilesMatch>

# Empêcher l’exploration des répertoires n’ayant pas d’index<IfModule mod_autoindex.c> Options -Indexes</IfModule>

Documents

Les bonnes pratiques - EyrollesDans cet exemple, un point d’arrêt est défini à 768 px : il permet de déclencher certaines fonctions lorsque la largeur du navigateur passe en