28141 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

Et si on acceptait les limites de CSS qui ne permet effectivement pas de faire tout ce qu'on peut faire en bidouillant à l'ancienne ? En quoi est-ce gênant ?
Administrateur
Laurent Denis a écrit :
Et si on acceptait les limites de CSS qui ne permet effectivement pas de faire tout ce qu'on peut faire en bidouillant à l'ancienne ? En quoi est-ce gênant ?

C'est pas du tout gênant effectivement.

Il y'a sans doute une sur-utilisation des CSS pour ces choses qui ne leur sont pas propres (par exemple pour moi, un comportement dynamique :hover en CSS me gêne car c'est sensé être le rôle d'ECMA).

Certains exemples sont flagrants :
http://www.alsacreations.com/blog/index.php?2004/06/02/12-jouons-avec-nos-amis-les-css
http://www.alsacreations.com/blog/index.php?2004/06/03/13-jouons-avec-nos-amis-les-css-suite

Cependant, l'utilisation d'images pour faire des ombres me pose également des gênes dans mon optique de la séparation contenu/design (une mise à jour nécessiterait de refaire toutes les images), mais aussi une question de poids de page par exemple.
Administrateur
Laurent Denis a écrit :
Alors... ne fait pas d'ombres, tout simplement ;)

C'est un peu restrictif et extrême comme solution, ça Smiley biggol
Après on se plaint qu'on ne peut rien faire en CSS Smiley biggrin
gizmo a écrit :
http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-shadow

(Bon, ok, c'est pas supporté par tous les browers Smiley biggol )


Tellement peu supporté... que text-shadow disparaît de CSS2.1 ;)
ElMoustiko a écrit :
Et en plus le résultat est plutôt affreux !!!

Euh, non, du tout, pas quand on sait correctement l'utiliser. Plone l'utilisait assez élégamment.
Hmm... j'ai des doutes, mais je veux bien te croire, mais ne me ressors pas "quand on sait bien l'utiliser" !! on prend un texte on applique la propriété et zou... je vois pas ce qu'il y a de technique la dedans !!!

Mais j'ai même plus envie de me poser la question vu que c'est super mal implémenté et pas dans les projets de CSS2.1
bah disons que le "ne pas savoir l'utiliser" s'applique typiquement à l'exemple fourni par le W3C, un texte qui devient immonde en plus d'être difficilement lisible.
Modifié le 26 Oct 2004 - 19:47
Administrateur
Je remonte ce sujet, juste pour vous dire que les commentaires m'ont fait réfléchir quant à la méthode utilisée.

J'ai donc changé la technique en proposant deux nouvelles méthodes :
- une méthode "moins pire" que l'ancienne (qui affichait deux H1 à la suite)
- une méthode encore un peu moins pire en utilisant le contenu généré en CSS.

--> http://www.alsacreations.com/articles/ombre
Je ne vois pas le changement pour la bidouille HTML: le contenu est toujours répété et donc dénué de sens uniquement à des fins de présentation.

L'astuce CSS du title détourne celui-ci de sa fonction, puisque ce title n'ajoute aucune information au contenu du h1, mais elle limite au moins les dégâts pour l'accessibilité. En revanche, elle s'apparente tout à fait elle aussi aux mauvaises pratiques de référencement par multiplication cachée de mots-clés...

Désolé, Raphael, mais sans jouer les puristes intransigeants, je ne vois pas l'intérêt de ramener la présentation dans la structure du document. A tout prendre, un titre en image est à la fois plus conforme, plus sémantique, et ne pose pas plus de problèmes d'accessibilité, d'interopérabilité, d'indexation, etc.
Je suis un peu d'accord, même si le fait d'indiquer le title du lien comme identique à l'intitulé du lien n'est pas vraiment génant, mais c'est quand même marrant de faire mumuse avec les techniques !
Administrateur
Laurent Denis a écrit :
En revanche, elle s'apparente tout à fait elle aussi aux mauvaises pratiques de référencement par multiplication cachée de mots-clés...

Certes, je ne voyais pas cela comme ça. Mais cette technique (imparfaite) est également utilisée pour avoir des titres en image plus accessibles et pas seulement pour les référenceurs.

Laurent Denis a écrit :
Désolé, Raphael, mais sans jouer les puristes intransigeants, je ne vois pas l'intérêt de ramener la présentation dans la structure du document. A tout prendre, un titre en image est à la fois plus conforme, plus sémantique, et ne pose pas plus de problèmes d'accessibilité, d'interopérabilité, d'indexation, etc.

Oui bien sûr, mais les titres en image impliquent :
- une séparation incomplète de la structure et de la forme (cela ne facilite pas les mises à jour futures car il faut refaire toutes les images de tous les titres)
- une augmentation du poids qui peut être conséquente, même si ce n'est plus trop important
- des problèmes de référencement et d'indexation car une image avec alt est moins bien prise en compte.
Raphaël a écrit :

Certes, je ne voyais pas cela comme ça. Mais cette technique (imparfaite) est également utilisée pour avoir des titres en image plus accessibles et pas seulement pour les référenceurs.


Ahh oui c'est vrai ça :D en plus ça facilite la lecture (en laissant la souris sur texte) avec l'attribut title.

Disons qu'il est interessant de connaitre la technique, mais de ne pas en abuser, non ?

Sinon dans le même genre un effet graphique qui pourrait etre interessant c'est de mettre le title (quand il exite element Smiley title {...}) avec un effet filigrane (couleur très peu contrastée avec le fond) pour rajouter un peu de style :D

Genre pour des <pre>, on met class="PHP" class="CSS" class="JavaScript", ... et via CSS

pre
{
background: #fff ;
}
html > body pre[ class]:before /* hack pour éviter qu'IE interprete font, et margin */
/* il y a un espace entre [ et class pour eviter que ca soit interprété comme du BBcode*/
{
content: attr(class) ;
color: #eee ;
margin-top: 5px ;
font-size: 3em ;
font-style: italic ;
}


J'ai tapoté le code comme ça au filling, mais ca pourrait donner un résultat sympa en testant un peu.
Modifié le 30 Oct 2004 - 11:41
J'ai fait mumuse avec mon idée :

pre
{
	background: #333 ;
	color: #eee ;
}

pre[class]:before
{
	content: attr(class) ;
	font-size: 3em ;
	font-style: italic ;
	color: #af0 ;
}

Pas besoin de hack, le selecteur sert de hack tout seul :D
Mais par contre, je n'arrive pas à faire passer le texte du pre après le content généré...
J'ai essayé avec clear, sans succès et en mettant \n dans le content, idem...
Une idée ?
Administrateur
ElMoustiko a écrit :
J'ai fait mumuse avec mon idée :

pre
{
	background: #333 ;
	color: #eee ;
}

pre[class]:before
{
	content: attr(class) ;
	font-size: 3em ;
	font-style: italic ;
	color: #af0 ;
}

Pas besoin de hack, le selecteur sert de hack tout seul :D
Mais par contre, je n'arrive pas à faire passer le texte du pre après le content généré...
J'ai essayé avec clear, sans succès et en mettant \n dans le content, idem...
Une idée ?

display: block
Yep, impecable ! Merci du coup de pouce Raphaël ;) tellement simple que je n'y avait pas pensé !

Je trouve ça sympa comme rendu, nan ?

Il faudrait faire ensuite une coloration syntaxique suivant les class et gérer le tout via PHP (ou JS pourquoi pas...)
Raphael a écrit :

Certes, je ne voyais pas cela comme ça. Mais cette technique (imparfaite) est également utilisée pour avoir des titres en image plus accessibles et pas seulement pour les référenceurs.


? La syntaxe de base d'un titre en image accessible étant:
<h1><img ... alt="Equivalent textuel de l'image ici"></h1>

Je ne vois pas le rapport avec un title détourné ?

A quelle syntaxe fais-tu allusion exactement ?
<h1 title="Equivalent textuel de l'image ici'"><img ... alt="Equivalent textuel de l'image ici'"></h1>

... le title est inutile et sans justification
<h1 title="Equivalent textuel de l'image ici'"><img ... alt="'"></h1>

... le alt est mal renseigné
<h1 title="Equivalent textuel de l'image ici'"><img ...></h1>

... l'absence de alt est invalide.

Sur le fond, je n'ai rien contre l'idée de trouver un biais pour obtenir cet effet d'ombrage que CSS2 ne permet pas. Mais ce biais, pour être préférable à un texte en image, devrait AMHA respecter comme cahier des charges, par exemple:
- ne pas détourner le HTML de sa signification
- ne pas compromettre la restitution du contenu quelque-soit le media
- apporter un bénéfice par rapport au titre en image (effectivement, une gestion plus simple des modifications du texte).

Je crois avoir déjà mentionné la <edit>sIFR</edit> dans cet ordre d'idée, même si elle reste elle aussi une "bidouille".
Modifié le 30 Oct 2004 - 12:35
Pages :