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 邪恶的正太

36 commentaires

gravatar
Le Hollandais Volant a dit :

Ah oui.
C'est corrigé :)

PS : je viens de mettre en place un moyen pour vous de vous abonner par email aux nouveaux commentaires.
Explications cependant : si vous postez admettons 3 commentaires, alors seul le choix du dernier commentaire sera pris en compte. Donc pour continuer à recevoir les mails : toujours cocher la case. Pour ne plus les recevoir, décôcher la case lors de la publication d'un nouvel article OU utiliser le lien de désabonnement dans l'email.

(oui je sais, c'est le bordel mais le système de blogotext se passant de BDD rend les choses un poil compliqué. Mais je suis en train de créer une version utilisant SQLite.)

gravatar
Anonyme a dit :

@Identitools : ou comment faire la promo de son pseudo (ou site) en laissant des commentaires inutiles en passant sur diverses blogs.

gravatar
Guenhwyvar a dit :

Ah, pour les formulaires, moi j'ai fait plus simple : mes boutons de formatage sont pas des boutons, mais des <span> (vaguement) stylisés pour ressembler à des boutons ! :D Du coup, à la navigation au clavier, on passe bien d'un champ à l'autre sans problème, et ça me permet de mettre exactement ce que je veux comme je veux en texte apparent (l'équivalent de ton value). Bon, du coup on peut plus se servir des boutons sans souris, mais vu que sans souris ce genre de boutons sert un peu à rien de toute manière…

Les champs required et type, c'est juste pour le html5, je suppose, ça casse la validation en XHTML, non ?


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


Euh, logiquement, si l'encodage du fichier CSS est le même que celui du HTML, ça passera sans problème, même sans préciser l'encodage dans le fichier .css, non ? Perso c'est ce que j'ai fait avec « ➢ » (U+27A2), et on m'a jamais signalé de problème à ce sujet.

gravatar
Identitools a dit :

@Le petit Marocain : Je t'ai agressé ? C'est parce que je souligne juste que laisser un lien vers ce genre de sites est dispensable que tu trouve le besoin de t'attaquer à ma personne ? Tu me déçois...

gravatar
Identitools a dit :

@Le petit Marocain :
Timo, juste supprime mes commentaires ainsi que ceux du petit marocain de cet article et que l'on en parle plus, je n'ai ni envie de discuter avec lui ni pourrir le site de timo. La prochaine fois que tu voudra me dire quelque chose, aie un minimum de tact.

gravatar
Thanks a dit :

On dérive un peu du css, mais l'option vaut le coup d'œil et n'est pas très connue: la méta opensearch.

Exemple de ce que j'utilise :

<blockquote><link type="application/opensearchdescription+xml" rel="search" href="http://fox-photography.net63.net/opensearchdescription.xml"/></blockquote>

Le but? Permettre aux utilisateurs de faire une recherche sur le site au moyen de la barre d'url du navigateur. Par exemple, sous Chrome, si on positionne le curseur après l'url du site, il recommande d'appuyer sur "alt" pour effectuer une recherche.

Pour dicter au navigateur comment formater l'url de recherche, il faut créer un fichier "opensearchdescription.xml".

Sa structure (exemple):

<blockquote><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Nom du site</ShortName>
<Description>Utiliser la recherche du site 'Nom du site'</Description>
<Url type="text/html" template="http://monsite?s={searchTerms}"/>
</OpenSearchDescription></blockquote>

Merci pour la pseudo classe target, je connaissais pas... ;-)

gravatar
Androc a dit :

Petite remarque à propos de tabindex : c'est le mal !

Un peu rapide comme conclusion mais en général, c'est rapidement utilisé à mauvais escient et donne lieu à une navigation qui apparaît comme erratique pour l'internaute.

Combien ai-je vu de sites qui faisaient des tabindex qui renvoient en haut, en bas, à gauche, à droite, on sait plus où est le curseur, si bien qu'on clic à la souris à chaque fois et on perd grave du temps.

Les propriétés ajoutés à la balise input sont vraiment chouettes, ça permet de se soulager de code JavaScript pas toujours très fiables, notamment le placeholder et le required.

En revanche, un truc qui serait chouette pour ton blog c'est que lorsqu'on clic sur "Commentaires" d'un article, on soit redirigé vers le début des commentaires et pas au début de l'article, car pour cela il y a le titre de l'article.

gravatar
Le Hollandais Volant a dit :


Petite remarque à propos de tabindex : c'est le mal !


Bah c'est pas mal comme c'est fait dans Blogotext là, si ?



Les propriétés ajoutés à la balise input sont vraiment chouettes, ça permet de se soulager de code JavaScript pas toujours très fiables, notamment le placeholder et le required.


Je constate que les balises « type="url" » ne marchent pas très bien. Le parseur REGEX doit avoir un soucis avec les RFC, car si une URL contient un "_" il n'est pas pris comme valide dans Opera :-/


En revanche, un truc qui serait chouette pour ton blog c'est que lorsqu'on clic sur "Commentaires" d'un article, on soit redirigé vers le début des commentaires et pas au début de l'article, car pour cela il y a le titre de l'article.


+1 j'ajoute ça !
EDIT : c'est fait là :)

gravatar
Androc a dit :

Merci pour l'ajout de la balise commentaire :)


Bah c'est pas mal comme c'est fait dans Blogotext là, si ?



Non ce n'est pas mal fait car tu respectes la logique du formulaire une fois que tu as sauté les boutons mais je me méfie toujours des attributs/astuces qui permettent de sortir d'un flux normal c'est très souvent détourné pour un usage débile.

Un autre gros intérêt des balises input spécialisées, au delà du fait que le navigateur peut râler à la place d'un code JavaScript, c'est que sur les mobiles cela permet d'afficher un clavier modifié. C'est surtout vrai pour le type=number qui n'affiche que les nombres.

Pour ce qui est du bug dans Opera ... connais tu la regex liée à la RFC qui permet de valider un email par exemple ? http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html
Du coup ... une erreur ou une simplification est vite arrivée :)

gravatar
Androc a dit :

Oh ben d'ailleurs je viens de m'apercevoir que tu as un souci avec la balise lien de ton blog.
Apparemment le lien à cliquer est juste "http:" alors que l'URL semble être correcte.

gravatar
Androc a dit :

Regarde le lien vers la RFC dans mon commentaire @Androc :, le href vaut juste "http://".

gravatar
Androc a dit :

Ahhhh merde quel con, je viens de refaire un test un peu moins rapide avec la balise, my fault, sorry.

En fait j'ai l'habitude que quand on sélectionne un texte et qu'on fait "lien", ça encadre l'URL et qu'on puisse envoyer le commentaire directement et que par défaut ça va écrire texte=url mais sur ton blog, il faut ensuite remplir la partie http, c'est dommage, ça devrait être l'inverse ou une version raccourcie comme sur d'autres forums

gravatar
Guenhwyvar a dit :

Tiens, puisqu'on parle du blog, ça sert à quoi les « return false; » sur les boutons de redimensionnement du textarea ? Vu que c'est des type="button", par défaut, ça fait déjà rien, non ?

gravatar
Androc a dit :

Une petite remarque concernant le champ de recherche de ton site : sur le hover, il se décale doucement pour s'agrandir.
C'est "sympa" mais tu devrais aussi provoquer ce décalage sur focus.
Car dans la situation suivante, c'est pénible :
- tu sélectionne le champ pour faire une recherche (il se décale)
- tout en tapant ta recherche, tu balades ta souris ailleurs (le champ se rétracte)
- tu fais une faute dans la saisie de ta recherche et tu souhaites utiliser ta souris pour la corriger, du coup tu passes ta souris sur le champ et il s'agrandit, obligeant l'utilisateur à attendre la fin de l'animation pour modifier sa saisie

gravatar
Le Hollandais Volant a dit :

Ça marche pas avec le focus, j'ai essayé :-/
Je suis toujours en train de chercher une solution à ça.

Si je ne trouve rien, je supprimerais cette animation :D.

gravatar
Androc a dit :

Un truc du style
div.navbloc #input-rechercher:focus:...
ne fonctionne pas ?

gravatar
Androc a dit :

Je viens de faire quelques recherches. Il semble qu'on ne puisse pas faire un selecteur de parent en CSS.
La solution consisterait à utiliser le focus/blur pour mettre une classe sur ton div mais bon ...

gravatar
Le Hollandais Volant a dit :

Le focus ne marche que sur les liens et les champs à remplir (input, textarea). Je pourrais faire JS, mais peu pour moi.

Je vais faire une lightbox CSS :D. Ça serait fun, mais un peu moche et lourd…

gravatar
Androc a dit :

En fait l'idée en CSS serait de pouvoir cibler le parent d'un champ input focus mais ça ne semble pas être possible :(

gravatar
Le Hollandais Volant a dit :

@Androc : non, et c'est voulu par le W3C.
La raison est simple : vu qu'il est possible de cibler l'élément fils, s'il avait été possible de cibler un élément parent, il pourrait être possible de faire des boucles infinies.

Je pense qu'ils ont raison de bloquer cette possibilité, au vu de ce détail.

gravatar
Androc a dit :

Ah oui non mais c'est certain que c'est une bonne idée de l'empêcher, c'est juste dommage car il y a plusieurs cas où ça serait pratique.
Il faut juste contourner le truc mais, par exemple, dans ce cas là ça aurait été chouette :)

En fait, si on réfléchit bien, l'animation est sympa mais inutile dans le sens où il n'y a pas plus de place dans le champ input pour taper des choses.
Du coup c'est juste visuellement amusant mais une contrainte pour l'internaute sans vraie contrepartie d'efficacité derrière.

Si tu avais un petit champ discret et qu'il s'agrandit sur focus, comme on le voit parfois sur certains sites, d'accord mais là ce n'est pas le cas.

gravatar
Antoine. a dit :

À propos de CSS, ton menu déroulant présenté dans tes tutoriels CSS est trop compliqué, il est possible de faire beaucoup plus simple ^^

gravatar
Antoine. a dit :

Non justement!
de mémoire j'ai fait un truc comme ça:

&lt;div id="menu"&gt;
blablabla
blablabla
blablabla
blablabla
blablabla
blablabla
&lt;/div&gt;

#menu { height: 10px; }
#menu:hover { height: auto; }


Simple, et je pense, propre, et je pense (oui encore, je pense beaucoup) bon pour l'accessibilité :)

gravatar
Le Hollandais Volant a dit :

@Antoine. : effectivement, mais ça ne marchera pas s'il y a du texte en dessous du div : la page se déforme lors du hover : le <div> pousse, mais ne se déroule pas par dessus.

Ou alors il faut lui donner un positionnement absolue, avec un z-index.

gravatar
Antoine a dit :

"#menu {
width: 150px;
height: 30px;
overflow-y: hidden;
z-index: +1;
position: absolute; }
#menu:hover {
height: auto;
}"
C'est pas beau ça? :-)

Les commentaires sont fermés pour cet article