Mozilla Developer Network

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

https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png

La propriété mask permet de masquer un élément partiellement ou complètement en utilisant un masque apposé sur l’image ou en rognant l’image aux positions données. Cette propriété est une propriété raccourcie pour les propriétés mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size et mask-composite .

Voir aussi
Apply effects to images with CSS’s mask-image property
▻https://web.dev/css-masking

Et mask avec le SVG qui permet de se servir d’un SVG comme mask en lui donnant le background-color de son choix
►https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Concepts de base des propriétés et valeurs logiques - CSS : Feuilles de style en cascade | MDN
▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts

CSS Logical Properties (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l’orientation du texte.

Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l’écran. On pouvait alors décrire des boîtes avec une certaine largeur (width) et une certaine hauteur (height), positionner les éléments à partir du haut (top) et de la gauche (left), faire flotter les objets, créer des bordures, des marges, du remplissage (padding) en haut, à droite, en bas et à gauche (resp. top, right, bottom, left, etc.). La spécification sur les propriétés et valeurs logiques définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : start et end plutôt que left et right ou top et bottom.

Voir aussi :
– la page de la propriété writing-mode qui définit si les lignes d’un texte sont écrites horizontalement ou verticalement et la direction selon laquelle le bloc grandit
– la page de référence des propriétés et valeurs : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Logical_Properties

#CSS #logical_properties #rtl #sens_ecriture #propriétés_logiques_CSS #SPIP #multilinguisme

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) :

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.

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

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

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

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.

<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

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

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

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

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

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

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

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

É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

Responsive Images : comprendre srcset et sizes - Alsacreations
▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web

#srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS

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

Mozilla lance Fluent 1.0 pour révolutionner la localisation des logiciels
▻https://blog.mozilla.org/press-fr/2019/04/17/mozilla-lance-fluent-1-0-pour-revolutionner-la-localisation-des-logici

Mozilla propose en open source un système évolué de traduction ("localisation") des chaînes de langue d’un logiciel/d’une appli web :

Fluent permet de s’adapter à la grammaire et au style d’autres langues, indépendamment de la langue source. Cela permet aux développeurs d’écrire du code agnostique du langage et aux localisateurs de réaliser des traductions naturelles plus rapidement et plus facilement.

Système basé sur des fichiers au format FTL :

FTL is a localization file format used for describing translation resources. FTL stands for Fluent Translation List.
FTL is designed to be simple to read, but at the same time allows to represent complex concepts from natural languages like gender, plurals, conjugations, and others.

Quelques ressources pour Fluent :
– la page du projet Fluent : ▻https://projectfluent.org
– le guide de l’utilisateur de Fluent : ▻https://projectfluent.org/fluent/guide
– un exemple d’implémentation pour javascript : ▻https://github.com/projectfluent/fluent.js

Il ne semble (malheureusement) pas (encore ?) exister d’implémentation PHP...

En parallèle pour simplifier le boulot des traducteurs.trices Mozilla propose un outil WYSIWYG de gestion des traductions : Pontoon
– présentation de Pontoon : ▻https://developer.mozilla.org/fr/docs/Mozilla/Localization/Localiser_avec_Pontoon
– un bac à sable pour prendre en main/tester Pontoon : ▻https://pontoon.mozilla.org/fr/tutorial/playground/?string=189479
– intégrer Pontoon à un projet : ▻https://developer.mozilla.org/fr/docs/Mozilla/Implementer_Pontoon_sur_un_projet_Mozilla
– la doc officielle (en anglais) : ▻https://mozilla-pontoon.readthedocs.io/en/latest

#traduction #localisation #fluent #pontoon #mozilla #open_source #SPIP

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