Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:recettes_de_cuisine_et_table_de_la_loi

Voir cette page sous forme de diaporama.

Recettes de cuisine & tables de la loi

Sommaire

  • La validation (HTML&CSS)
  • La mise en page
    • display:table-cell; display:inline-block; position:absolute; les marges négatives; les colonnes en CSS
  • Les liens hypertextes : éléments interactifs → display:block;
  • Les images
    • Images de contenu
    • Images d'interface: En fond ou ajoutées et Remplacement de texte
  • Liens

La validation

  • Valider, valider et encore valider…
  • Si vos documents ne sont pas valides (demander sinon) :
    • Inutile de chercher à résoudre les autres problèmes.

La validation : HTML

HTML : éléments sémantiques

La validation : CSS

  • Certaines erreurs sont normales (-prefix-)

Quelles CSS ?

  • Certaines fonctionnalités ne sont pas supportées de façon standard
  • Consulter Can I use...
  • Utilisé les fonctionnalités récentes :
    • Si nécessaire ! (pas juste pour le fun).
    • Pas juste utilisable sur un navigateur
      • (IE, FF, Chrome, Safari).
    • Le faire remarquer lors de la soutenance.

Les préfixes en CSS

  • Toujours inclure les préfixes pour tous les navigateurs
selecteur {
  -webkit-xxx: value;
     -moz-xxx: value;
      -ms-xxx: value;
       -o-xxx: value;
          xxx: value;
}
  • ET la valeur sans préfixe !

La mise en page

  • Si cela ne fonctionne pas :
    • Faire un exemple minimal (sans graphismes)
  • Suivre la démarche :
    • css/normalize.css
    • css/styles-typographie-couleurs.css
    • css/styles-graphiques.css
    • css/styles-mise-en-page.css

display:table-cell;

selecteur {
  display: table-cell;
  vertical-align: top;
}
  • Les margin ne fonctionnent pas avec. Utiliser des padding

display:inline-block;

<ul class="pour-inline-block"><!--
  --><li>un</li><!--
  --><li>deux</li><!--
--></ul>

position:absolute;

  • À n'utiliser que si approprié.
  • Place un contenu sur un espace réservé (Eg. padding)
  • Par rapport à un parent (position: relative)
  • Tester en redimensionnant la fenêtre et le texte !
  • Toujours donner des coordonnées top/bottom et left/right

position:absolute;

sel-parent {
  position: relative;
}
sel-parent sel-enfant {
  postion: absolute;
  top: ???px;
  left: ???px;
}

les marges négatives

  • Jammais !
  • Sauf “Pull quotes” et même condtion que pour position: absolute;

les colonnes en CSS

  • À utiliser avant de se compliquer la vie
  • Simple : MDN columns
  • Deux problèmes avec Firefox :
    • Pas de support de column-span (oblige à ajouter une DIV)
    • Pas de gestion des sauts de colonnes (display: inline-block; peut remplacer)

Mise en page : on est dans le futur

les césures

Les éléments interactifs

  • Si un lien hypertexte (A) est une entrée de menu ou un bouton (pas au milieu du texte) :
    • Toujours, lui ajouter : display: block; ou display: inline-block;
    • Tester : toute la surface devient un lien (et pas que le texte)
    • Penser à mettre de petites marges entre les éléments interactifs (le curseur change).

Les liens autour des éléments bloc (HGROUP, "tweets")

Les images

  • Quand on prépare une image pour le WEB. Troujours :
    • La réaliser à la taille à laquelle elle sera utilisée.
    • Notez cette taille, vous en aurez besoin !

Images de contenu

  • Sémentique :
    • Doivent faire partie du contenu ! Sinon les mettre par CSS !!!
    • A un attribut ALT qui à du sens.
      • Mais également leurs noms de fichier.
    • Toujours une taille dans le code HTML.
      • Attributs WIDTH et HEIGHT (sans unité, forcément pixel).

Images d'interface

  • À éviter si l'on peut le faire en pure CSS (police, bords, effets…)
  • En fond ou ajoutées (:before et :after)
    • Le classique (Phark Method) ou Scott Kellum Method
    • Pour navigateur >IE7 : Improved NIR

Images d'interface : en fond

  • Simplement avec la propriété background-image
    • Accompagné de background-repeat et background-position
  • Ne jamais mettre de taille en CSS pour un fond !
    • La taille dépend du contenu. PAS du fond.

Images d'interface : ajoutées (:before :after)

  • Pensé à utilisé les pseudo éléments :before et :after
  • C'est simple et efficace :
selecteur:before {
  content: url('images-interface/mon-image.jpg');
  /* ... */
}

Remplacement de texte

  • Pour les textes que l'on veut remplacer par un graphisme
    • À éviter si l'on peut le faire en pure CSS (police, bords, effets…)
    • Bien réfléchir si votre graphisme apporte une réelle valeur ajoutée ?
      • Sinon, enlever votre graphisme. Pas le texte !
  • Bien appliquer à technique choisie (ne pas oublier une ligne !)

Remplacement de texte : classique

selecteur {
  display: block; /* ou inline-block */
  width: ???px; 
  height: ???px;
  background: url('images-interface/remplacement.png');
  text-indent: -9999px;
}
  • Le plus utilisé.

Remplacement de texte : sauf IE7

selecteur   {
  display: block; /* ou inline-block */
  height: ???px; 
  width: ???px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
selecteur:before {
  content: url('images-interface/remplacement.png');
  display: inline-block;
  font-size: 0;
  line-height: 0;
}
  • Long, ne fonctionne pas avec IE7. Mais le plus robuste.

Suppression de texte

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
  • Cache graphiquement, mais reste “accessible”

Les liens de référence

Tester

  • Sur Firefox et Chrome/Safari (un seul === gros problème !)
  • À différentes résolutions (redimensionner la fenêtre) !
  • À différente taille de texte (zoom texte seulement Firefox, Chrome, …)
cours2012/concepts_et_outils_pour_internet/recettes_de_cuisine_et_table_de_la_loi.txt · Dernière modification: 2017/10/16 19:01 par pracht