Petites trucs CSS

Contributeurs:

Maurice Svay
Emmanuel Clément
Laurent Denis
Katsoura

Trucs pour les feuilles de style d'écrans

Liens

0000a0[” attr(hreflang) “]”;

  }
  
  /* Afficher le raccourcis clavier d'un lien */
  a[accesskey]:after{
      content: "\0000a0[alt+" attr(accesskey) "]";
  }
  
  a:focus{
  }

Formulaires

Label

Les étiquettes <label> permettent d’associer du texte à un élément de formulaire. Lorsqu’un étiquette reçoit le focus, elle le transmet au contrôle associé (http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9.1). Dans un navigateur graphique, le clic sur l’étiquette permet généralement d’activer le champ associé. Il est possible d’indiquer cette possibilité en transformer le curseur en “main”, comme pour les liens.

  label{
      cursor: pointer;
      cursor: hand; /* pour IE */
  }

Champs de saisie

    /* Mettre en évidence le champ de formulaire actif */
        input[type=text], textarea{
        border: 1px solid;
    }
    
    input[type=text]:focus, textarea:focus{
        border: 2px solid;
    }
    
    /* Donne l'aspect d'une touche de clavier aux élément kbd */
    kbd { /*Personalisation de la balise keyboard: <kbd>*/
        padding: 0px 1px 0px 1px;
        border-width: 1px 2px 2px 1px;
        border-style: solid;
        background: #faf6f6;
        color: #000;
        border-color: #edd #baa #baa #eed;
    }
    
    
    
    /* Remplace les guillemets par des guillemets typographiques français */
    body{
        quotes: '\0000ab\0000a0' '\0000a0\0000bb' '\00201c\0000a0' '\0000a0\00201d';
    }
    
    /* Indique l'id d'un titre au survol pour faciliter le liage direct vers cette partie du document */
    h3[id]:hover:after {
        content:" #" attr(id);
    }

Passages de texte

Texte préformaté

  /* Evite aux morceaux de code de casser la mise en page lorsque les lignes sont trop longues */
  pre {
      overflow: auto;
  }

Acronymes et abréviations

La signification d’un acronyme ou d’une abréviation peut être indiquée dans l’attribut title. Un navigateur graphique sera alors capable de l’afficher sous forme d’info bulle. Il est possible d’en indiquer la présence en soulignant en pointillé et en modifiant le curseur au survol du mot concerné.

  acronym, abbr{
      border-bottom: 1px dotted;
      cursor : help;
  }

Trucs pour les feuilles de style d'impression

l'intitulé complet après le sigle :

  abbr[title]:after,acronym[title]:after{
      content : "(" attr(title) ")";
  }

Ou le sigle en parenthèses après son intitulé complet :

  abbr[title]:before, acronym[title]:before {
      content : attr(title) " (";
  }
  
  abbr[title]:after, acronym[title]:after {
      content : ") ";
  }