From a8cc0431ca75f502b324ec880c62c0f6caf71727 Mon Sep 17 00:00:00 2001 From: Stebenwolf <51078231+stebenwolf@users.noreply.github.com> Date: Thu, 20 May 2021 20:28:57 +0200 Subject: UPDT css defined + FIX issue #923 (#929) * UPDT css defined + FIX issue #923 * FIX: Minor fixes Co-authored-by: tristantheb --- files/fr/web/css/_colon_defined/index.html | 76 ++++++++++-------------------- 1 file changed, 25 insertions(+), 51 deletions(-) diff --git a/files/fr/web/css/_colon_defined/index.html b/files/fr/web/css/_colon_defined/index.html index 7865bca86e..a1bfe2b1b9 100644 --- a/files/fr/web/css/_colon_defined/index.html +++ b/files/fr/web/css/_colon_defined/index.html @@ -3,32 +3,34 @@ title: ':defined' slug: 'Web/CSS/:defined' tags: - CSS - - Pseudo-classe + - Layout + - Pseudo-class - Reference + - Selector - Web translation_of: 'Web/CSS/:defined' +browser-compat: css.selectors.defined ---
{{CSSRef}}
-

La pseudo-classe :defined représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur et également les éléments personnalisés (custom elements) ayant correctement été définis (c'est-à-dire grâce à la méthode {{domxref("CustomElementRegistry.define()")}}).

+

La pseudo-classe :defined représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur, ainsi que les éléments personnalisés (« custom elements ») ayant correctement été définis (c'est-à-dire grâce à la méthode CustomElementRegistry.define()).

-
/* Cette règle cible tout élément défini */
+
/* Cette règle cible tout élément défini */
 :defined {
-  font-style: italic;
+  font-style: italic;
 }
 
-/* Cette règle cible n'importe quelle instance */
-/* d'un élément personnalisé donné */
+/* Cette règle cible n'importe quelle instance d'un élément personnalisé donné */
 simple-custom:defined {
-  display: block;
+  display: block;
 }
 

 
-
Syntaxe

+
Syntaxe

 
 {{csssyntax}}
 
-
Exemples

+
Exemples

 
 
Les fragments de code qui suivent sont tirés du dépôt defined-pseudo-class (voir le résultat en live).

 
@@ -47,27 +49,24 @@ simple-custom:defined {
   }
 })
-

On insère une copie de cet élément dans le document, à côté d'un paragraphe classique {{HTMLElement("p")}}  :

+

On insère ensuite une copie de cet élément dans le document, à côté d'un paragraphe classique {<p> :

<simple-custom text="Le texte de l'élément personnalisé"></simple-custom>
 
-<p>Un paragraphe normal.</p>
+<p>Un paragraphe normal</p> -

Dans la feuille CSS, on inclut les règles suivantes :

+

Dans la feuille CSS, on inclut d'abord les règles suivantes :

-
// On utilise deux arrières-plans distincts
-// pour ces deux éléments
+
// On utilise deux arrières-plans distincts pour ces deux éléments
 p {
   background: yellow;
 }
 
 simple-custom {
-  display: block;
   background: cyan;
 }
 
-// On met en italique le texte de ces
-// deux éléments
+// On met en italique le texte de ces deux éléments
 :defined {
   font-style: italic;
 }

@@ -75,50 +74,25 @@ simple-custom {
 
Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :

 
 
simple-custom:not(:defined) {
-  opacity: 0;
+  display: none;
 }
 
 simple-custom:defined {
-  opacity: 0.75;
-  text-decoration: underline;
+  display: block;
 }

 
-
Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en formes sur la page.

-
-
Résultat

-
-
{{EmbedLiveSample("Exemples")}}

-
-
Spécifications

+
Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en forme sur la page.

 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined')}}{{Spec2('HTML WHATWG')}} 

+
Spécifications

 
-
Compatibilité des navigateurs

+{{Specifications}}
 
-
+
Compatibilité des navigateurs

 
-
{{Compat("css.selectors.defined")}}

+
{{Compat}}

 
-
Voir aussi

+
Voir aussi

 
 
-- 
cgit v1.2.3-54-g00ecf