Le Hollandais Volant

Astuces CSS – Partie 2

robot-css Encore quelques astuces HTML/CSS…


Faciliter la navigation dans les formulaires

On m'a fait remarquer qu'avec l'apparition des boutons de formatage dans Blogotext, c'était la misère pour changer de champ avec la touche de tabulation. Et c'est vrai, mais à défaut je ne savais pas quoi faire.
Et j'ai découvert l'attribut tabindex, à placer sur un élément de formulaire, comme les <input> par exemple :

<input type="text" name="id" value="" size="25"  tabindex="12"/>

En ajoutant ça sur plusieurs input, la touche de tabulation naviguera du champ de l'index le plus bas au champ de l'index le plus haut, sans se soucier de l'ordre des champs dans le code source. Les champs qui n'ont pas d'index sont passés en derniers.
J'ai illico mis ça dans Blogotext, bien sûr :-)

J'ose également vous rappeler les attributs required (indique d'un champ est obligatoire), placeholder="lorem" (texte qui se montre si le champ est vide) et type (qui peut être mis comme « email », « url » ou autres choses pour la navigation sur smartphones tactiles avec un clavier limité).

CSS3 pseudo-classe : target

Peut-être avez-vous remarqué sur Wikipédia : quand on clique sur une note de bas de page, on est envoyé en bas bien sûr, mais le lien en question est surligné ! C'est grâce à la pseudo classe target, qui cible l'ancre courante : par exemple dans l'url monsite.com/page.html#ipsum, l'élément qui est l'ancre courante, c'est celui dont l'id est ipsum.

Ok, surligner les liens, c'est utile, mais pas fun. Faire des spoiler et des lightbox en pure CSS, ça c'est fun ! Mais bon… c'est moins utile.
Actuellement, j'ai ajouté ce truc sur les ancres des commentaires de mon site. Ciblez un commentaire, et il ombrée de jaune :-).
Le code, tout simplement :

#ancre:target {
/* style lorsque #ancre est ciblé */
}

Oh, et à propos des ancres HTML : pour les commentaires ici, j'ai placé le lien dans le bloc d'un commentaire, et l'ID avec l'ancre je l'ai attribué au bloc. Cela ciblera le bloc et non le lien. Côté esthétique, c'est mieux : le bloc n'est pas coupé en haut. C'est également plus lisible quand les ancres pointent vers des chapitres ou des sous-parties de la page, de pointer sur un élément légèrement au dessus du titre de la partie : le titre ne sera ainsi pas collé au bord de l'écran, mais quelque peu espacé.

Pour les styles d'impression

Il est possible de faire des feuilles CSS pour les imprimantes : quand on imprime, on s'abstiendra d'imprimer les images de fond, mais on imprimera seulement le texte, en noir sur fond blanc, pour éviter d'utiliser trop d'encre (et parce que blanc sur noir c'est illisible sur papier).
Quand on imprime une page, les liens ne marchent plus (bien dommage, hein ?). Alors pourquoi ne pas afficher l'url à côté du lien ? Parce qu'on peut le faire en CSS, avec les sélecteurs et content et attr en CSS :
Un élément HTML peut avoir plusieurs attributs, par exemple un id et un href pour ce lien :
<a href="http://foo.com" id="lien">
Ce qu'on va faire, c'est récupérer le contenu du href, et l'afficher avec un :after

a[href^='http']:after {
content:" (" attr(href) ")";
}

Ce qu'on cible : les liens (<a>) qui ont un attribut href ([href]) débutant (^) par http (http), donc uniquement les liens externes. Ce qu'on fait : on place après ces liens (:after) le contenu (content) de l'attribut href.
Si ça avait été une image, on aurait pu afficher la source avec :
content:" (" attr(src) ")";
Magique non ?

On peut même le coupler avec :hover (pas pour l'impression cette fois), pour afficher le l'url au survol du lien, et pourquoi pas après un certain délai et avec un fondu ? CSS3 Inside ? Petit exemple ici. Quand je vous disais que personne n'utilise plus de 20% de la puissance des CSS.
On peut même cibler les liens se terminant par « pdf » ou « jpg » pour afficher une petite icone appropriée, ou même un lien commençant par « https », et afficher un petit cadenas (c'est ce que fait Wikipedia non ?).

Mettre un caractère spécial dans un « content »

Ce que j'appelle improprement « caractère spécial », ce sont les caractères unicode non-alphanumériques. Par exemple un petit atome : ⚛, un cœur : ♥ ou un flocon de neige : ❄.
Dans le content CSS il n'est pas possible de mettre l'entité HTML « &#9883; » sinon ça affiche littéralement le code avec le « & » et tout. Il faut utiliser le code Unicode échappé, à savoir (pour l'atome ci-dessus) : « 269B ».

Dans les tables de caractères (ceux de Gnome sous GNU/Linux ou ceux de Windows), c'est le code après le « U », par exemple, vous voyez ceci : « U+269B ». Il faut donc prendre 269B et ajouter un anti-slash devant, puis le mettre dans le CSS :

#element:after {
content:"\269B";
}

(on peut aussi mettre directement le caractère unicode, mais c'est pas recommandé, à moins que vous mettiez l'encodage de caractères dans le fichier CSS).

Éviter que les images dépassent des blocs quand on rétréci la page

Quand on a une image de 1000px dans une fenêtre de 900px, l'image sort de l'écran et on peut pas la voir. C'est relativement ennuyeux. Heureusement j'ai songé à : il suffit de faire en sorte que la taille de l'image ne soit pas plus grande que son conteneur :

img {
max-width: 100%;
}

C'est tout !
En largeur, l'image ne dépassera plus de son conteneur. Vous pouvez essayer sur cet article avec l'image qui s'y trouve : redimensionnez la fenêtre et constatez qu'elle se compresse en fonction.
Le souci, c'est que l'image n'est pas redimensionnée en hauteur. Qu'importe, on peut faire ça avec du JavaScript (il n'est à ma connaissance pas faisable de recalculer dynamiquement des dimensions en CSS).
Le code JS suivant recalculera et appliquera les hauteurs aux images de classe « autoresize » qui sont déformées de manière à ce que l'image ait un ratio hauteur/largeur qui ne la déforme pas (il faut recharger la page pour le redimensionnement en hauteur par contre) :

function get_size() {
var className = "autoresize";
var elmts = document.getElementById("midle").getElementsByTagName("img");
var regex = new RegExp("\\b" + className + "\\b");
for (var i=0; i<elmts.length; i++) {
if(regex.test(elmts[i].className)) {
var height = parseInt(elmts[i].style.height);
var width = parseInt(elmts[i].style.width);
var computedWidth = elmts[i].width;
if (width != computedWidth && computedWidth * width != 0) {
elmts[i].style.height = Math.floor(height*computedWidth / width)+"px";
}
}
}
}
get_size();


Voilà, c'est tout pour le moment !

image de 邪恶的正太