[Article] Changer l'apparence d'un élément HTML en CSS3 en utilisant les styles par défaut des navigateurs

[FirePrawn]

Je vous propose une traduction de l'article anglophone Changing Appearance Of Element With CSS par Paul Underwood : CSS3 : changer l'apparence d'un élément en utilisant les styles par défaut des navigateurs.

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

CSS3 : changer l'apparence d'un élément en utilisant les styles par défaut des navigateurs.

[Torgar]

Bien pratique cette propriété. Je la mets dans un coin de ma tête et l'utiliserais quand ça sera un peu mieux supporté.

Merci pour ces traductions

[alex_vino]

Merci pour la traduction

Par contre j'ai du mal a comprendre l'intéret de la chose, dans quels cas cela pourrait etre utile?

[laffreuxthomas]

Envoyé par alex_vino

Par contre j'ai du mal a comprendre l'intéret de la chose, dans quels cas cela pourrait etre utile?

Depuis HTML 5 les applications Web et celles en client lourd sont en train de se rapprocher. J'imagine que l'objectif est de faciliter le développement d'applications Web visuellement bien intégrées dans l'OS.

[alex_vino]

Envoyé par laffreuxthomas

Depuis HTML 5 les applications Web et celles en client lourd sont en train de se rapprocher. J'imagine que l'objectif est de faciliter le développement d'applications Web visuellement bien intégrées dans l'OS.

Les applications web permettent de tres facilement faire de sublimes designs avec des animations, sur client lourd le résultat est rarement aussi bon, quand il arrive a la hauteur c'est au prix d'un tres gros travail.
Les entreprises ont besoin d'avoir un design adapté a elles (style, couleur), hors les controles "systemes" sont basiques et tres répandus, il n'y aurait alors aucune différenciation avec les concurrents.

De plus cet article ne concerne pas l'OS mais les navigateurs (ou plutot les moteurs de rendu).

A part avec Windows 8, je ne vois pas vraiment de rapprochement entre les clients lourd et les sites web.

Je penses qu'il doit y avoir un intéret plutot pour les applications Intranet, mais j'ai un peu de mal a cerner lequel.

[laffreuxthomas]

Envoyé par alex_vino

A part avec Windows 8, je ne vois pas vraiment de rapprochement entre les clients lourd et les sites web.

Sous Gnome Shell les plugins sont codés en JavaScript.

Envoyé par alex_vino

Je penses qu'il doit y avoir un intéret plutot pour les applications Intranet, mais j'ai un peu de mal a cerner lequel.

Je ne savais pas que les applications Internet pouvaient avoir des "intérêts" propres. [EDIT] Au temps pour moi, le "I" majuscule m'avait trompé. Ben du coup vous avez dû passer à côté de Google Docs, Facebook et de tout un tas d'applications Web pas forcément intranet et qui étaient jusque là bien à l'étroit dans le Web 2.0.

HTML 5 fournit des API JavaScript (drag & drop, stockage local, primitives de dessin, contrôles multimédias, base de données indexée, web sockets, multi-tâches) qui donnent aux applications Web des possibilités jusque là réservées aux clients lourds. Cela incite les éditeurs de systèmes d'exploitation à opérer une fusion des API clients lourds avec HTML 5. Et tant qu'à faire de tout remettre à plat, un rapprochement avec les interfaces tactiles.

Et cela pourrait expliquer (c'est une hypothèse) que des navigateurs proposent un accès au look & feel par défaut, lequel est intégré dans celui de l'OS.

[laffreuxthomas]

Envoyé par alex_vino

A part avec Windows 8, je ne vois pas vraiment de rapprochement entre les clients lourd et les sites web.

Ajoutons le futur Firefox OS.

[Muchos]

La propriété appearance est alléchante, mais pourquoi ne pas avoir ajouté plus d'attributs à la propriété 'display' ? (ex: `display: button;' au lieu de `appearance: button;')

[Torgar]

Comment cacher sans conserver sa place dans le flux (donc display: none), un élément dont le display est déjà à button ?
Il faudrait alors le contenir dans un autre élément et le cacher ? Pas pratique et confus. J'aurai tendance à considérer "appearance" comme "déguisement".

[Muchos]

Bien vu ! Et pourtant, il existe plein d'autres valeurs pour display, qui ne sont pas compatibles avec none

Selon moi, cacher un élément devrait être dévolu à visiblity, car ses possibilités semblent très peu développées (j'ai utilisé collapse uniquement dans des dispositions en tableaux (<table> ou display: table; ).)

[laffreuxthomas]

Torgar a raison. La propriété "display" n'est pas "display-as". "Display" concerne le positionnement et non pas l'habillage. Et par exemple en la mettant à "none", l'élément est complètement ignoré (et par exemple une image en display:none ne sera pas chargée).

La propriété "visibility" est en revanche de l'habillage, tout comme pour "appearance". "visibility: hidden" rend l'élément invisible tout en lui conservant sa place dans le flux.

[Muchos]

Envoyé par laffreuxthomas

"Display" concerne le positionnement et non pas l'habillage.

Non, ça concerne le comportement, et souvent donc le rendu (display signifie "afficher, exposer").

Et par exemple en la mettant à "none", l'élément est complètement ignoré (et par exemple une image en display:none ne sera pas chargée).

Malheureusement non, les contenus en display: none; sont préchargés [en].
Par contre, la majorité des lecteurs d'écran ignore effectivement ce qui est display: none;.

[laffreuxthomas]

J'ai commencé par t'incendier et puis je me suis relu et tout compte fait rien ne sert de s'énerver. Je te résume tout de même ce que je pense : Muchos tu gagnerais à envisager plus humblement que certains concepts t'échappent encore. Trop de fierté empêche de progresser. Ici dans cette discussion toutes tes assertions sont inexactes ou carrément fausses, et le plus probable est que tu ne comprends pas les articles que tu cites.
Voilà. En essayant d'être constructif malgré tout. Mais ce n'est pas toujours facile.

[Muchos]

@laffreuxthomas :
Aucun problème ! Je débute en html/css, j'essaye d'aider quand même, mais si je dis des conneries, faut pas hésiter à taper.
Au demeurant, aucune fierté dans mon post précédent. Mais désolé si j'ai mal compris et utilisé ces références.

Enfin, pour revenir une dernière fois sur la propriété appearance, je trouve ça super. J'ai seulement dit que j'aurais dévolu son rôle à display et que display: none; devrait passer dans visibility. Mais vus mes moinsages, je pense que je suis à côté de la plaque…
Tant que le w3c ne l'est pas, c'est le principal !

[alex_vino]

On n'est pas la pour faire la norme a ce que je sache, a quoi bon changer le nom des propriétés, merci de ne pas trop dériver du sujet initial

Par contre si tu ne sait pas alors pose la question aux autres avant, ou dit que tu n'es pas sur, ca peux éviter aux débutants d'apprendre des choses fausses. Surtout que les questions techniques devraient etre plutot posées ailleurs sur le forum

Par contre pour le W3C parfois je me demande, il y a d'ailleurs une discussion sur le sujet sur le forum.

[laffreuxthomas]

@Muchos, du coup je te donne tes approximations : "display" concerne bien le mode de positionnement, aux côtés de "float" et "position". Par exemple "display: inline-block;" n'a rien à voir avec la manière d'habiller un élément.

Ensuite d'une manière générale les images en "display: none" ne sont pas chargées. Et l'article que tu cites prévient précisément que attention dans le cas d'une utilisation dans des media queries on observe des chargements dans des cas où l'on penserait que ça ne devrait pas.

Le dernier article que tu donnes concerne l'accessibilité aux malvoyants. L'auteur prévient que la technique du "display:none" pour ajouter du contenu par défaut invisible mais révélé par les "lecteurs d'écrans" n'est pas une bonne idée puisque "display:none" revient à ignorer l'élément, et les lecteurs d'écrans n'échappent pas à la règle. On est loin du sujet !

Envoyé par alex_vino

Par contre pour le W3C parfois je me demande, il y a d'ailleurs une discussion sur le sujet sur le forum.

Ah ? Où ?
Pour ma part le truc que je trouve le plus mal pensé, c'est d'utiliser les ID pour relier les "label" aux champs via l'attribut "for". ID sert d'ancre, il devrait donc être lisible et localisé alors que la liaison avec le label est nécessairement un aspect technique.

[Muchos]

Envoyé par laffreuxthomas

"display" concerne bien le mode de positionnement, aux côtés de "float" et "position".

Effectivement, elle est classé parmi ces propriétés.

Ensuite d'une manière générale les images en "display: none" ne sont pas chargées.

Désolé, mais je persiste !

Envoyé par alex_vino

On n'est pas la pour faire la norme a ce que je sache, a quoi bon changer le nom des propriétés, merci de ne pas trop dériver du sujet initial

Bof ! On peut quand même critiquer les langages qu'on utilise, non ? Il y a ici des tas de trolls débats sur la syntaxe de php ^^

[laffreuxthomas]

Envoyé par Muchos

Désolé, mais je persiste !

Ah ? J'avais lu le contraire sans chercher à recouper l'information. Merci pour la remise en question. Manifestement la norme se tait sur le sujet et les navigateurs font ce qu'ils veulent. Le W3C fournit une page pour recenser les navigateurs qui chargent et ceux qui ne chargent pas. D'après ce que je comprends c'est un test en live. Pour ajouter votre navigateur en bas d'une des deux listes, chargez cette page (le mien charge le "display:none").

Envoyé par Muchos

Bof ! On peut quand même critiquer les langages qu'on utilise, non ? Il y a ici des tas de trolls débats sur la syntaxe de php ^^

Essayer de comprendre pourquoi ceux qui font les normes ont pris telle ou telle décision est plus constructif que de les critiquer, surtout de la part d'un débutant en HTML/CSS.