Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 18 sur 18
  1. #1
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 141
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 141
    Points : 22 085
    Points
    22 085

    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.

    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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/Modérateur

    Avatar de Torgar
    Homme Profil pro Jérémy .B.
    Recherche emploi
    Inscrit en
    août 2007
    Messages
    2 338
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérémy .B.
    Âge : 28
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Recherche emploi

    Informations forums :
    Inscription : août 2007
    Messages : 2 338
    Points : 7 874
    Points
    7 874

    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 Expert

    Homme Profil pro Gilles Vino
    Software Developer
    Inscrit en
    mars 2008
    Messages
    1 477
    Détails du profil
    Informations personnelles :
    Nom : Homme Gilles Vino
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : mars 2008
    Messages : 1 477
    Points : 2 276
    Points
    2 276

    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 éprouvé
    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 408
    Points
    408

    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 Expert

    Homme Profil pro Gilles Vino
    Software Developer
    Inscrit en
    mars 2008
    Messages
    1 477
    Détails du profil
    Informations personnelles :
    Nom : Homme Gilles Vino
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : mars 2008
    Messages : 1 477
    Points : 2 276
    Points
    2 276

    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 éprouvé
    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 408
    Points
    408

    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 éprouvé
    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 408
    Points
    408

    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
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 504
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 504
    Points : 3 143
    Points
    3 143

    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;')

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  9. #9
    Rédacteur/Modérateur

    Avatar de Torgar
    Homme Profil pro Jérémy .B.
    Recherche emploi
    Inscrit en
    août 2007
    Messages
    2 338
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérémy .B.
    Âge : 28
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Recherche emploi

    Informations forums :
    Inscription : août 2007
    Messages : 2 338
    Points : 7 874
    Points
    7 874

    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
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 504
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 504
    Points : 3 143
    Points
    3 143

    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; ).)

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  11. #11
    Membre éprouvé
    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 408
    Points
    408

    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
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 504
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 504
    Points : 3 143
    Points
    3 143

    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;.

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  13. #13
    Membre éprouvé
    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 408
    Points
    408

    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
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 504
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 504
    Points : 3 143
    Points
    3 143

    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 !

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  15. #15
    Membre Expert

    Homme Profil pro Gilles Vino
    Software Developer
    Inscrit en
    mars 2008
    Messages
    1 477
    Détails du profil
    Informations personnelles :
    Nom : Homme Gilles Vino
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : mars 2008
    Messages : 1 477
    Points : 2 276
    Points
    2 276

    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 éprouvé
    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 408
    Points
    408

    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
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 504
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 504
    Points : 3 143
    Points
    3 143

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

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  18. #18
    Membre éprouvé
    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 408
    Points
    408

    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.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •