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 :

Évolution de la propriété CSS position : la valeur sticky


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut Évolution de la propriété CSS position : la valeur sticky
    Tous les développeurs Web sont supposés connaître la propriété CSS position.
    Pour rappel, cette propriété permet de déterminer comment un élément HTML sera intégré dans le document.

    Cette propriété accepte quatre valeurs :
    • static : c'est la valeur par défaut, un élément avec cette valeur sera intégré dans le flux normal ;
    • relative : permet de positionner l'élément en fonction de l'emplacement qu'il aurait dû avoir dans le flux ;
    • absolute : permet de positionner l'élément par rapport à son ancêtre positionné (dont la valeur de position est différente de static) le plus proche ;
    • fixed : permet de positionner l'élément à un emplacement fixe de la fenêtre d'affichage (l'élément ne se déplace pas lors du scroll).


    Si ces quatre valeurs sont largement suffisantes pour la plupart des pages Web, certaines pratiques apparaissent et se généralisent qui justifieraient d'étendre les valeurs possibles.

    Parmi ces pratiques, celle consistant à intégrer un élément dans la page qui suit le défilement tant qu'il est visible puis se bloque à une position limite est de plus en plus répandue (sticky elements). Pour en voir un exemple, regardez comment se comporte la table des matières dans les articles de developpez.com.
    Pour réaliser cela, nous sommes actuellement obligés d'utiliser JavaScript et de modifier la propriété position en fonction de la valeur du scroll.

    C'est pour cela que les développeurs de Chrome ont eu l'idée d'ajouter une valeur possible pour la propriété position, la valeur sticky.

    Exemple :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    #sticky_element{
      position: -webkit-sticky;
      position: -moz-sticky;
      position: -ms-sticky;
      position: -o-sticky;
      position: sticky;
      top: 15px;
    }
    Dans cet exemple, l'élément dont l'id est sticky_element va se déplacer en même temps que la page tant qu'il sera à plus de 15 pixels du haut de la page, puis se figera pour rester toujours visible.
    Notez l'utilisation des préfixes vendeurs et leur ordre. Les préfixes vendeurs permettent d'utiliser des fonctionnalités (CSS ou JavaScript) qui sont encore expérimentales. Comme le comportement de ces fonctionnalités est susceptible d'évoluer en fonction de leur implémentation, on déclare toujours la propriété non préfixée (donc définitive et supposée conforme à la spécification) en dernier afin que celle-ci écrase les précédentes si elle est disponible.

    Malheureusement, le support navigateur est quasiment inexistant à l'heure actuelle et elle ne fait pas partie des spécifications du W3C.
    La propriété est bien reconnue en version préfixée pour Chrome et Safari sur iOS 6, mais pour le reste, elle n'est supportée que par les versions de développement de Chrome (Canary) et Firefox (Nightly).
    Cependant, cela reste une belle perspective pour un futur relativement proche.

    Que pensez-vous de cette évolution ?
    S'agit-il selon vous d'un gadget ou d'une évolution intéressante ?
    Quel autre type d'amélioration aimeriez-vous voir apparaitre ?

    Sources : RedTeamDesign - HTML5Rocks
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre expérimenté
    Avatar de Jarodd
    Profil pro
    Inscrit en
    Août 2005
    Messages
    851
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 851
    Points : 1 717
    Points
    1 717
    Par défaut
    Notez l'utilisation des préfixes vendeurs et leur ordre. Les préfixes vendeurs permettent d'utiliser des fonctionnalités (CSS ou JavaScript) qui sont encore expérimentales. Comme le comportement de ces fonctionnalités est susceptible d'évoluer en fonction de leur implémentation, on déclare toujours la propriété non préfixée (donc définitive et supposée conforme à la spécification) en dernier afin que celle-ci écrase les précédentes si elle est disponible.
    Alors pourquoi la propriété non-préfixée n'apparaît pas dans l'exemple ?

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Oh... la belle boulette !
    Bonne remarque !

    Je l'avais juste oubliée, je viens de la rajouter !

    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Ce sera une évolution encourageante notamment pour résoudre les problèmes de sticky footer en fixant top à 100%.

    Testé sur MAC depuis:
    • Safari 6 : NOK
    • Chrome 29 : NOK
    • Chrome Canary 31 : NOK
    • Nightly : OK


    Ce lien permet de vérifier si votre navigateur supporte cette propriété (même préfixée).

    Edit : Correction des tests suite à la remarque de Bovino (chrome:flags)
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  5. #5
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    298
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 298
    Points : 101
    Points
    101
    Par défaut
    je vois que c'est une bonne initiative, vraiment dommage que la plus part des navigateur ne connaissent pas cette propriété

  6. #6
    Membre régulier
    Inscrit en
    Mars 2002
    Messages
    53
    Détails du profil
    Informations forums :
    Inscription : Mars 2002
    Messages : 53
    Points : 112
    Points
    112
    Par défaut
    Malheureusement, le support navigateur est quasiment inexistant à l'heure actuelle et elle ne fait pas partie des spécifications du W3C.
    Que pensez-vous de cette évolution ?
    Évolution ou régression, cela me rappel les grandes heure de IE ou chacun fait ce qu'il veux dans son coin. Officiellement pour apporter de nouvelle fonction, mais surtout pour forcer à développer pour un navigateur et donc pousser les utilisateur à utiliser ce navigateur.

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Non, ce n'est pas exactement cela.

    Quand je dis qu'elle ne fait pas partie des spécifications du W3C, cela ne veut pas dire que ce n'est pas envisagé. Cela a même été proposé dès juin 2012.
    Ensuite, devenir une spécification demande un cheminement assez long ce qui n'empêche pas les navigateurs de commencer l'implémentation en parallèle, ce qui permet de faire remonter les retours d'expérience et d'affiner ce que sera la spécification. Donc ce n'est en rien le retour de la guerre des navigateurs des années 90 avec Netscape et IE.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre habitué
    Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Août 2004
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2004
    Messages : 83
    Points : 198
    Points
    198
    Par défaut
    comme jv2759 je ne sais pas si on peut voir ça comme une évolution positive, vu que c'est un navigateur (enfin, son moteur) qui l'implémente par envie...

    le W3C est un escargot apathique, mais le respect d'une norme est important pour éviter de se retrouver avec des disparités entre navigateurs, comme à l'époque d'IE.

    Edit: arf, j'ai pas vu ton message Bovino. une proposition ne veut pas dire grand chose tant qu'elle n'est pas validée par le W3C et qu'il n'y a pas au moins un draft de fait.

  9. #9
    Inactif  
    Inscrit en
    Septembre 2011
    Messages
    100
    Détails du profil
    Informations forums :
    Inscription : Septembre 2011
    Messages : 100
    Points : 122
    Points
    122
    Par défaut
    Il n'y a rien de plus désagréable que les éléments fixes sur un site, surtout quand ils affichent une publicité. Très mauvaise idée.

  10. #10
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Il y a une différence entre Sticky et fixed et leur utilisation ne se limite heureusement pas à placer des messages publicitaires gênants.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  11. #11
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par rodolphebrd
    Chrome : NOK
    Pour Chrome, il faut aller dans chrome:flags et activer l'option Activer les fonctionnalités expérimentales de Web Platform.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  12. #12
    Modérateur

    Avatar de kOrt3x
    Homme Profil pro
    Technicien Informatique/Webmaster
    Inscrit en
    Septembre 2006
    Messages
    3 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Technicien Informatique/Webmaster
    Secteur : Santé

    Informations forums :
    Inscription : Septembre 2006
    Messages : 3 650
    Points : 15 771
    Points
    15 771
    Par défaut
    Citation Envoyé par rodolphebrd Voir le message
    Ce sera une évolution encourageante notamment pour résoudre les problèmes de sticky footer en fixant top à 100%.

    Testé sur MAC depuis:
    • Safari 6 : NOK
    • Chrome 29 : NOK
    • Chrome Canary 31 : NOK
    • Nightly : OK


    Ce lien permet de vérifier si votre navigateur supporte cette propriété (même préfixée).
    Safari 7 le supporte déjà.
    La rubrique Mac
    Les cours & tutoriels Mac
    Critiques de Livres Mac & iOS
    FAQ Mac & iOS

    ________________________________________________________________________
    QuickEvent : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore)
    Mon Livre sur AppleScript : AppleScript: L'essentiel du langage et de ses applications

  13. #13
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Merci Bovino pour l'info, je ne connaissais pas.

    Donc :
    • Chrome 29 : OK
    • Chrome Canary 31 : OK


    kOrt3x : J'attends la mise à jour.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  14. #14
    Invité
    Invité(e)
    Par défaut
    ca reste quand même un simple effet c'est comprehensible que ça ne soit pas normalisé on n'est pas sur quelque chose de global au niveau du positionnement d’élément. et il est vrais que ca fait pensé a ie a sa grande époque

  15. #15
    Expert confirmé Avatar de Zefling
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2007
    Messages
    1 176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 176
    Points : 4 695
    Points
    4 695
    Par défaut
    Citation Envoyé par Jean-Georges Voir le message
    Il n'y a rien de plus désagréable que les éléments fixes sur un site, surtout quand ils affichent une publicité. Très mauvaise idée.
    Actuellement c'est fait par JS et ça reste fixe dans un cadre, contrairement à fixed. D'ailleurs fixed est très utilepour faire de éléments d'interfaces : menu ou admin.

  16. #16
    Expert confirmé

    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juillet 2009
    Messages
    1 030
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juillet 2009
    Messages : 1 030
    Points : 4 203
    Points
    4 203
    Par défaut
    Beurk ! J'imagine que la première utilisation qui en sera faite sera de coller des pubs gênantes. Ben oui, ils font ch... ces gens qui utilisent NoScript...

  17. #17
    Expert confirmé Avatar de Zefling
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2007
    Messages
    1 176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 176
    Points : 4 695
    Points
    4 695
    Par défaut
    Citation Envoyé par LSMetag Voir le message
    Beurk ! J'imagine que la première utilisation qui en sera faite sera de coller des pubs gênantes. Ben oui, ils font ch... ces gens qui utilisent NoScript...
    Ça changera pas le fait que le pub sont appelé par un script d'un autre domaine. Adblock marche très bien pour ça.

  18. #18
    Membre éprouvé Avatar de Shuty
    Homme Profil pro
    Ingénieur en développement
    Inscrit en
    Octobre 2012
    Messages
    630
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur en développement
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2012
    Messages : 630
    Points : 1 174
    Points
    1 174
    Par défaut
    Cool ! Il ne reste plus qu'à savoir quand cette nouvelle position rentrera dans les standars...
    Agence web Dim'Solution, créateur de solutions numériques
    Sites internet, ecommerce, logiciels, applications mobiles, référencement (SEO), plugin Prestashop, Magento, WordPress, Joomla!...

    Cours de trading gratuit | Envoyer des sms gratuitement | Envoyer des fax gratuitement | Plateforme de Fax à l'international

  19. #19
    Futur Membre du Club
    Inscrit en
    Juillet 2013
    Messages
    4
    Détails du profil
    Informations forums :
    Inscription : Juillet 2013
    Messages : 4
    Points : 5
    Points
    5
    Par défaut positionnement mal défini....apparemment.
    Il est amusant de voir sur le sujet du positionnement une page (celle-ci) avec le texte qui sort du cadre défini.(voir pièce jointe).
    Images attachées Images attachées  

Discussions similaires

  1. Récupérer la valeur d'une propriété css
    Par dust62 dans le forum jQuery
    Réponses: 2
    Dernier message: 21/04/2014, 13h02
  2. [JavaScript] [jquery]Trouver la valeur par defaut de propriétés css selon les navigateurs.
    Par SpaceFrog dans le forum Contribuez
    Réponses: 0
    Dernier message: 08/09/2010, 15h48
  3. Lire la valeur d'une propriété CSS par le Javascript
    Par boutmos dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 11/07/2008, 16h56
  4. [CSS] regrouper des valeurs communes
    Par nixonne dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 28/08/2005, 03h49
  5. [HTML/CSS] position absolute et centrage
    Par LE NEINDRE dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 23/08/2005, 11h11

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