IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

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


Sujet :

Publications (X)HTML et CSS

  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut Changer l'apparence d'un élément HTML en CSS3 en utilisant les styles par défaut des navigateurs


    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.

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 084
    Points
    8 084
    Par défaut
    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
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  3. #3
    Membre émérite

    Homme Profil pro
    Software Developer
    Inscrit en
    Mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 470
    Points : 2 368
    Points
    2 368
    Par défaut
    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?

  4. #4
    Membre éclairé

    Développeur Web
    Inscrit en
    Mars 2002
    Messages
    412
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2002
    Messages : 412
    Points : 657
    Points
    657
    Par défaut
    Citation Envoyé par alex_vino Voir le message
    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.

  5. #5
    Membre émérite

    Homme Profil pro
    Software Developer
    Inscrit en
    Mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 470
    Points : 2 368
    Points
    2 368
    Par défaut
    Citation Envoyé par laffreuxthomas Voir le message
    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.

  6. #6
    Membre éclairé

    Développeur Web
    Inscrit en
    Mars 2002
    Messages
    412
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2002
    Messages : 412
    Points : 657
    Points
    657
    Par défaut
    Citation Envoyé par alex_vino Voir le message
    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.

    Citation Envoyé par alex_vino Voir le message
    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.

  7. #7
    Membre éclairé

    Développeur Web
    Inscrit en
    Mars 2002
    Messages
    412
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2002
    Messages : 412
    Points : 657
    Points
    657
    Par défaut
    Citation Envoyé par alex_vino Voir le message
    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.

  8. #8
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    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;')

  9. #9
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 084
    Points
    8 084
    Par défaut
    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".
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  10. #10
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    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; ).)

  11. #11
    Membre éclairé

    Développeur Web
    Inscrit en
    Mars 2002
    Messages
    412
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2002
    Messages : 412
    Points : 657
    Points
    657
    Par défaut
    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.

  12. #12
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    Citation 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;.

  13. #13
    Membre éclairé

    Développeur Web
    Inscrit en
    Mars 2002
    Messages
    412
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2002
    Messages : 412
    Points : 657
    Points
    657
    Par défaut
    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.

  14. #14
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    @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 !

  15. #15
    Membre émérite

    Homme Profil pro
    Software Developer
    Inscrit en
    Mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 470
    Points : 2 368
    Points
    2 368
    Par défaut
    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.

  16. #16
    Membre éclairé

    Développeur Web
    Inscrit en
    Mars 2002
    Messages
    412
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2002
    Messages : 412
    Points : 657
    Points
    657
    Par défaut
    @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 !

    Citation Envoyé par alex_vino Voir le message
    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.

  17. #17
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    Citation 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 !

    Citation 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 ^^

  18. #18
    Membre éclairé

    Développeur Web
    Inscrit en
    Mars 2002
    Messages
    412
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2002
    Messages : 412
    Points : 657
    Points
    657
    Par défaut
    Citation Envoyé par Muchos Voir le message
    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").

    Citation Envoyé par Muchos Voir le message
    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.

Discussions similaires

  1. Réponses: 17
    Dernier message: 23/09/2012, 16h21
  2. Changer les icones par défaut du composant TDirectoryListBox
    Par the_clansman dans le forum Composants VCL
    Réponses: 6
    Dernier message: 17/05/2008, 23h58
  3. [DOM] utiliser les fonctions Node sur des balises html
    Par durthu dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 29/10/2007, 15h42
  4. [CKEditor] changer le style par défaut
    Par dedel53 dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 27/03/2007, 10h21
  5. [CSS] copie des styles par défaut html...possible?
    Par luta dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 27/10/2005, 09h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo