Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

  • https://developer.mozilla.org
  • /fr
  • /docs

Technologies Web pour Développeurs | MDN

/Web

  • ►/HTTP
    • ►/CORS
    • ►/Basics_of_HTTP
      • ►/MIME_types
        • ►/Complete_list_of_MIME_types
  • ►/CSS
    • ►/:has
    • ►/gradient
    • ►/Scaling_of_SVG_backgrounds
    • ►/aspect-ratio
    • ►/clamp()
    • ►/Requ%C3%AAtes_m%C3%A9dia
      • ►/Tester_les_media_queries
    • ►/CSS_Grid_Layout
      • ►/Basic_Concepts_of_Grid_Layout
    • ►/CSS_Flexible_Box_Layout
    • ►/@media
      • ►/prefers-color-scheme
    • ►/Disposition_flexbox_CSS
      • ►/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible
      • ►/Ordonner_%C3%A9l%C3%A9ments_flexibles
      • ►/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_de_l_axe_principal
      • ►/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles
      • ►/Cas_utilisation_flexbox
      • ►/R%C3%A9trocompatibilite_de_flexbox
      • ►/Concepts_de_base_flexbox
      • ►/Liens_entre_flexbox_et_les_autres_dispositions
  • ►/Guide
    • ►/HTML
      • ►/Formulaires
        • ►/Validation_donnees_formulaire
  • ►/HTML
    • ►/Sections_and_Outlines_of_an_HTML5_document
    • ►/Element
      • ►/details
      • ►/marquee
      • ►/a
        • ►#attr-ping
    • ►/Pr%C3%A9charger_du_contenu
  • ►/API
    • ►/Web_Speech_API
      • ►/Using_the_Web_Speech_API
    • ►/WebXR_Device_API
    • ►/Fetch_API
      • ►/Using_Fetch
    • ►/Window
      • ►/postMessage
      • ►/matchMedia
    • ►/File
      • ►/Using_files_from_web_applications
    • ►/Document
      • ►/execCommand
    • ►/AudioContext
      • ►/currentTime
  • ►/JavaScript
    • ►/Reference
      • ►/Op%C3%A9rateurs
        • ►/Optional_chaining
      • ►/Fonctions
        • ►/Valeurs_par_d%C3%A9faut_des_arguments
0 | 20
  • @arno
    ARNO* @arno ART LIBRE 5/08/2022
    3
    @monolecte
    @cy_altern
    @rastapopoulos
    3

    Il existe maintenant un sélecteur CSS pour détecter si l’élément ciblé contient quelque chose. Dans l’exemple donné, détecter si un lien (a) contient une image (img) :

    a:has(> img)

    Pour l’heure, uniquement dans Safari. Mais Chrome l’aura à partir de la prochaine version. (Et par contre, comme souvent avec ces nouveaux pseudo-sélecteurs : c’est une tannée pour que ça dégrade correctement sur un vieux brouteurs.)

    Selectors Level 4
    ▻https://drafts.csswg.org/selectors/#has-pseudo

    4.5. The Relational Pseudo-class: :has()

    The relational pseudo-class, :has(), is a functional pseudo-class taking a <forgiving-relative-selector-list> as an argument. It represents an element if any of the relative selectors would match at least one element when anchored against this element.

    :has() pseudo-class cannot be nested; :has() is not valid within :has().

    For example, the following selector matches only <a> elements that contain an <img> child:

    a:has(> img)

    The following selector matches a <dt> element immediately followed by another <dt> element:
    ``dt:has(+ dt)``
    The following selector matches <section> elements that don’t contain any heading elements:
    section:not(:has(h1, h2, h3, h4, h5, h6))

    Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes, like:
    section:has(:not(h1, h2, h3, h4, h5, h6))

    ...would result in matching any <section> element which contains anything that’s not a heading element.

    ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 5/08/2022

      Testé sous Safari (forcément) : oui, on peut styler un contenant selon que le bouton qu’il contient a été coché ou non :

      .choix:has(input:checked) {}

      Oh là làààààààà (émoji étoiles dans les yeux).

      ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 5/08/2022

      Ce que je fais pour que ça se dégrade de manière contrôlée dans ce cas :

      .choix {
          // Tous les brouteurs
          // i.e. comportement si :has() n'est compris
      }
      .choix:has(input) {
          // Comportement si :has() est compris
      }
      .choix:has(input:checked) {
          // Comportement si :has() est compris
          // et checkbox cochée.
      }

      De cette façon non seulement je peux styler le contenant si la checkbox est cochée, mais je peux aussi avoir un style adapté si ce « changement » de style en fonction des cases cochées n’est pas reconnu.

      Par exemple, si navigateur compatible, je veux que la case soit par défaut grisée, et colorée si la case est cochée :

      https://i.imgur.com/EIBPdca.jpg

      Mais sur navigateur non compatible, je ne veux pas rester avec une interface grise, qui donnerait l’impression que ça ne fonctionne pas. Donc dans ce cas les cases sont toujours colorées :

      https://i.imgur.com/gizLaZx.jpg

      ARNO* @arno ART LIBRE
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 7/08/2022

      voir aussi ▻https://developer.mozilla.org/fr/docs/Web/CSS/:has

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 25/05/2022

    Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
    ▻https://stripesgenerator.com

    Générateur de rayures en background-image « pure CSS »

    Voir aussi Mozdev pour la doc de linear-gradient : ▻https://developer.mozilla.org/fr/docs/Web/CSS/gradient

    #rayure #générateur #background-image #css

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 25/05/2022

      mwoof, la plupart des exemples ça me fait des énormes crénelages super moches :(

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 7/01/2022

    Redimensionnement d’arrière-plans SVG - CSS : Feuilles de style en cascade | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds

    Règles de redimensionnement des fichiers SVG en background-image

    #SVG #background-image #background-size

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/09/2021
    5
    @monolecte
    @arno
    @7h36
    @rastapopoulos
    @tofulm
    5

    Reducing The Need For Pseudo-Elements — Smashing Magazine
    ▻https://www.smashingmagazine.com/2021/09/reducing-need-pseudo-elements

    https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9180b600-6062-410f-ac44-44f11e67d0f4/angle-arrow-anatomy-01.png

    For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave #pseudo-elements behind in some scenarios, thanks to newer #CSS properties. Pseudo-elements still have a place. This article is not “never use pseudo-elements” but rather “we no longer have to use pseudo-elements as much”. We can style a number of popular user interface elements without the need for pseudo-elements. By relying less on pseudo-elements, we can write less CSS, eliminate nested elements, ignore stacking context issues, and forget about positioning.

    Quelques cas pratiques sympas cf : #Angled Buttons, Button Wipes, Tiles With Screen Color #Overlays

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/09/2021

      « Marcel Moreau », c’est so frenchy

      Sinon j’avais déjà lu sur cette propriété l’année dernière, mais ça va être tellement cool quand aspect-ratio sera vraiment utilisable… (là ça n’est apparu que dans les navs de 2021, donc bon, en prod bof)
      ▻https://developer.mozilla.org/fr/docs/Web/CSS/aspect-ratio

      #intégration #web

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 26/04/2021

    Utiliser l’API Web Speech - Référence Web API | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

    L’API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée « text to speech », ou tts) — qui ouvrent de nouvelles possibiités d’accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.

    ARNO* @arno ART LIBRE
    • @vanderling
      Vanderling @vanderling 27/04/2021

      je ne parle pas aux machines

      Vanderling @vanderling
    • @vanderling
      Vanderling @vanderling 27/04/2021

      you’re talking to me ?
      ▻https://www.liberation.fr/politique/a-nice-le-stress-des-haut-parleurs-sanitaires-20210424_3OXFM34JSBANTKWOXT

      Depuis un an, les habitants, usés, doivent vivre au son des rappels audios de la police municipale, rabâchant les consignes de lutte contre l’épidémie de Covid-19.

      Vanderling @vanderling
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 22/04/2021
    9
    @b_b
    @marcimat
    @gblin
    @jeanmarie
    @arno
    @7h36
    @monolecte
    @baroug
    @alexcorp
    9

    <details> - HTML (HyperText Markup Language) | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/details

    Un afficher/masquer en pur HTML 5 (sans JS ni CSS) : une balise <details> avec un <summary> pour faire le titre clicable
    ...et pour ajouter une animation : ▻https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal

    Petit bémol : point de vue accessibilité ça ne semble pas idéal : ▻https://daverupert.com/2019/12/why-details-is-not-an-accordion (on se le réservera pour les outils où référencement et accessibilité ne sont pas des paramètres pris en compte donc...)

    #HTML #afficher_masquer #summary

    cy_altern @cy_altern CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 22/04/2021

      Marrant que ce truc soit aussi rigoureusement inconnu, malgré une excellente compatibilité (96% sur caniuse).

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/04/2021

      Ça veut rien c’est que c’est pas accessible : si c’est dans la norme HTML5 c’est que c’est accessible quand c’est utilisé pour ce que c’est prévu.

      Mais c’est pas accessible pour en faire autre chose.

      Donc la question est : pour quelle(s) utilisation(s) précise(s) c’est prévu ?

      RastaPopoulos @rastapopoulos CC BY-NC
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 23/04/2021

      Ça a l’air d’être ça.

      The <details> creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label can be provided using the <summary> element.

      A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure widget.

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 26/11/2020

    Window.postMessage - Référence Web API | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage

    Une méthode pour la communication entre fenêtres/onglets de navigateur :

    La méthode window.postMessage, quand elle est appelée, provoque l’envoi d’un MessageEvent à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d’évènements restants si window.postMessage est appelée depuis un gestionnaire d’évènement, des timeouts en attente enregistrées auparavant, etc.) Le MessageEvent est de type message, a une propriété data qui est initialisée à la valeur du premier argument passé à window.postMessage, une propriété origin correspondant à l’origine du document principal de la fenêtre appelant window.postMessage au moment où window.postMessage a été appelée, et une propriété source qui est la fenêtre depuis laquelle window.postMessage est appelée. (les autres propriétés standard d’évènement sont présentes avec leurs valeurs attendues).

    ...et les précautions de sécurités préconisées :

    Précautions de sécurité
    – Si vous ne prévoyez pas de recevoir de messages depuis d’autres sites, n’ajoutez pas de gestionnaire d’évènement pour les évènements message. C’est un moyen sûr d’éviter les problèmes de sécurité.
    – Si vous prévoyez de recevoir des messages depuis d’autres sites, vérifiez toujours l’identité de l’expéditeur à l’aide des propriétés origin et si possible source. Toute fenêtre (y compris, par exemple, ▻http://evil.example.com) peut envoyer un message à toute autre fenêtre, et vous n’avez aucune garantie qu’un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l’identité, vous devriez toujours vérifier la syntaxe du message reçu. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.
    – Spécifiez toujours explicitement une origine de destination, jamais *, quand vous utilisez postMessage pour envoyer des données à d’autres fenêtres. Un site malicieux peut changer l’adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l’aide de postMessage.

    #postMessage #javascript #politique_de_sécurité #Same_Origin_Policy #SOP

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 17/11/2020
    3
    @simplicissimus
    @biggrizzly
    @suske
    3
    @seenthis

    @seenthis la petite nouveauté de la semaine, les posts issus d’un flux RSS sont marqués comme tel, cf ▻https://github.com/seenthis/seenthis_squelettes/issues/177

    Visuellement ça ne donne pas grand chose, à part la mention « via RSS » en bas du message à côté du nom de la personne qui poste.

    b_b @b_b PUBLIC DOMAIN
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 17/11/2020

      J’aime beaucoup, mais je me dis que la mention pourrait être en gris comme les autres mentions sur la même ligne. C’est possible ?

      BigGrizzly @biggrizzly CC BY-NC-SA
    • @simplicissimus
      Simplicissimus @simplicissimus 17/11/2020

      discret, mais efficace !

      Simplicissimus @simplicissimus
    • @marcimat
      marcimat @marcimat 17/11/2020
      @biggrizzly

      Bonne idée.
      Même remarque que @biggrizzly, je le verrais bien comme la ligne en gris, peut être avec un logo RSS : en tout cas là sur ▻https://seenthis.net/messages/887016 il est après la Licence et c’est confusionnant du coup me semble t’il.

      marcimat @marcimat
    • @fil
      Fil @fil 17/11/2020

      est-ce que ça s’enlève si on édite le post ? (je demande ça pour alimenter la conversation, je n’ai pas d’avis sur le sujet :))

      Fil @fil
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 17/11/2020

      Ça n’a pas l’air de s’enlever.

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/11/2020
      @marcimat

      @marcimat arf bien vu pour l’affichage après la licence, je corrige ça asap.

      b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/11/2020
      @marcimat @biggrizzly @fil @monolecte

      @marcimat & @biggrizzly voilà, c’est affiché au bon endroit et en gris comme demandé.

      @fil & @monolecte faites moi signe s’il faut adapter afin que la mention soit retirée quand on édite un post RSS après coup.

      b_b @b_b PUBLIC DOMAIN
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 18/11/2020

      Impeccable IMHO, bravo et merci !

      Pas d’opinion sur le fait de supprimer la mention en cas d’édition d’un post rss...

      BigGrizzly @biggrizzly CC BY-NC-SA
    • @fil
      Fil @fil 18/11/2020

      à la réflexion je crois que c’est mieux si on enlève la mention après une édition manuelle

      Fil @fil
    • @marcimat
      marcimat @marcimat 18/11/2020

      Donc après édition, ça affichera @user <del>via RSS</del><blink>(modifié)</blink> :)

      marcimat @marcimat
    • @fil
      Fil @fil 18/11/2020

      ou <marquee>, j’hésite :)

      Fil @fil
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/11/2020

      rhalala, vous payez votre PR où je m’y colle ?

      b_b @b_b PUBLIC DOMAIN
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 18/11/2020
      @biggrizzly

      Comme @biggrizzly, je n’ai pas d’opinion… mais c’est mieux en tout gris, effectivement.

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @marcimat
      marcimat @marcimat 18/11/2020

      Marquee. Ça m’était sorti de la tête ! ▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/marquee
      Je n’en reviens pas… ça fonctionne... encore !

      marcimat @marcimat
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/11/2020
      @fil @marcimat

      @fil et @marcimat voilà c’est en place ▻https://github.com/seenthis/seenthis/commit/47cc4130a3466d58acee71a05c2a4a78a353749a mais sans marquee blink ou autre, désolé :p

      b_b @b_b PUBLIC DOMAIN
    • @suske
      Suske @suske 21/11/2020

      #lol <marquee>c bôôô </marquee>

      Suske @suske
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 16/11/2020
    1
    @arno
    1

    clamp() - CSS : Feuilles de style en cascade | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/CSS/clamp()

    La fonction CSS clamp() permet de ramener (d’écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction clamp() peut être utilisée à tout endroit où une valeur de type <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> peut être utilisée.

    #clamp #css #calcul #maximum_minimum

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 1/11/2020
    2
    @cocoadaemon
    @touti
    2

    Quelqu’un a déjà joué avec WebXR ?
    ▻https://www.w3.org/TR/webxr
    ▻https://immersive-web.github.io
    ▻https://developer.mozilla.org/fr/docs/Web/API/WebXR_Device_API
    ▻https://ios-viewer.webxrexperiments.com

    ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 1/11/2020
      @fil

      Je pense que je vais jouer avec A-Frame :
      ►https://aframe.io

      Et donc @fil l’année dernière :
      ▻https://seenthis.net/messages/778672

      ARNO* @arno ART LIBRE
    • @fil
      Fil @fil 1/11/2020

      aframe c’est vraiment bien : facile comme du HTML, tu crées tes objets dans un DOM avec des attributs ; et c’est rapide (basé sur three.js). Quand il faut ajouter des plugins pour coder ton propre webgl ça devient un peu plus complexe, forcément.

      Fil @fil
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 11/09/2020
    2
    @rastapopoulos
    @cy_altern
    2

    Chaînage optionnel (optional chaining) - #JavaScript | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining

    L’opérateur de chaînage optionnel ?. permet de lire la valeur d’une propriété située profondément dans une chaîne d’objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L’opérateur ?. fonctionne de manière similaire à l’opérateur de chaînage ., à ceci près qu’au lieu de causer une erreur si une référence est null ou undefined, l’expression se court-circuite avec undefined pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne undefined si la fonction donnée n’existe pas.

    Découvert dans les notes de version de codium cf :

    Use the new convert to optional chain refactoring to quickly convert a sequence of expressions such as a && a.b && a.b.c() to instead use optional chaining: a?.b?.c(). Just select an expression to use it:

    https://code.visualstudio.com/assets/updates/1_49/ts-convert-chain.gif

    #optional_chaining #object #property #test

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/09/2020

      par contre ça vaut que pour les navs relativement récents (cette année seulement), donc quand c’est pour du dev JS côté serveur ou cli, genre avec node, ça va, mais si c’est pour du code exécuté par les navs, ça fera des erreurs chez encore pas mal de monde

      RastaPopoulos @rastapopoulos CC BY-NC
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 12/09/2020
      @rastapopoulos

      @RastaPopoulos : l’écriture semble tellement pratique que tu peux outrepasser le problème des navigateurs en codant en ES6 avec (par exemple) Gulp.babel pour générer le code « JS old style » :

      if (toto?.titi?.tata === 'patate') {

      est transformé en :
      if ((toto === null || toto === void 0 ? void 0 : (_toto$titi = toto.titi) === null || _toto$titi === void 0 ? void 0 : _toto$titi.tata) === 'patate') {

      Gulp + babel : ▻https://cobwwweb.com/compile-es6-code-gulp-babel-part-1

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 2/09/2020

    Utiliser Fetch - Référence Web API | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch

    L’API Fetch fournit une interface JavaScript pour l’accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale fetch() qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.
    Ce genre de fonctionnalité était auparavant réalisé avec XMLHttpRequest. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme Service Workers. Fetch fournit aussi un endroit unique et logique pour la définition d’autres concepts liés à HTTP comme CORS et les extensions d’HTTP.

    #fetch #javascript #httpRequest #asynchrone

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 3/02/2020
    1
    @tofulm
    1

    La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
    ▻https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

    Utiliser les media query en javascript
    Voir aussi :
    – la doc MDN : ▻https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
    – des exemples : ▻https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Tester_les_media_queries

    #javascript #media_query #matchMedia

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 22/01/2020

    Éléments HTML5 de structure - romy.tetue.net
    ▻http://romy.tetue.net/elements-html-5-de-structure

    Le mémo de romy.tetue.net pour l’organisation de la structure d’une page en HTML5
    Sur les imbrications section/article voir aussi : ▻https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
    Sur la structuration implicite du plan des éléments de la page généré par ces balises, voir : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

    #html5 #layout #structure #section #article

    cy_altern @cy_altern CC BY-SA
    • @tetue
      tetue @tetue CC BY 23/01/2020

      Sans oublier <main> (à la place de <div id="content">) qui a été ajouté à la spec HTML5 ultérieurement.

      tetue @tetue CC BY
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 24/01/2020

      merci pour la précision !

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 6/09/2019
    3
    @tofulm
    @jeanmarie
    @b_b
    3

    Flexbox ou Grid Layout ? - Alsacreations
    ▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

    CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
    Voir aussi :
    – ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
    – ▻https://la-cascade.io/utiliser-grid-ou-flexbox
    – sur MDN :
    . ressources pour grid layout :
    concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
    Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
    Exemples : ►https://gridbyexample.com/examples
    . ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

    #CSS #grid #flexbox #layout

    cy_altern @cy_altern CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 7/09/2019

      Merci pour ces ressources

      #webdev #développement #intégrationweb

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 8/04/2019
    1
    @tofulm
    1

    Chrome, Safari et d’autres navigateurs ne vont plus permettre de désactiver l’audit de lien, qui permet de suivre les clics sur les liens de sites
    ▻https://www.developpez.com/actu/255113/Chrome-Safari-et-d-autres-navigateurs-ne-vont-plus-permettre-de-desactiv

    L’article original : ▻https://lapcatsoftware.com/articles/Safari-link-tracking.html

    L’audit de lien dont il est question ici est l’attribut « ping » des balises « a » (= lien hypertexte) qui entraîne un POST tout à fait irrespectueux de la vie privée sur l’URL donnée dans la valeur de l’attribut : cf la doc de cet attribut sur MDN : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/a#attr-ping qui précise bien :

    Cet attribut est généralement utilisé pour tracer un utilisateur.

    Cet attribut a été introduit par la version 5.3 de HTML5 : cf ▻https://www.w3.org/TR/html53/links.html#sec-hyperlink-auditing
    A noter un début de discussion remettant en cause la pertinence technique du mécanisme utilisé qui pose clairement ses enjeux pour le W3C :

    Hyperlink auditing is important because advertising and referral-based user tracking are two of the primary means of generating revenue via Web sites. However, by its very nature, such tracking must be comprehensive, accurate, and unavoidable by a typical user or it simply won’t be relied upon by site owners and advertisers.

    (cf le premier message de ▻https://lists.w3.org/Archives/Public/public-html/2009Dec/thread.html#msg183)

    ...ce qui donne un exemple typique des intérêts et de la partialité du W3C dans la fabrication des standards du web !

    #navigateur #vie_privée #ping #hyperlink-auditing #html5 #w3c #standard #lobby

    • #SAFARI
    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 30/03/2019

    Va falloir jouer avec cette nouvelle #media_query : prefers-color-scheme - #CSS
    ▻https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme

    La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l’utilisateur quant au thème à utiliser (sombre ou clair).

    Si je comprends bien, ça vient d’être intégré dans Safari de MacOS 10.4.4, pas encore testé. Il va falloir tester si c’est pris en compte dans les webviews des apps iOS, là où ça me semble le plus directement utile.

    ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 30/03/2019

      Sur le Mac, ça fonctionne et c’est assez rigolo comme principe.

      Sur iOS, suis-je bête, il n’y a pas de « mode sombre » de toute façon.

      ARNO* @arno ART LIBRE
    • @fil
      Fil @fil 30/03/2019

      #sauflanuit

      Fil @fil
    • @arno
      ARNO* @arno ART LIBRE 31/03/2019

      #lanuitjemens

      ARNO* @arno ART LIBRE
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 11/03/2019

    HTML5 Pre-resize images before uploading - Stack Overflow
    ▻https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading

    Exemple de manipulation d’image par le navigateur (redimensionnement) avant son POST vers un serveur
    Le billet original sur mozilla-dev : ►https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader

    La doc de l’API File de HTML5 : ▻https://developer.mozilla.org/fr/docs/Web/API/File/Using_files_from_web_applications

    #image_upload #redimensionner #API_file #HTML5

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 28/05/2018
    1
    @sandburg
    1

    Cross-origin resource sharing (CORS) - HTTP | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/HTTP/CORS

    Le « Cross-origin resource sharing » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d’accéder à des ressources d’un serveur situé sur une autre origine que le site courant.

    #CORS #cross-origin-sharing #http #HTTP_HEADER #en-tête

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 26/05/2018
    2
    @kent1
    @tofulm
    2

    Liste des types MIME communs - HTTP | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

    #mime-type #response_header

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
0 | 20

thèmes de ce site

  • Company: L'Open Web
thématisation automatique par OpenCalais