diff options
Diffstat (limited to 'files/fr/web/css')
-rw-r--r-- | files/fr/web/css/-moz-box-ordinal-group/index.html | 74 | ||||
-rw-r--r-- | files/fr/web/css/-moz-cell/index.html | 16 | ||||
-rw-r--r-- | files/fr/web/css/-ms-scroll-snap-type/index.html | 51 | ||||
-rw-r--r-- | files/fr/web/css/-ms-user-select/index.html | 108 | ||||
-rw-r--r-- | files/fr/web/css/-webkit-mask-image/index.html | 175 | ||||
-rw-r--r-- | files/fr/web/css/@media/-ms-high-contrast/index.html (renamed from files/fr/web/css/-ms-high-contrast/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/@media/index/index.html | 12 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/height/index.html | 77 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/max-height/index.html | 77 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/max-width/index.html | 76 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/max-zoom/index.html | 70 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/min-height/index.html | 77 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/min-width/index.html | 76 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/min-zoom/index.html | 70 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/orientation/index.html | 65 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/user-zoom/index.html | 69 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/viewport-fit/index.html | 75 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/width/index.html | 76 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/zoom/index.html | 72 | ||||
-rw-r--r-- | files/fr/web/css/_colon_-moz-list-bullet/index.html (renamed from files/fr/web/css/_doublecolon_-moz-list-bullet/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/_colon_-moz-list-number/index.html (renamed from files/fr/web/css/_doublecolon_-moz-list-number/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/_colon_-ms-input-placeholder/index.html | 117 | ||||
-rw-r--r-- | files/fr/web/css/_colon_any/index.html | 175 | ||||
-rw-r--r-- | files/fr/web/css/_colon_autofill/index.html (renamed from files/fr/web/css/_colon_-webkit-autofill/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/_colon_user-invalid/index.html (renamed from files/fr/web/css/_colon_-moz-ui-invalid/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html | 97 | ||||
-rw-r--r-- | files/fr/web/css/_doublecolon_file-selector-button/index.html (renamed from files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/actual_value/index.html (renamed from files/fr/web/css/valeur_reelle/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/adjacent_sibling_combinator/index.html (renamed from files/fr/web/css/combinateur_de_voisin_direct/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/alternative_style_sheets/index.html (renamed from files/fr/web/css/feuilles_de_style_alternatives/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/arrière-plans_et_bordures_css/index.html | 162 | ||||
-rw-r--r-- | files/fr/web/css/at-rule/index.html (renamed from files/fr/web/css/règles_@/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/attribute_selectors/index.html (renamed from files/fr/web/css/sélecteurs_d_attribut/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/auto/index.html | 29 | ||||
-rw-r--r-- | files/fr/web/css/background-repeat/index.html | 2 | ||||
-rw-r--r-- | files/fr/web/css/block_formatting_context/index.html | 44 | ||||
-rw-r--r-- | files/fr/web/css/child_combinator/index.html (renamed from files/fr/web/css/sélecteurs_enfant/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/class_selectors/index.html (renamed from files/fr/web/css/sélecteurs_de_classe/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/color_value/index.html (renamed from files/fr/web/css/type_color/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/column_combinator/index.html (renamed from files/fr/web/css/combinateur_colonne/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/computed_value/index.html (renamed from files/fr/web/css/valeur_calculée/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/containing_block/index.html (renamed from files/fr/web/css/a_propos_du_bloc_conteneur/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/couleurs_css/index.html | 133 | ||||
-rw-r--r-- | files/fr/web/css/css_animated_properties/index.html (renamed from files/fr/web/css/liste_propriétés_css_animées/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_animations/detecting_css_animation_support/index.html (renamed from files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_animations/index.html (renamed from files/fr/web/css/animations_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_animations/tips/index.html (renamed from files/fr/web/css/animations_css/conseils/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_animations/using_css_animations/index.html (renamed from files/fr/web/css/animations_css/utiliser_les_animations_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_background_and_borders/border-image_generator/index.html (renamed from files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/css_background_and_borders/border-radius_generator/index.html (renamed from files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html (renamed from files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html (renamed from files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html (renamed from files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html (renamed from files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html (renamed from files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html (renamed from files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html (renamed from files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html (renamed from files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_box_model/index.html (renamed from files/fr/web/css/modèle_de_boîte_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html (renamed from files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_charsets/index.html (renamed from files/fr/web/css/jeux_de_caractères_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_colors/color_picker_tool/index.html (renamed from files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html (renamed from files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html (renamed from files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html (renamed from files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/spanning_columns/index.html (renamed from files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/styling_columns/index.html (renamed from files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/using_multi-column_layouts/index.html (renamed from files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_conditional_rules/using_feature_queries/index.html (renamed from files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/css_containment/index.html (renamed from files/fr/web/css/compartimentation_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html (renamed from files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html (renamed from files/fr/web/css/css_flexible_box_layout/mixins/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html (renamed from files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html | 188 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html (renamed from files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html) | 4 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html (renamed from files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html (renamed from files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html (renamed from files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html) | 4 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html | 121 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html (renamed from files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html (renamed from files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html (renamed from files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html (renamed from files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html (renamed from files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html (renamed from files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_fonts/opentype_fonts_guide/index.html (renamed from files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_fonts/variable_fonts_guide/index.html (renamed from files/fr/web/css/css_fonts/guide_polices_variables/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html (renamed from files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html (renamed from files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html (renamed from files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html) | 9 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/grid_template_areas/index.html (renamed from files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html (renamed from files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html (renamed from files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html (renamed from files/fr/web/css/css_images/sprites_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_images/using_css_gradients/index.html (renamed from files/fr/web/css/utilisation_de_dégradés_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html (renamed from files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_lists_and_counters/index.html (renamed from files/fr/web/css/css_lists/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_lists_and_counters/using_css_counters/index.html (renamed from files/fr/web/css/css_lists/compteurs_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_logical_properties/basic_concepts/index.html (renamed from files/fr/web/css/css_logical_properties/concepts_de_base/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_logical_properties/floating_and_positioning/index.html (renamed from files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_logical_properties/margins_borders_padding/index.html (renamed from files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html) | 7 | ||||
-rw-r--r-- | files/fr/web/css/css_logical_properties/sizing/index.html (renamed from files/fr/web/css/css_logical_properties/dimensionnement/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_masking/index.html (renamed from files/fr/web/css/css_masks/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_motion_path/index.html (renamed from files/fr/web/css/motion_path/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html (renamed from files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/index.html (renamed from files/fr/web/css/comprendre_z-index/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html (renamed from files/fr/web/css/comprendre_z-index/empilement_et_float/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html (renamed from files/fr/web/css/comprendre_z-index/exemple_1/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html (renamed from files/fr/web/css/comprendre_z-index/exemple_2/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html (renamed from files/fr/web/css/comprendre_z-index/exemple_3/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html (renamed from files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html (renamed from files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_questions_frequentes/index.html | 246 | ||||
-rw-r--r-- | files/fr/web/css/css_scroll_snap/basic_concepts/index.html (renamed from files/fr/web/css/css_scroll_snap/concepts_de_base/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_scroll_snap/browser_compat/index.html (renamed from files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_selectors/index.html (renamed from files/fr/web/css/sélecteurs_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html (renamed from files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html) | 7 | ||||
-rw-r--r-- | files/fr/web/css/css_shapes/basic_shapes/index.html (renamed from files/fr/web/css/css_shapes/formes_simples/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_shapes/from_box_values/index.html (renamed from files/fr/web/css/css_shapes/créer_formes_boîtes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_shapes/overview_of_css_shapes/index.html (renamed from files/fr/web/css/css_shapes/aperçu_formes_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_shapes/shapes_from_images/index.html (renamed from files/fr/web/css/css_shapes/générer_formes_images/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_transforms/using_css_transforms/index.html (renamed from files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_transitions/using_css_transitions/index.html (renamed from files/fr/web/css/css_transitions/utiliser_transitions_css/index.html) | 27 | ||||
-rw-r--r-- | files/fr/web/css/css_types/index.html (renamed from files/fr/web/css/types_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/css_values_and_units/index.html (renamed from files/fr/web/css/valeurs_et_unités_css/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/cssom_view/coordinate_systems/index.html (renamed from files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/descendant_combinator/index.html (renamed from files/fr/web/css/sélecteurs_descendant/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/easing-function/index.html (renamed from files/fr/web/css/timing-function/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/filter-function/url/index.html | 34 | ||||
-rw-r--r-- | files/fr/web/css/filter/index.html | 22 | ||||
-rw-r--r-- | files/fr/web/css/filters_effects/index.html | 115 | ||||
-rw-r--r-- | files/fr/web/css/general_sibling_combinator/index.html (renamed from files/fr/web/css/sélecteurs_de_voisins_généraux/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/grid-column-gap/index.html | 128 | ||||
-rw-r--r-- | files/fr/web/css/id_selectors/index.html (renamed from files/fr/web/css/sélecteurs_d_id/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/implémentation_des_brouillons_css/index.html | 47 | ||||
-rw-r--r-- | files/fr/web/css/index/index.html | 10 | ||||
-rw-r--r-- | files/fr/web/css/inheritance/index.html (renamed from files/fr/web/css/héritage/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/initial_value/index.html (renamed from files/fr/web/css/valeur_initiale/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/inline_formatting_context/index.html (renamed from files/fr/web/css/contexte_de_formatage_en_ligne/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/inset-block-end/index.html | 127 | ||||
-rw-r--r-- | files/fr/web/css/inset-block-start/index.html | 125 | ||||
-rw-r--r-- | files/fr/web/css/inset-inline-end/index.html | 127 | ||||
-rw-r--r-- | files/fr/web/css/inset-inline-start/index.html | 121 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html (renamed from files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/card/index.html (renamed from files/fr/web/css/layout_cookbook/carte/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/center_an_element/index.html (renamed from files/fr/web/css/layout_cookbook/centrer_un_element/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/column_layouts/index.html (renamed from files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html (renamed from files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html (renamed from files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/list_group_with_badges/index.html (renamed from files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/split_navigation/index.html (renamed from files/fr/web/css/layout_cookbook/navigation_segmentée/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/sticky_footers/index.html (renamed from files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/layout_mode/index.html (renamed from files/fr/web/css/mode_de_mise_en_page/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/list_of_proprietary_css_features/index.html (renamed from files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/mask/index.html | 2 | ||||
-rw-r--r-- | files/fr/web/css/media_queries/index.html (renamed from files/fr/web/css/requêtes_média/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/media_queries/testing_media_queries/index.html (renamed from files/fr/web/css/requêtes_média/tester_les_media_queries/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/media_queries/using_media_queries/index.html (renamed from files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html (renamed from files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/microsoft_extensions/index.html (renamed from files/fr/web/css/extensions_css_microsoft/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/mozilla_extensions/index.html (renamed from files/fr/web/css/extensions_mozilla/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/none/index.html | 43 | ||||
-rw-r--r-- | files/fr/web/css/normal/index.html | 36 | ||||
-rw-r--r-- | files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html (renamed from files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/paged_media/index.html (renamed from files/fr/web/css/média_paginés/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/position_value/index.html (renamed from files/fr/web/css/type_position/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/privacy_and_the__colon_visited_selector/index.html (renamed from files/fr/web/css/_colon_visited_et_la_vie_privée/index.html) | 7 | ||||
-rw-r--r-- | files/fr/web/css/pseudo-elements/index.html (renamed from files/fr/web/css/pseudo-éléments/index.html) | 5 | ||||
-rw-r--r-- | files/fr/web/css/replaced_element/index.html (renamed from files/fr/web/css/élément_remplacé/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/resolved_value/index.html (renamed from files/fr/web/css/valeur_résolue/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/scaling_of_svg_backgrounds/index.html (renamed from files/fr/web/css/redimensionnement_arrière-plans_svg/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/shape-box/index.html | 169 | ||||
-rw-r--r-- | files/fr/web/css/shorthand_properties/index.html (renamed from files/fr/web/css/propriétés_raccourcies/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/specified_value/index.html (renamed from files/fr/web/css/valeur_spécifiée/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html | 49 | ||||
-rw-r--r-- | files/fr/web/css/tools/cubic_bezier_generator/index.html (renamed from files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/tools/index.html (renamed from files/fr/web/css/outils/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/tools/linear-gradient_generator/index.html (renamed from files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/transition-delay/index.html | 8 | ||||
-rw-r--r-- | files/fr/web/css/transition-duration/index.html | 8 | ||||
-rw-r--r-- | files/fr/web/css/type_selectors/index.html (renamed from files/fr/web/css/sélecteurs_de_type/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/universal_selectors/index.html (renamed from files/fr/web/css/sélecteurs_universels/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/url/index.html | 109 | ||||
-rw-r--r-- | files/fr/web/css/used_value/index.html (renamed from files/fr/web/css/valeur_utilisée/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/value_definition_syntax/index.html (renamed from files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/viewport_concepts/index.html (renamed from files/fr/web/css/concepts_viewport/index.html) | 3 | ||||
-rw-r--r-- | files/fr/web/css/visual_formatting_model/index.html (renamed from files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html) | 3 |
192 files changed, 848 insertions, 3569 deletions
diff --git a/files/fr/web/css/-moz-box-ordinal-group/index.html b/files/fr/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 4215966858..0000000000 --- a/files/fr/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -<div>{{CSSRef}}</div> - -<div class="warning"> -<p><strong>Attention ! </strong>Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS" title="/en/CSS/Flexible_boxes">les boîtes flexibles</a>.</p> -</div> - -<p>La propriété <code><strong>-moz-box-ordinal-group</strong></code> indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.</p> - -<h2 id="Valeurs">Valeurs</h2> - -<p>Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#Flexbox { - display: -ms-box; - display: -moz-box; - display: -webkit-box; -} - -#text1 { - background: red; - -ms-box-ordinal-group: 4; - -moz-box-ordinal-group: 4; - -webkit-box-ordinal-group: 4; -} - -#text2 { - background: green; - -ms-box-ordinal-group: 3; - -moz-box-ordinal-group: 3; - -webkit-box-ordinal-group: 3; -} - -#text3 { - background: blue; - -ms-box-ordinal-group: 2; - -moz-box-ordinal-group: 2; - -webkit-box-ordinal-group: 2; -} - -#text4 { - background: orange; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="Flexbox"> - <div id="text1">text 1</div> - <div id="text2">text 2</div> - <div id="text3">text 3</div> - <div id="text4">text 4</div> -</div></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","300","300")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/css/-moz-cell/index.html b/files/fr/web/css/-moz-cell/index.html deleted file mode 100644 index a7121bf02e..0000000000 --- a/files/fr/web/css/-moz-cell/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -tags: - - CSS - - Obsolete - - Propriété - - Reference -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell ---- -<div class="boxed translate-rendered"> -<div>{{CSSRef}}{{deprecated_header}}</div> - -<p><em>Ne pas utiliser cette valeur ! </em>C'est la valeur <code>cursor</code> {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.</p> -</div> diff --git a/files/fr/web/css/-ms-scroll-snap-type/index.html b/files/fr/web/css/-ms-scroll-snap-type/index.html deleted file mode 100644 index fff872ad27..0000000000 --- a/files/fr/web/css/-ms-scroll-snap-type/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: '-ms-scroll-snap-type' -slug: Web/CSS/-ms-scroll-snap-type -tags: - - CSS - - Non-standard - - Reference -translation_of: Web/CSS/scroll-snap-type -translation_of_original: Web/CSS/-ms-scroll-snap-type ---- -<div>{{CSSRef}}{{non-standard_header}}</div> - -<p>La propriété <strong><code>-ms-scroll-snap-type</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique le type de point d'accroche à utiliser pour l'élément courant.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Values" name="Values">Valeurs</h3> - -<dl> - <dt><code>none</code></dt> - <dd> - <p>Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.</p> - </dd> - <dt><code>proximity</code></dt> - <dd> - <p>Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.</p> - </dd> - <dt><code>mandatory</code></dt> - <dd> - <p>L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.</p> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Specifications" name="Specifications">Spécifications</h2> - -<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Remarks" name="Remarks">Notes</h2> - -<p> </p> - -<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p> - -<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p> diff --git a/files/fr/web/css/-ms-user-select/index.html b/files/fr/web/css/-ms-user-select/index.html deleted file mode 100644 index 047c721acc..0000000000 --- a/files/fr/web/css/-ms-user-select/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '-ms-user-select' -slug: Web/CSS/-ms-user-select -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/user-select -translation_of_original: Web/CSS/-ms-user-select ---- -<div>{{CSSRef}}{{non-standard_header}}</div> - -<p>La propriété CSS <strong><code>-ms-user-select</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<h3 id="Values" name="Values">Valeurs</h3> - -<dl> - <dt><code>none</code></dt> - <dd> - <p>Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.</p> - </dd> - <dt><code>element</code></dt> - <dd> - <p>Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.</p> - </dd> - <dt><code>text</code></dt> - <dd> - <p>Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.</p> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Examples" name="Examples">Exemples</h2> - -<p>Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant <code>blog</code>. Ce conteneur contient un autre élément <code><div></code> avec l'identifiant <code>blogPost</code> pour le billet de la page. La classe <code>comment</code> est appliquée aux éléments <code><div></code> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.</p> - -<p>La déclaration suivante désactive la sélection à l'exception du contenu éditable.</p> - -<pre class="brush: css">#blog { - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; -} -</pre> - -<p>La déclaration suivante désactive la sélection pour le reste :</p> - -<pre class="brush: css">#blog, #blog input, #blog textarea, -#blog *[contenteditable=true] { - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; -} -</pre> - -<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.</p> - -<pre class="brush: css">#blogPost { - -ms-user-select: element; - -webkit-user-select: text; - -moz-user-select: text; -} - -#blog { - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; -} -</pre> - -<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.</p> - -<pre class="brush: css">.comment { - -ms-user-select: element; - -moz-user-select: text; - -webkit-user-select: text; -} - -#blog{ - -ms-user-select: none; - -moz-user-select: -moz-none; - -webkit-user-select: none; -} -</pre> - -<p>Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.</p> - -<pre class="brush: css">#blogPost, .comment { - -ms-user-select: text; -} - -#blog { - -ms-user-select: none; -} -</pre> - -<h2 id="Specifications" name="Specifications">Spécifications</h2> - -<p>Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.</p> - -<p>{{cssinfo}}</p> diff --git a/files/fr/web/css/-webkit-mask-image/index.html b/files/fr/web/css/-webkit-mask-image/index.html deleted file mode 100644 index 2303f48997..0000000000 --- a/files/fr/web/css/-webkit-mask-image/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: '-webkit-mask-image' -slug: Web/CSS/-webkit-mask-image -tags: - - CSS -translation_of: Web/CSS/mask-image -translation_of_original: Web/CSS/-webkit-mask-image ---- -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CSSRef() }}</p> - -<p>{{ Non-standard_header() }}</p> - -<h3 id="Résumé">Résumé</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La propriété CSS <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">-webkit-mask-image </code>définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.</p> - -<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;"> - <li>{{ Xref_cssinitial() }} : none</li> - <li>S'applique à : tous les éléments</li> - <li>{{ Xref_cssinherited() }} : non</li> - <li>Média : {{ Xref_cssvisual() }}</li> - <li>{{ Xref_csscomputed() }} : URI absolue ou none</li> -</ul> - -<h3 id="Syntaxe">Syntaxe</h3> - -<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">-webkit-mask-image: <mask-image>[, <mask-image>]* -</pre> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Valeurs :</p> - -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;"><mask-image></dt> - <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("<uri>")}} | <gradient> | none</code></dd> -</dl> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Values</p> - -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;"><uri></dt> - <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Chemin de la ressource image utilisée comme masque.</dd> - <dt style="font-style: normal; font-weight: bold;"> </dt> - <dt style="font-style: normal; font-weight: bold;"><gradient></dt> - <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><span style="font-family: courier new;">Fonction-webkit-gradient</span> utilisée comme masque.</dd> - <dt style="font-style: normal; font-weight: bold;">none</dt> - <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Signifie que l'élément n'a pas de masque image.</dd> -</dl> - -<h4 id="Exemples">Exemples</h4> - -<pre class="brush: css">body { - -webkit-mask-image: url('images/mymask.png'); -} - -div { - -webkit-mask-image: url('images/foo.png'), url('images/bar.png'); -} - -p { - -webkit-mask-image: none; -} -</pre> - -<h3 id="Notes">Notes</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.</p> - -<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;"> - <tbody> - <tr> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Fonctionnalité</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari</th> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0{{ property_prefix("-webkit") }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Masques SVG</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">8.0</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;"> - <tbody> - <tr> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;"><strong style="background-color: rgb(238, 238, 238); font-weight: bold; line-height: 14px;">Fonctionnalité</strong></th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">iOS Safari</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mini</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android Browser</th> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">3.2</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">2.1</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes {{ property_prefix("-webkit") }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>Masques SVG</p> - </td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>yes</p> - </td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>{{ CompatNo() }}<a id="fck_paste_padding" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;"></a></p> - </td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>{{ CompatNo() }}</p> - </td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>yes</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="note"><strong>Note :</strong> Gecko supporte les <a href="/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking" style="font-style: italic;" title="https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking">effets de filtre SVG </a>depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.</div> - -<h3 id="Voir_également">Voir également</h3> - -<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p> diff --git a/files/fr/web/css/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html index e9aef6fa8e..5c9af71a4d 100644 --- a/files/fr/web/css/-ms-high-contrast/index.html +++ b/files/fr/web/css/@media/-ms-high-contrast/index.html @@ -1,6 +1,6 @@ --- title: '-ms-high-contrast' -slug: Web/CSS/-ms-high-contrast +slug: Web/CSS/@media/-ms-high-contrast tags: - '@media' - CSS @@ -8,6 +8,7 @@ tags: - Non-standard - Reference translation_of: Web/CSS/@media/-ms-high-contrast +original_slug: Web/CSS/-ms-high-contrast --- <div>{{CSSRef}}{{Non-standard_header}}</div> diff --git a/files/fr/web/css/@media/index/index.html b/files/fr/web/css/@media/index/index.html deleted file mode 100644 index e227a1aecb..0000000000 --- a/files/fr/web/css/@media/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Index -slug: Web/CSS/@media/Index -tags: - - '@media' - - CSS - - Index -translation_of: Web/CSS/@media/Index ---- -<p>{{CSSRef}}</p> - -<p>{{Index("/fr/docs/Web/CSS/@media")}}</p> diff --git a/files/fr/web/css/@viewport/height/index.html b/files/fr/web/css/@viewport/height/index.html deleted file mode 100644 index bd7b0871c9..0000000000 --- a/files/fr/web/css/@viewport/height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.</p> - -<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Une valeur de longueur */ -/* Type <length> ou <percentage> */ -height: auto; -height: 320px; -height: 15em; - -/* Deux valeurs de longueur */ -height: 320px 200px; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une longueur relative ou absolue qui doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - height: 500px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.height")}}</p> diff --git a/files/fr/web/css/@viewport/max-height/index.html b/files/fr/web/css/@viewport/max-height/index.html deleted file mode 100644 index fd3499f24c..0000000000 --- a/files/fr/web/css/@viewport/max-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: max-height -slug: Web/CSS/@viewport/max-height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-height ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>max-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (<em>viewport</em>) d'un document.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Avec un mot-clé */ -max-height: auto; - -/* Valeur de longueur */ -/* Type <length> */ -max-height: 400px; -max-height: 50em; -max-height: 20cm; - -/* Valeur proportionnelle */ -/* Type <percentage> */ -max-height: 75%;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - max-height: 600px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.max-height")}}</p> diff --git a/files/fr/web/css/@viewport/max-width/index.html b/files/fr/web/css/@viewport/max-width/index.html deleted file mode 100644 index f131a09f7d..0000000000 --- a/files/fr/web/css/@viewport/max-width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: max-width -slug: Web/CSS/@viewport/max-width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-width ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>max-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (<em>viewport</em>) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du <em>viewport</em> initial.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Avec un mot-clé */ -max-width: auto; - -/* Valeur de longueur */ -/* Type <length> */ -max-width: 400px; -max-width: 50em; -max-width: 20cm; - -/* Valeur proportionnelle */ -/* Type <percentage> */ -max-width: 75%;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - max-width: 600px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.at-rules.viewport.max-width")}}</p> diff --git a/files/fr/web/css/@viewport/max-zoom/index.html b/files/fr/web/css/@viewport/max-zoom/index.html deleted file mode 100644 index a5021d48f3..0000000000 --- a/files/fr/web/css/@viewport/max-zoom/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: max-zoom -slug: Web/CSS/@viewport/max-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-zoom ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>max-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p> - -<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush:css">/* Valeur avec un mot-clé */ -max-zoom: auto; - -/* Nombres : type <number> */ -max-zoom: 0.8; -max-zoom: 2.0; - -/* Valeurs proportionnelles : type <percentage> */ -max-zoom: 150%; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd> - <dt><code><number></code></dt> - <dd>Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<number>")}}).</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<percentage>")}}).</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p> diff --git a/files/fr/web/css/@viewport/min-height/index.html b/files/fr/web/css/@viewport/min-height/index.html deleted file mode 100644 index 83a55c3c66..0000000000 --- a/files/fr/web/css/@viewport/min-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: min-height -slug: Web/CSS/@viewport/min-height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-height ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>min-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Avec un mot-clé */ -min-height: auto; - -/* Valeur de longueur */ -/* Type <length> */ -min-height: 400px; -min-height: 50em; -min-height: 20cm; - -/* Valeur proportionnelle */ -/* Type <percentage> */ -min-height: 75%;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - min-height: 600px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.min-height")}}</p> diff --git a/files/fr/web/css/@viewport/min-width/index.html b/files/fr/web/css/@viewport/min-width/index.html deleted file mode 100644 index aa345f6c1e..0000000000 --- a/files/fr/web/css/@viewport/min-width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: min-width -slug: Web/CSS/@viewport/min-width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-width ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>min-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Avec un mot-clé */ -min-width: auto; - -/* Valeur de longueur */ -/* Type <length> */ -min-width: 400px; -min-width: 50em; -min-width: 20cm; - -/* Valeur proportionnelle */ -/* Type <percentage> */ -min-width: 75%;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - min-width: 600px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.at-rules.viewport.min-width")}}</p> diff --git a/files/fr/web/css/@viewport/min-zoom/index.html b/files/fr/web/css/@viewport/min-zoom/index.html deleted file mode 100644 index 295e87ce7a..0000000000 --- a/files/fr/web/css/@viewport/min-zoom/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: min-zoom -slug: Web/CSS/@viewport/min-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-zoom ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>min-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p> - -<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush:css">/* Valeur avec un mot-clé */ -min-zoom: auto; - -/* Nombres : type <number> */ -min-zoom: 0.8; -min-zoom: 2.0; - -/* Valeurs proportionnelles : type <percentage> */ -min-zoom: 150%; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd> - <dt><code><number></code></dt> - <dd>Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<number>")}}).</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<percentage>")}}).</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p> diff --git a/files/fr/web/css/@viewport/orientation/index.html b/files/fr/web/css/@viewport/orientation/index.html deleted file mode 100644 index 42e89f24e5..0000000000 --- a/files/fr/web/css/@viewport/orientation/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: orientation -slug: Web/CSS/@viewport/orientation -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/orientation ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>orientation</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.</p> - -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ -orientation: auto; -orientation: portrait; -orientation: landscape; -</pre> - -<p>Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).</dd> - <dt><code>portrait</code></dt> - <dd>Le document devrait être verrouillé en mode portrait.</dd> - <dt><code>landscape</code></dt> - <dd>Le document devrait être verrouillé en mode paysage.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.orientation")}}</p> diff --git a/files/fr/web/css/@viewport/user-zoom/index.html b/files/fr/web/css/@viewport/user-zoom/index.html deleted file mode 100644 index 45f9b90ef5..0000000000 --- a/files/fr/web/css/@viewport/user-zoom/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: user-zoom -slug: Web/CSS/@viewport/user-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/user-zoom ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>user-zoom</code></strong>, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (<em>viewport</em>).</p> - -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ -user-zoom: zoom; -user-zoom: fixed; -</pre> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>zoom</code></dt> - <dd>L'utilisateur peut zoomer/dézoomer.</dd> - <dt><code>fixed</code></dt> - <dd>L'utilisateur ne peut ni zoomer ni dézoomer.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Specifications" name="Specifications">Accessibilité</h2> - -<p>Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.user-zoom")}}</p> diff --git a/files/fr/web/css/@viewport/viewport-fit/index.html b/files/fr/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 5532ed2191..0000000000 --- a/files/fr/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -tags: - - '@viewport' - - CSS - - Descripteur - - Experimental - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> - -<p>Le descripteur <strong><code>viewport-fit</code></strong>, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (<em>viewport</em>) d'un document recouvre l'écran.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css; no-line-numbers">/* Valeurs avec un mot-clé */ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.</dd> - <dt><code>contain</code></dt> - <dd>La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.</dd> - <dt><code>cover</code></dt> - <dd>La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser <a href="/en-US/docs/Web/CSS/env">des variables pour le placement en zone sûre</a> afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">auto | contain | cover</pre> - -<h2 id="Accessibilité">Accessibilité</h2> - -<p>When using the <code>viewport-fit</code> descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the <a href="/en-US/docs/Web/CSS/env">safe area inset variables</a>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/fr/web/css/@viewport/width/index.html b/files/fr/web/css/@viewport/width/index.html deleted file mode 100644 index 26e657d76a..0000000000 --- a/files/fr/web/css/@viewport/width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: width -slug: Web/CSS/@viewport/width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/width ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.</p> - -<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Une valeur de longueur */ -/* Type <length> ou <percentage> */ -width: auto; -width: 320px; -width: 15em; - -/* Deux valeurs de longueur */ -width: 320px 200px; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une longueur relative ou absolue qui doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - width: 500px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.at-rules.viewport.width")}}</p> diff --git a/files/fr/web/css/@viewport/zoom/index.html b/files/fr/web/css/@viewport/zoom/index.html deleted file mode 100644 index c995febbea..0000000000 --- a/files/fr/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>zoom</code></strong>, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.</p> - -<p>Un niveau de zoom égal à <code>1.0</code> ou <code>100%</code> n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush:css">/* Valeur avec un mot-clé */ -zoom: auto; - -/* Valeurs numériques */ -/* Type <number> */ -zoom: 0.8; -zoom: 2.0; - -/* Valeurs proportionnelles */ -/* Type <percentage> */ -zoom: 150%; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.</dd> - <dt><code><number></code></dt> - <dd>Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("<number>")}}.</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("<percentage>")}}.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html b/files/fr/web/css/_colon_-moz-list-bullet/index.html index f394c8a1c1..8bbfcb6954 100644 --- a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html +++ b/files/fr/web/css/_colon_-moz-list-bullet/index.html @@ -1,12 +1,13 @@ --- title: '::-moz-list-bullet' -slug: 'Web/CSS/::-moz-list-bullet' +slug: Web/CSS/:-moz-list-bullet tags: - CSS - Non-standard - Pseudo-element - Reference -translation_of: 'Web/CSS/:-moz-list-bullet' +translation_of: Web/CSS/:-moz-list-bullet +original_slug: Web/CSS/::-moz-list-bullet --- <div>{{Non-standard_header}}{{CSSRef}}</div> diff --git a/files/fr/web/css/_doublecolon_-moz-list-number/index.html b/files/fr/web/css/_colon_-moz-list-number/index.html index 0f12741d94..8a4d2f4be6 100644 --- a/files/fr/web/css/_doublecolon_-moz-list-number/index.html +++ b/files/fr/web/css/_colon_-moz-list-number/index.html @@ -1,12 +1,13 @@ --- title: '::-moz-list-number' -slug: 'Web/CSS/::-moz-list-number' +slug: Web/CSS/:-moz-list-number tags: - CSS - Non-standard - Pseudo-element - Reference -translation_of: 'Web/CSS/:-moz-list-number' +translation_of: Web/CSS/:-moz-list-number +original_slug: Web/CSS/::-moz-list-number --- <div>{{Non-standard_header}}{{CSSRef}}</div> diff --git a/files/fr/web/css/_colon_-ms-input-placeholder/index.html b/files/fr/web/css/_colon_-ms-input-placeholder/index.html deleted file mode 100644 index 8b1111134c..0000000000 --- a/files/fr/web/css/_colon_-ms-input-placeholder/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':-ms-input-placeholder' -slug: 'Web/CSS/:-ms-input-placeholder' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Référence(2) -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-ms-input-placeholder' ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<p>La pseudo-classe <strong><code>:-ms-input-placeholder</code></strong> représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).</p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input { - background-color:#E8E8E8; - color:black; -} -/* Style pour le texte de substitution */ -input.studentid:-ms-input-placeholder { - font-style:italic; - color: red; - background-color: yellow; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><form id="test"> - <p><label>Saisir le nom : <input id="nom" placeholder="Nom de l'étudiant"/></label></p> - <p><label>Saisir le domaine : <input id="domaine" placeholder="Domaine d'étude" /></label></p> - <p><label>Saisir l'identifiant : <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /></label></p> - <input type="submit" /> -</form></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","300","300")}}</p> - -<h3 id="Capture_d'écran">Capture d'écran</h3> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">MSDN documente cette pseudo-classe</a>.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>10</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/fr/web/css/_colon_any/index.html b/files/fr/web/css/_colon_any/index.html deleted file mode 100644 index f3036e1ee9..0000000000 --- a/files/fr/web/css/_colon_any/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: ':any()' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.</p> - -<pre class="brush: css no-line-numbers">/* sélectionne tous les h2 d'une section, d'un article */ -/* d'un aside ou d'un nav */ -/* actuellement pris en charge avec les préfixes */ -/* -moz- et -webkit- */ -:-moz-any(section, article, aside, nav) h2 { - font-size: 4.5rem; -} - -:-webkit-any(section, article, aside, nav) h2 { - font-size: 4.5rem; -} -</pre> - -<div class="note"><strong>Note : </strong>Cette pseudo-classe est en voie d'être standardisée dans la spécification <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> sous le nom de <code>:matches()</code>. Il est probable que la syntaxe et le nom de <code>:-<em>préfixe</em>-any()</code> soit amené à changer pour l'adopter dans un avenir proche.</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>selector</code></dt> - <dd>Un sélecteur, simple ou multiple, composé d'un <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors">sélecteur CSS simple</a>.</dd> -</dl> - -<div class="note"><strong>Note :</strong> Le sélecteur <strong>ne peut pas</strong> contenir de combinateur ou de pseudo-éléments.</div> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Simplifier_la_sélection_de_listes">Simplifier la sélection de listes</h3> - -<p>Par exemple, le code CSS suivant :</p> - -<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */ - dans certains cas */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { - list-style-type: square; -} -</pre> - -<p>Pourra être remplacé par :</p> - -<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */ - dans certains cas */ -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { - list-style-type: square; -}</pre> - -<p>Cependant, on évitera d'utiliser le code suivant (cf. <a href="#Performances">la section sur les performances</a> plus bas) :</p> - -<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { - list-style-type: square; -}</pre> - -<h3 id="Simplifier_la_sélection_de_section">Simplifier la sélection de section</h3> - -<p>Ceci est particulièrement utile lorsqu'on manipule <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">des sections et des titres</a> HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans <code>:any()</code>, leur appliquer un style peut être beaucoup plus complexe.</p> - -<p>Par exemple, sans <code>:any()</code>, appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :</p> - -<pre class="brush: css">/* Niveau 0 */ -h1 { - font-size: 30px; -} -/* Niveau 1 */ -section h1, article h1, aside h1, nav h1 { - font-size: 25px; -} -/* Niveau 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1, { - font-size: 20px; -} -/* Niveau 3 */ -/* ... même pas la peine d'y penser */ -</pre> - -<p>En utilisant : <code>-any()</code>, cela devient plus simple :</p> - -<pre class="brush: css">/* Niveau 0 */ -h1 { - font-size: 30px; -} -/* Niveau 1 */ -:-moz-any(section, article, aside, nav) h1 { - font-size: 25px; -} -:-webkit-any(section, article, aside, nav) h1 { - font-size: 25px; -} - -/* Niveau 2 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 20px; -} - -:-webkit-any(section, article, aside, nav) -:-webkit-any(section, article, aside, nav) h1 { - font-size: 20px; -} - -/* Niveau 3 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 15px; -} - -:-webkit-any(section, article, aside, nav) -:-webkit-any(section, article, aside, nav) -:-webkit-any(section, article, aside, nav) h1 { - font-size: 15px; -}</pre> - -<h2 id="Notes">Notes</h2> - -<h3 id="Problèmes_avec_les_performances_et_la_spécificité"><a id="Performances">Problèmes avec les performances et la spécificité</a></h3> - -<p>Le bug {{bug("561154")}} illustre un problème où la spécificité de <code>:-moz-any()</code> est incorrecte. L'implémentation actuelle considère <code>:-moz-any()</code> comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.</p> - -<p>Par exemple :</p> - -<pre class="brush: css">.a > :-moz-any(.b, .c) -</pre> - -<p>est moins rapide que :</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>et celui-ci est rapide :</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c -</pre> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.selectors.any")}}</p> diff --git a/files/fr/web/css/_colon_-webkit-autofill/index.html b/files/fr/web/css/_colon_autofill/index.html index 4d7aadd16e..4fd7bb8f4e 100644 --- a/files/fr/web/css/_colon_-webkit-autofill/index.html +++ b/files/fr/web/css/_colon_autofill/index.html @@ -1,12 +1,13 @@ --- title: ':-webkit-autofill' -slug: 'Web/CSS/:-webkit-autofill' +slug: Web/CSS/:autofill tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-webkit-autofill' +translation_of: Web/CSS/:-webkit-autofill +original_slug: Web/CSS/:-webkit-autofill --- <div>{{CSSRef}}{{Non-standard_header}}</div> diff --git a/files/fr/web/css/_colon_-moz-ui-invalid/index.html b/files/fr/web/css/_colon_user-invalid/index.html index 5f29e0f90f..50493e4491 100644 --- a/files/fr/web/css/_colon_-moz-ui-invalid/index.html +++ b/files/fr/web/css/_colon_user-invalid/index.html @@ -1,12 +1,13 @@ --- title: ':-moz-ui-invalid' -slug: 'Web/CSS/:-moz-ui-invalid' +slug: Web/CSS/:user-invalid tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:user-invalid' +translation_of: Web/CSS/:user-invalid +original_slug: Web/CSS/:-moz-ui-invalid --- <div>{{Non-standard_header}}{{CSSRef}}</div> diff --git a/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html deleted file mode 100644 index 4be89a52e0..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: '::-webkit-input-placeholder' -slug: 'Web/CSS/::-webkit-input-placeholder' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-webkit-input-placeholder' ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<p>Le pseudo-élément <strong><code>::-webkit-input-placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input placeholder="Veuillez saisir ici..."></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input::-webkit-input-placeholder { - color: green; -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> - <li>{{cssxref(":-ms-input-placeholder")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/fr/web/css/_doublecolon_file-selector-button/index.html index 2de12911cf..e8c2a2b995 100644 --- a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html +++ b/files/fr/web/css/_doublecolon_file-selector-button/index.html @@ -1,12 +1,13 @@ --- title: '::-webkit-file-upload-button' -slug: 'Web/CSS/::-webkit-file-upload-button' +slug: Web/CSS/::file-selector-button tags: - CSS - Non-standard - Pseudo-element - Reference -translation_of: 'Web/CSS/::file-selector-button' +translation_of: Web/CSS/::file-selector-button +original_slug: Web/CSS/::-webkit-file-upload-button --- <div>{{CSSRef}}{{Non-standard_header}}</div> diff --git a/files/fr/web/css/valeur_reelle/index.html b/files/fr/web/css/actual_value/index.html index 4a4d768379..c0d975771f 100644 --- a/files/fr/web/css/valeur_reelle/index.html +++ b/files/fr/web/css/actual_value/index.html @@ -1,11 +1,12 @@ --- title: Valeur réelle -slug: Web/CSS/valeur_reelle +slug: Web/CSS/actual_value tags: - CSS - Guide - Reference translation_of: Web/CSS/actual_value +original_slug: Web/CSS/valeur_reelle --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/combinateur_de_voisin_direct/index.html b/files/fr/web/css/adjacent_sibling_combinator/index.html index 4898c755c4..b96479accc 100644 --- a/files/fr/web/css/combinateur_de_voisin_direct/index.html +++ b/files/fr/web/css/adjacent_sibling_combinator/index.html @@ -1,11 +1,12 @@ --- title: Combinateur de voisin direct -slug: Web/CSS/Combinateur_de_voisin_direct +slug: Web/CSS/Adjacent_sibling_combinator tags: - CSS - Reference - Sélecteur translation_of: Web/CSS/Adjacent_sibling_combinator +original_slug: Web/CSS/Combinateur_de_voisin_direct --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/fr/web/css/feuilles_de_style_alternatives/index.html b/files/fr/web/css/alternative_style_sheets/index.html index cc96a123e1..5bb6c9afdd 100644 --- a/files/fr/web/css/feuilles_de_style_alternatives/index.html +++ b/files/fr/web/css/alternative_style_sheets/index.html @@ -1,11 +1,12 @@ --- title: Feuilles de style alternatives -slug: Web/CSS/Feuilles_de_style_alternatives +slug: Web/CSS/Alternative_style_sheets tags: - CSS - NeedsCompatTable - Reference translation_of: Web/CSS/Alternative_style_sheets +original_slug: Web/CSS/Feuilles_de_style_alternatives --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/index.html b/files/fr/web/css/arrière-plans_et_bordures_css/index.html deleted file mode 100644 index 8873196702..0000000000 --- a/files/fr/web/css/arrière-plans_et_bordures_css/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Arrière-plans et bordures CSS -slug: Web/CSS/Arrière-plans_et_bordures_CSS -tags: - - CSS - - Référence(2) -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -<div>{{CSSRef}}</div> - -<p><strong>Les arrière-plans et bordures CSS</strong> forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés_CSS">Propriétés CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("background")}}</li> - <li>{{cssxref("background-attachment")}}</li> - <li>{{cssxref("background-clip")}}</li> - <li>{{cssxref("background-color")}}</li> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background-origin")}}</li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-repeat")}}</li> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-bottom-left-radius")}}</li> - <li>{{cssxref("border-bottom-right-radius")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-collapse")}}</li> - <li>{{cssxref("border-color")}}</li> - <li>{{cssxref("border-image")}}</li> - <li>{{cssxref("border-image-outset")}}</li> - <li>{{cssxref("border-image-repeat")}}</li> - <li>{{cssxref("border-image-slice")}}</li> - <li>{{cssxref("border-image-source")}}</li> - <li>{{cssxref("border-image-width")}}</li> - <li>{{cssxref("border-left")}}</li> - <li>{{cssxref("border-left-color")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-radius")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-top-left-radius")}}</li> - <li>{{cssxref("border-top-right-radius")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-width")}}</li> - <li>{{cssxref("box-shadow")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrière-plans CSS</a></dt> - <dd>Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Redimensionner des images d'arrière-plan</a></dt> - <dd>Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.</dd> -</dl> - -<h2 id="Outils">Outils</h2> - -<dl> - <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur de <code>border-image</code></a></dt> - <dd>Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur de <code>border-radius</code></a></dt> - <dd>Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur de <code>box-shadow</code></a></dt> - <dd>Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Support simple</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9.2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/fr/web/css/règles_@/index.html b/files/fr/web/css/at-rule/index.html index e298cf9028..b2573ba775 100644 --- a/files/fr/web/css/règles_@/index.html +++ b/files/fr/web/css/at-rule/index.html @@ -1,11 +1,12 @@ --- title: Règles @ -slug: Web/CSS/Règles_@ +slug: Web/CSS/At-rule tags: - CSS - Reference - Règle @ translation_of: Web/CSS/At-rule +original_slug: Web/CSS/Règles_@ --- <div>{{cssref}}</div> diff --git a/files/fr/web/css/sélecteurs_d_attribut/index.html b/files/fr/web/css/attribute_selectors/index.html index 6c9e719345..ebaeb1dc5d 100644 --- a/files/fr/web/css/sélecteurs_d_attribut/index.html +++ b/files/fr/web/css/attribute_selectors/index.html @@ -1,12 +1,13 @@ --- title: Sélecteurs d'attribut -slug: Web/CSS/Sélecteurs_d_attribut +slug: Web/CSS/Attribute_selectors tags: - CSS - Débutant - Reference - Sélecteur translation_of: Web/CSS/Attribute_selectors +original_slug: Web/CSS/Sélecteurs_d_attribut --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/auto/index.html b/files/fr/web/css/auto/index.html deleted file mode 100644 index 92535f6d82..0000000000 --- a/files/fr/web/css/auto/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -<p>{{ CSSRef() }}</p> -<h2 id="Résumé">Résumé</h2> -<p>Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de <code>auto</code> sont différents suivant la propriété à laquelle la valeur est affectée.</p> -<h2 id="Utilisation">Utilisation</h2> -<ul> - <li>{{ Cssxref("overflow") }}</li> - <li>{{ Cssxref("overflow-x") }}</li> - <li>{{ Cssxref("overflow-y") }}</li> - <li>{{ Cssxref("cursor") }}</li> - <li>{{ Cssxref("width") }}</li> - <li>{{ Cssxref("height") }}</li> - <li>{{ Cssxref("marker-offset") }}</li> - <li>{{ Cssxref("margin") }}</li> - <li>margin-* (left|bottom|top|right|start|end)</li> - <li>{{ Cssxref("bottom") }}</li> - <li>{{ Cssxref("left") }}</li> - <li>{{ Cssxref("table-layout") }}</li> - <li>{{ Cssxref("z-index") }}</li> - <li>{{ Cssxref("column-width") }}</li> -</ul> diff --git a/files/fr/web/css/background-repeat/index.html b/files/fr/web/css/background-repeat/index.html index de3634fb94..d0545e3c9b 100644 --- a/files/fr/web/css/background-repeat/index.html +++ b/files/fr/web/css/background-repeat/index.html @@ -152,7 +152,7 @@ div { /* Plusieurs images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; diff --git a/files/fr/web/css/block_formatting_context/index.html b/files/fr/web/css/block_formatting_context/index.html deleted file mode 100644 index 5b324fc6bb..0000000000 --- a/files/fr/web/css/block_formatting_context/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Contexte de formatage de blocs -slug: Web/CSS/Block_formatting_context -tags: - - CSS - - Reference - - Web -translation_of: Web/Guide/CSS/Block_formatting_context ---- -<div>{{CSSRef}}</div> - -<p>Un <strong>contexte de formatage de blocs</strong> (<em>block formatting context</em>) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.</p> - -<p>Un contexte de formatage de blocs est créé dans les situations suivantes :</p> - -<ul> - <li>L'élément racine ou quelque chose qui le contient</li> - <li>Les éléments flottants (éléments avec une valeur pour la propriété {{cssxref("float")}} autre que <code>none</code>)</li> - <li>Les éléments avec une position absolue (éléments avec la propriété {{cssxref("position")}} à <code>absolute</code> ou <code>fixed</code>)</li> - <li>Les blocs en ligne (éléments avec la propriété {{cssxref("display")}} à <code>inline-block</code>)</li> - <li>Les cellules de tableau (éléments avec {{cssxref("display")}}<code>: table-cell</code>, ce qui est le défaut pour les cellules de tableau)</li> - <li>Les titres de tableau (éléments avec {{cssxref("display")}}<code>: table-caption</code>, ce qui est le défaut pour {{HTMLElement("caption")}})</li> - <li>Les éléments où {{cssxref("overflow")}} a une valeur autre que <code>visible</code></li> - <li>Les boîtes flexibles (éléments avec {{cssxref("display")}}<code>: flex</code> ou <code>inline-flex</code>)</li> - <li>{{cssxref("display")}}<code>: flow-root</code></li> -</ul> - -<p>Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.</p> - -<p>Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("clear")}}) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("float")}}</li> - <li>{{cssxref("clear")}}</li> - <li>{{cssxref("display")}}</li> -</ul> diff --git a/files/fr/web/css/sélecteurs_enfant/index.html b/files/fr/web/css/child_combinator/index.html index bc24234ef2..41b6b2ee50 100644 --- a/files/fr/web/css/sélecteurs_enfant/index.html +++ b/files/fr/web/css/child_combinator/index.html @@ -1,12 +1,13 @@ --- title: Sélecteurs enfant -slug: Web/CSS/Sélecteurs_enfant +slug: Web/CSS/Child_combinator tags: - CSS - Débutant - Reference - Sélecteur translation_of: Web/CSS/Child_combinator +original_slug: Web/CSS/Sélecteurs_enfant --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/fr/web/css/sélecteurs_de_classe/index.html b/files/fr/web/css/class_selectors/index.html index 115d791092..b363cc8324 100644 --- a/files/fr/web/css/sélecteurs_de_classe/index.html +++ b/files/fr/web/css/class_selectors/index.html @@ -1,11 +1,12 @@ --- title: Sélecteurs de classe -slug: Web/CSS/Sélecteurs_de_classe +slug: Web/CSS/Class_selectors tags: - CSS - Reference - Sélecteur translation_of: Web/CSS/Class_selectors +original_slug: Web/CSS/Sélecteurs_de_classe --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/type_color/index.html b/files/fr/web/css/color_value/index.html index fd238e5816..d3156f0e4a 100644 --- a/files/fr/web/css/type_color/index.html +++ b/files/fr/web/css/color_value/index.html @@ -1,11 +1,12 @@ --- title: <color> -slug: Web/CSS/Type_color +slug: Web/CSS/color_value tags: - CSS - Reference - Type translation_of: Web/CSS/color_value +original_slug: Web/CSS/Type_color --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/combinateur_colonne/index.html b/files/fr/web/css/column_combinator/index.html index b971e8ae4c..a5f4d54a63 100644 --- a/files/fr/web/css/combinateur_colonne/index.html +++ b/files/fr/web/css/column_combinator/index.html @@ -1,11 +1,12 @@ --- title: Combinateur de colonne -slug: Web/CSS/Combinateur_colonne +slug: Web/CSS/Column_combinator tags: - CSS - Reference - Sélecteur translation_of: Web/CSS/Column_combinator +original_slug: Web/CSS/Combinateur_colonne --- <div>{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}</div> diff --git a/files/fr/web/css/valeur_calculée/index.html b/files/fr/web/css/computed_value/index.html index 356a3f75ba..606b16f92c 100644 --- a/files/fr/web/css/valeur_calculée/index.html +++ b/files/fr/web/css/computed_value/index.html @@ -1,10 +1,11 @@ --- title: Valeur calculée -slug: Web/CSS/Valeur_calculée +slug: Web/CSS/computed_value tags: - CSS - Reference translation_of: Web/CSS/computed_value +original_slug: Web/CSS/Valeur_calculée --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html b/files/fr/web/css/containing_block/index.html index 6269f895b5..538fa642c6 100644 --- a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html +++ b/files/fr/web/css/containing_block/index.html @@ -1,11 +1,12 @@ --- title: À propos du bloc conteneur -slug: Web/CSS/A_Propos_Du_Bloc_Conteneur +slug: Web/CSS/Containing_block tags: - CSS - Guide - Reference translation_of: Web/CSS/Containing_block +original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/couleurs_css/index.html b/files/fr/web/css/couleurs_css/index.html deleted file mode 100644 index fb589fa689..0000000000 --- a/files/fr/web/css/couleurs_css/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Couleurs CSS -slug: Web/CSS/Couleurs_CSS -tags: - - Aperçu - - CSS - - CSS Color - - Reference -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -<div>{{CSSRef}}</div> - -<p><strong>Les couleurs CSS</strong> (<em>CSS Color</em> en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés_CSS">Propriétés CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("color")}}</li> - <li>{{cssxref("opacity")}}</li> -</ul> -</div> - -<h3 id="Types_de_donnée">Types de donnée</h3> - -<div class="index"> -<ul> - <li>{{cssxref("<color>")}}</li> -</ul> -</div> - -<h2 id="Guide">Guide</h2> - -<dl> - <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt> - <dd>Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.</dd> -</dl> - -<h2 id="Outils">Outils</h2> - -<dl> - <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Un sélecteur de couleurs</a></dt> - <dd>Cet outil vous permet de créer, ajuster et manipuler des couleurs.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Colors')}}</td> - <td>{{Spec2('CSS3 Colors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Support simple</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Attention, en CSS, les dégradés de couleurs ne sont pas des couleurs mais <a href="/fr/docs/Web/CSS/CSS_Images">des images</a>.</li> - <li>Les autres propriétés relatives aux couleurs et qui font partie d'autres modules de spécification : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li> -</ul> diff --git a/files/fr/web/css/liste_propriétés_css_animées/index.html b/files/fr/web/css/css_animated_properties/index.html index e3927a94d8..463b7f9669 100644 --- a/files/fr/web/css/liste_propriétés_css_animées/index.html +++ b/files/fr/web/css/css_animated_properties/index.html @@ -1,12 +1,13 @@ --- title: Liste des propriétés CSS animées -slug: Web/CSS/Liste_propriétés_CSS_animées +slug: Web/CSS/CSS_animated_properties tags: - Animations - CSS - Reference - Transitions translation_of: Web/CSS/CSS_animated_properties +original_slug: Web/CSS/Liste_propriétés_CSS_animées --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html index a2cb1bd5a3..0824678ff8 100644 --- a/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html @@ -1,11 +1,12 @@ --- title: Détecter la prise en charge des animations CSS -slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS +slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support tags: - Avancé - CSS - Obsolete translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS --- <div>{{CSSRef}}{{obsolete_header}}</div> diff --git a/files/fr/web/css/animations_css/index.html b/files/fr/web/css/css_animations/index.html index acc7ab6997..b5217ff441 100644 --- a/files/fr/web/css/animations_css/index.html +++ b/files/fr/web/css/css_animations/index.html @@ -1,10 +1,11 @@ --- title: Les animations CSS -slug: Web/CSS/Animations_CSS +slug: Web/CSS/CSS_Animations tags: - CSS - Reference translation_of: Web/CSS/CSS_Animations +original_slug: Web/CSS/Animations_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/animations_css/conseils/index.html b/files/fr/web/css/css_animations/tips/index.html index bb79f19722..adb261195e 100644 --- a/files/fr/web/css/animations_css/conseils/index.html +++ b/files/fr/web/css/css_animations/tips/index.html @@ -1,6 +1,6 @@ --- title: Trucs et astuces pour les animations CSS -slug: Web/CSS/Animations_CSS/Conseils +slug: Web/CSS/CSS_Animations/Tips tags: - Animations CSS - CSS @@ -8,6 +8,7 @@ tags: - Guide - Tutoriel translation_of: Web/CSS/CSS_Animations/Tips +original_slug: Web/CSS/Animations_CSS/Conseils --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html index 4010492e3d..ab83e1e420 100644 --- a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html +++ b/files/fr/web/css/css_animations/using_css_animations/index.html @@ -1,12 +1,13 @@ --- title: Utiliser les animations CSS -slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS +slug: Web/CSS/CSS_Animations/Using_CSS_animations tags: - Avancé - CSS - Guide - Reference translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html index 592f9f64fd..c0c5db61cd 100644 --- a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html +++ b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html @@ -1,14 +1,15 @@ --- title: Générateur de border-image -slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator tags: - CSS - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image --- <p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="Border_Image_Generator" name="Border_Image_Generator">Générateur border-image</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html index 344dd64bcc..ac9bc500aa 100644 --- a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html +++ b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html @@ -1,14 +1,15 @@ --- title: Générateur de border-radius -slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator tags: - CSS - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius --- <p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> diff --git a/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html index 77f236ac13..282a53d6e4 100644 --- a/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html +++ b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -1,14 +1,15 @@ --- title: Générateur de box-shadow -slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow +slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator tags: - CSS - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow --- <p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index f9cce126c9..14ce7bad58 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -1,12 +1,13 @@ --- title: Mettre à l'échelle des images en arrière-plan -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images tags: - CSS - Guide - Intermédiaire - Reference translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index fd4961c49f..04ac4ad67d 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -1,11 +1,12 @@ --- title: Utiliser plusieurs arrière-plans -slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds tags: - CSS - Guide - Reference translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 69b0043c13..c1b95b6eb2 100644 --- a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html +++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,11 +1,12 @@ --- title: Utilisation d'URL pour la propriété cursor -slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - Débutant - Guide translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html index 45945b3040..9487c666d5 100644 --- a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html @@ -1,10 +1,11 @@ --- title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau' -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables tags: - CSS - Guide translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index 8acebc248d..f644790b67 100644 --- a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -1,11 +1,12 @@ --- title: L'alignement des boîtes avec Flexbox -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox tags: - CSS - Guide - flexbox translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html index 4adf375ac4..7efe8c5be7 100644 --- a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html @@ -1,12 +1,13 @@ --- title: L'alignement des boîtes avec une grille CSS -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout tags: - CSS - CSS Grid - Grilles CSS - Guide translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html index 36bee5640e..81fa6692ae 100644 --- a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html @@ -1,10 +1,11 @@ --- title: L'alignement des boîtes avec une disposition en colonnes -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout tags: - CSS - Guide translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/modèle_de_boîte_css/index.html b/files/fr/web/css/css_box_model/index.html index 3bc62c03f1..53493637fa 100644 --- a/files/fr/web/css/modèle_de_boîte_css/index.html +++ b/files/fr/web/css/css_box_model/index.html @@ -1,6 +1,6 @@ --- title: Modèle de boîte -slug: Web/CSS/Modèle_de_boîte_CSS +slug: Web/CSS/CSS_Box_Model tags: - Aperçu - CSS @@ -8,6 +8,7 @@ tags: - Overview - Reference translation_of: Web/CSS/CSS_Box_Model +original_slug: Web/CSS/Modèle_de_boîte_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html index 3b14f121d8..ec87b13973 100644 --- a/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html +++ b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -1,10 +1,11 @@ --- title: Fusion des marges -slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing tags: - CSS - Reference translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +original_slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/jeux_de_caractères_css/index.html b/files/fr/web/css/css_charsets/index.html index a7c76a2c4e..f94cbc1d90 100644 --- a/files/fr/web/css/jeux_de_caractères_css/index.html +++ b/files/fr/web/css/css_charsets/index.html @@ -1,12 +1,13 @@ --- title: Jeux de caractères CSS -slug: Web/CSS/Jeux_de_caractères_CSS +slug: Web/CSS/CSS_Charsets tags: - Aperçu - CSS - CSS Charsets - Reference translation_of: Web/CSS/CSS_Charsets +original_slug: Web/CSS/Jeux_de_caractères_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html b/files/fr/web/css/css_colors/color_picker_tool/index.html index df4aa4661c..6143791170 100644 --- a/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html +++ b/files/fr/web/css/css_colors/color_picker_tool/index.html @@ -1,12 +1,13 @@ --- title: Sélecteur de couleurs CSS -slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs +slug: Web/CSS/CSS_Colors/Color_picker_tool tags: - CSS - Outil translation_of: Web/CSS/CSS_Colors/Color_picker_tool +original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs --- -<div style="display: none;"> +<div class="hidden"> <h2 id="ColorPIcker_Tool" name="ColorPIcker_Tool">ColorPIcker Tool</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html index 2032e1c2c6..4b69af66e0 100644 --- a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -1,10 +1,11 @@ --- title: Concepts de base pour la disposition multi-colonnes -slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes +slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol tags: - CSS - Guide translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +original_slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html index 909c9bd2a5..96f2191770 100644 --- a/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html @@ -1,10 +1,11 @@ --- title: Gérer la rupture du contenu entre les colonnes -slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes +slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol tags: - CSS - Guide translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +original_slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html index 7dc6078442..1cb00b72cd 100644 --- a/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html +++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -1,10 +1,11 @@ --- title: Gestion du dépassement en multi-colonnes -slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes +slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol tags: - CSS - Guide translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html b/files/fr/web/css/css_columns/spanning_columns/index.html index d1116ebd7d..fe5533f9ab 100644 --- a/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html +++ b/files/fr/web/css/css_columns/spanning_columns/index.html @@ -1,10 +1,11 @@ --- title: Répartir et équilibrer le contenu entre les colonnes -slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes +slug: Web/CSS/CSS_Columns/Spanning_Columns tags: - CSS - Guide translation_of: Web/CSS/CSS_Columns/Spanning_Columns +original_slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html b/files/fr/web/css/css_columns/styling_columns/index.html index 0689060daf..9cf822a190 100644 --- a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html +++ b/files/fr/web/css/css_columns/styling_columns/index.html @@ -1,11 +1,12 @@ --- title: Mettre en forme les colonnes -slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes +slug: Web/CSS/CSS_Columns/Styling_Columns tags: - CSS - CSS Multi-column Layout - Guide translation_of: Web/CSS/CSS_Columns/Styling_Columns +original_slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html index 897ac5c989..b704ab6a8b 100644 --- a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html @@ -1,11 +1,12 @@ --- title: Utiliser une disposition multi-colonnes -slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts tags: - Avancé - CSS - Guide translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html index 811f5c4b22..7adcf5b391 100644 --- a/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html +++ b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html @@ -1,12 +1,13 @@ --- title: Utiliser les requêtes de fonctionnalité (feature queries) -slug: >- - Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries) +slug: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries tags: - Amélioration progressive - CSS - Guide translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries +original_slug: >- + Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries) --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/compartimentation_css/index.html b/files/fr/web/css/css_containment/index.html index 34af6f3274..f4914d7997 100644 --- a/files/fr/web/css/compartimentation_css/index.html +++ b/files/fr/web/css/css_containment/index.html @@ -1,10 +1,11 @@ --- title: Compartimentation CSS (CSS Containment) -slug: Web/CSS/Compartimentation_CSS +slug: Web/CSS/CSS_Containment tags: - CSS - CSS Containment translation_of: Web/CSS/CSS_Containment +original_slug: Web/CSS/Compartimentation_CSS --- <p>{{CSSRef}}<br> L'objectif du module de spécification <em>CSS Containment</em> (pour Compartimentation CSS) consiste à améliorer les performances des pages web en permettant aux développeurs d'isoler un sous-ensemble de la page. Si le navigateur sait que cette partie est indépendante, le rendu peut être optimisé et les performances améliorées. Ce module de spécification définit une seule propriété CSS : {{cssxref("contain")}}. Dans cet article, nous verrons les objectifs principaux de cette spécification.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 2321587479..11feda660f 100644 --- a/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html +++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -1,7 +1,6 @@ --- title: Aligner des éléments dans un conteneur flexible -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container tags: - CSS - Flex @@ -9,6 +8,8 @@ tags: - Web - flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +original_slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index 652541e0c1..f3ed3dce07 100644 --- a/files/fr/web/css/css_flexible_box_layout/mixins/index.html +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -1,11 +1,12 @@ --- title: Mises en page avancées avec les boîtes flexibles -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox tags: - CSS - Reference - flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index dadea30a48..4ae046089b 100644 --- a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,6 +1,6 @@ --- title: Les concepts de base pour flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox tags: - Beginner - CSS @@ -8,6 +8,7 @@ tags: - Guide - flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html b/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html deleted file mode 100644 index f91090e0dc..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Utiliser les boîtes flexibles pour les applications web -slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -<div>{{CSSRef}}</div> - -<p>Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">le positionnement absolu</a> et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :</p> - -<ul> - <li>Centrer un élément au milieu d'une page</li> - <li>Définir des conteneurs qui s'organisent verticalement, l'un après l'autre</li> - <li>Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.</li> -</ul> - -<p>Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">au guide plus générique sur la manipulation des boîtes flexibles en CSS</a>.</p> - -<h2 id="Les_bases">Les bases</h2> - -<p>Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur <code>flex</code> puis définir {{cssxref("flex-flow")}} avec la valeur <code>row</code> (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur <code>column</code> (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété <code>wrap</code>.</p> - -<p>Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :</p> - -<ul> - <li>Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser <code>flex: none</code> that expands to <code>0 0 auto</code>.</li> - <li>Si on veut définir la taille explicite d'un élément, on pourra utiliser <code>flex: 0 0 <em>taille</em></code>. Par exemple : <code>flex 0 0 60px</code>.</li> - <li>Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser <code>flex: auto</code>. It expands to <code>1 1 auto</code>.</li> -</ul> - -<p>Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.</p> - -<h2 id="Centrer_un_élément">Centrer un élément</h2> - -<p>Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.</p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.horizontal-box { - display: flex; - flex-flow: row; -} -.spacer { - flex: auto; - background-color: black; -} -.centered-element { - flex: none; - background-color: white; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html;"><div class="vertical-box"> - <div class="spacer"></div> - <div class="centered-element horizontal-box"> - <div class="spacer"></div> - <div class="centered-element">Centered content</div> - <div class="spacer"></div> - </div> - <div class="spacer"></div> -</div> -</pre> - -<h3 id="Resultat">Resultat</h3> - -<p>{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}</p> - -<h2 id="Répartir_des_conteneurs_verticalement">Répartir des conteneurs verticalement</h2> - -<p>Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur <code>auto</code> pour le contenu et la valeur <code>none</code> pour l'en-tête et le pied de page.</p> - -<h3 id="CSS_2">CSS</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.fixed-size { - flex: none; - height: 30px; - background-color: black; - text-align: center; -} -.flexible-size { - flex: auto; - background-color: white; -} -</pre> - -<h3 id="HTML_2">HTML</h3> - -<pre class="brush: html;"><div id="document" class="vertical-box"> - <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div> - <div id="flexible-content" class="flexible-size"></div> - <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div> -</div> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js;">var height = 400; -document.getElementById('increase-size').onclick=function() { - height += 10; - if (height > 500) height = 500; - document.getElementById('document').style.height = (height + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - height -= 10; - if (height < 300) height = 300; - document.getElementById('document').style.height = (height + "px"); -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}</p> - -<h2 id="Créer_un_conteneur_horizontal_qui_se_replie">Créer un conteneur horizontal qui se replie</h2> - -<p>Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur <code>wrap</code> sur la propriété {{cssxref("flex-flow")}}.</p> - -<h3 id="CSS_3">CSS</h3> - -<pre class="brush: css;">.horizontal-container { - display: flex; - width: 300px; - flex-flow: row wrap; -} -.fixed-size { - flex: none; - width: 100px; - background-color: black; - color: white; - text-align: center; -} -</pre> - -<h3 id="HTML_3">HTML</h3> - -<pre class="brush: html;"><div id="container" class="horizontal-container"> - <div class="fixed-size">Élément 1</div> - <div class="fixed-size">Élément 2</div> - <div class="fixed-size">Élément 3</div> -</div> -<button id="increase-size">Augmenter la taille du conteneur</button> -<button id="decrease-size">Réduire la taille du conteneur</button> -</pre> - -<h3 id="JavaScript_2">JavaScript</h3> - -<pre class="brush: js;">var width = 300; - -document.getElementById('increase-size').onclick=function() { - width += 100; - if (width > 300) width = 300; - document.getElementById('container').style.width = (width + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - width -= 100; - if (width < 100) width = 100; - document.getElementById('container').style.width = (width + "px"); -} -</pre> - -<h3 id="Résultat_2">Résultat</h3> - -<p>{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Manipuler les boîtes flexibles</a></li> -</ul> diff --git a/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html index a05bdb1ca2..4565ac8844 100644 --- a/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -1,7 +1,7 @@ --- title: Contrôler les proportions des boîtes flexibles le long de l'axe principal slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax tags: - Boîtes flexibles - CSS @@ -11,6 +11,8 @@ tags: - flexbox translation_of: >- Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +original_slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 6b78cba48f..17420014c9 100644 --- a/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -1,7 +1,6 @@ --- title: Maîtriser le passage à la ligne des éléments flexibles -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items tags: - CSS - Grille @@ -11,6 +10,8 @@ tags: - grid - wrapping translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +original_slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html index acd32e0de0..c50e95a958 100644 --- a/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -1,6 +1,6 @@ --- title: Ordonner les éléments flexibles -slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items tags: - Accessibilité - Boîtes flexibles @@ -10,6 +10,7 @@ tags: - a11y - flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html index c6e9691ae5..a1b391b7ac 100644 --- a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html +++ b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -1,6 +1,7 @@ --- title: Les liens entre flexbox et les autres méthodes de disposition -slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods tags: - CSS - Guide @@ -9,6 +10,7 @@ tags: - grid translation_of: >- Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html deleted file mode 100644 index b36e1eb0f4..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Rétrocompatibilité de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox -tags: - - '@supports' - - Boîtes flexibles - - CSS - - Guide - - Intermediate - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox ---- -<div>{{CSSRef}}</div> - -<p class="summary">Les boîtes flexibles (<em>flexbox</em>) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.</p> - -<h2 id="Il_était_une_fois_flexbox…">Il était une fois <em>flexbox</em>…</h2> - -<p>Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de <em>Candidate Recommendation</em> dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.</p> - -<p>Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.</p> - -<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">En 2009</a>, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser <code>display: box</code> et on disposait ensuite de différentes propriétés <code>box-*</code> qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.</p> - -<p>Vint ensuite <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">une mise à jour de la spécification</a> pour mettre à jour la syntaxe : <code>display: flexbox</code> — là encore, ces valeurs étaient préfixées.</p> - -<p>Enfin, la spécification a été mise à jour pour définir <code>display: flex</code> comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.</p> - -<p>Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que <code>display: box</code> ou <code>display: flexbox</code>, vous pouvez en déduire qu'il s'agit d'informations obsolètes.</p> - -<h2 id="État_de_la_compatibilité_des_navigateurs">État de la compatibilité des navigateurs</h2> - -<p>La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :</p> - -<ul> - <li>Internet Explorer 10 qui implémentait la version <code>display: flexbox</code> avec le préfixe <code>-ms-</code>.</li> - <li>UC Browser qui prend en charge la version de 2009 avec <code>display: box</code> et avec le préfixe <code>-webkit-</code>.</li> -</ul> - -<p>On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec <code>display: flex</code> mais que de nombreux bugs sont présents dans cette implémentation.</p> - -<h2 id="Problèmes_fréquents">Problèmes fréquents</h2> - -<p>La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.</p> - -<p>Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.</p> - -<pre class="brush: css">.wrapper { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -}</pre> - -<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.</p> - -<h2 id="Techniques_de_recours">Techniques de recours</h2> - -<p>La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.</p> - -<h3 id="Éléments_flottants">Éléments flottants</h3> - -<blockquote> -<p>“<code>float</code> et <code>clear</code> ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Conteneurs flexibles</a></p> -</blockquote> - -<p>Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite <code>display: flex</code> sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.</p> - -<p>Pour tester le comportement alternatif, vous pouvez retirer <code>display: flex</code> du conteneur englobant.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p> - -<h3 id="display_inline-block"><code>display: inline-block</code></h3> - -<p>Lorsqu'un élément disposé avec <code>inline-block</code> devient un élément flexible, cet élément devient analogue à un bloc et le comportement de <code>display: inline-block</code> qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.</p> - -<p>Vous pouvez retirer la règle avec <code>display: flex</code> dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère <code>display: inline-block</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p> - -<h3 id="display_table-"><code>display: table-</code><em> </em></h3> - -<p>Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.</p> - -<p>Si vous utilisez <code>display: table-cell</code> sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.</p> - -<p>Si vous déclarez ensuite <code>display: flex</code> sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.</p> - -<blockquote> -<p>“Note : certaines valeurs de <code>display</code> déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec <code>display: table-cell</code> deviendront deux éléments flexibles distincts avec <code>display: block</code> plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Éléments flexibles</a></p> -</blockquote> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p> - -<h3 id="La_propriété_vertical-align">La propriété <code>vertical-align</code></h3> - -<p>L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode <code>display: inline-block</code>. Les deux modes <code>display: table-cell</code> et <code>display: inline-block</code> permettent d'utiliser cette propriété. La propriété <code>vertical-align</code> permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec <code>display: table-cell</code> ou <code>display: inline-block</code> comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p> - -<h2 id="Requêtes_de_fonctionnalités_et_flexbox">Requêtes de fonctionnalités et <em>flexbox</em></h2> - -<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/%40supports">les requêtes de fonctionnalité (<em>feature queries</em>)</a> afin de détecter la prise en charge des boîtes flexibles :</p> - -<pre class="brush: css">@supports (display: flex) { - // code utilisé pour les navigateurs qui - // prennent en charge cette fonctionnalité -}</pre> - -<p>On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code <em>flexbox</em> qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :</p> - -<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) { - // code pour les navigateurs qui - // prennent en charge cette fonctionnalité -}</pre> - -<p>Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire <em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/"> (en anglais)</a> sur le blog Hacks de Mozilla.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index 26a4738980..fdb4d31770 100644 --- a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -1,12 +1,13 @@ --- title: Cas d'utilisation classiques de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox tags: - CSS - Guide - Intermediate - flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index 8566b8accd..aa81bb277c 100644 --- a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html +++ b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -1,11 +1,12 @@ --- title: Disposition de bloc et en ligne avec le flux normal -slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal +slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow tags: - CSS - Guide - Intermédiaire translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html index 703af33bee..e657b8106c 100644 --- a/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -1,11 +1,12 @@ --- title: La disposition en flux et le dépassement -slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow tags: - CSS - Guide - Intermédiaire translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement --- <div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div> diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html index 2ecf299ce2..26ad17b532 100644 --- a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -1,11 +1,12 @@ --- title: Disposition de flux et modes d'écriture -slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes tags: - CSS - Guide - Mode d'écriture translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture --- <p class="summary">La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p> diff --git a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index 663f0a9c8a..c9bb3ac9b3 100644 --- a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html +++ b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -1,11 +1,12 @@ --- title: Être ou ne pas être dans le flux -slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors +slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow tags: - CSS - Guide - Intermédiaire translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +original_slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index 88ed84ff16..db1a7ee0d7 100644 --- a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -1,11 +1,12 @@ --- title: Explications quant aux contextes de formatage -slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage +slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts tags: - CSS - Guide - Intermédiaire translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +original_slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html index 6980ff4d78..58699af2b5 100644 --- a/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html @@ -1,12 +1,13 @@ --- title: Guide des caractéristiques de police OpenType -slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType +slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide tags: - CSS - Fonts - Guide - Polices translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_fonts/guide_polices_variables/index.html b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html index 043902094e..8b93687858 100644 --- a/files/fr/web/css/css_fonts/guide_polices_variables/index.html +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html @@ -1,12 +1,13 @@ --- title: Guide des polices variables -slug: Web/CSS/CSS_Fonts/Guide_polices_variables +slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide tags: - CSS - Fonts - Guide - Polices translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index 980b03ea62..42060519b3 100644 --- a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -1,6 +1,6 @@ --- title: Le placement automatique sur une grille CSS -slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout tags: - CSS - CSS Grids @@ -8,6 +8,7 @@ tags: - Guide - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index c6395dbee9..d4dac05318 100644 --- a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -1,6 +1,6 @@ --- title: Les concepts de base des grilles CSS -slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout tags: - CSS - CSS Grids @@ -8,6 +8,7 @@ tags: - Guide - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 8353f2c29e..7830f9ab48 100644 --- a/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -1,6 +1,6 @@ --- title: L'alignement des boîtes avec les grilles CSS -slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout tags: - CSS - CSS Grid @@ -8,6 +8,7 @@ tags: - Guides - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html index 8a5122de2f..6071aa815d 100644 --- a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -1,6 +1,6 @@ --- title: Les grilles CSS et l'amélioration progressive -slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement tags: - CSS - CSS Grids @@ -8,6 +8,7 @@ tags: - Guide - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement +original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html index 6e2751382d..ccde0b5c42 100644 --- a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -1,6 +1,6 @@ --- title: Les grilles CSS et l'accessibilité -slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility tags: - Accessibilité - CSS @@ -9,6 +9,7 @@ tags: - Guide - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index cbc0501498..b8ec3a91d3 100644 --- a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -1,14 +1,15 @@ --- -title: 'Les grilles CSS, les valeurs logiques et les modes d''écriture' -slug: >- - Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture +title: Les grilles CSS, les valeurs logiques et les modes d'écriture +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes tags: - CSS - CSS Grids - Grilles CSS - Guides - Intermédiaire -translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes +original_slug: >- + Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html index be9c0122a7..259dd33bbc 100644 --- a/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html @@ -1,12 +1,13 @@ --- title: Définir des zones sur une grille -slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille +slug: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas tags: - CSS - CSS Grids - Grilles CSS - Guide translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index d8d7e5cf83..a7fbb6e569 100644 --- a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -1,12 +1,13 @@ --- title: Utiliser des lignes nommées sur une grille -slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille +slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines tags: - CSS - CSS Grids - Grilles CSS - Guide translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 5984342f18..96ba332efb 100644 --- a/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -1,6 +1,6 @@ --- title: Placer les éléments sur les lignes d'une grille CSS -slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS +slug: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid tags: - CSS - CSS Grids @@ -8,6 +8,7 @@ tags: - Guides - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index 44e85dda1f..ca59709909 100644 --- a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -1,7 +1,6 @@ --- title: Construire des dispositions courantes avec des grilles CSS -slug: >- - Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS +slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout tags: - CSS - CSS Grids @@ -9,6 +8,8 @@ tags: - Guide - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +original_slug: >- + Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 9f31864e55..65525f21d4 100644 --- a/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html +++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -1,12 +1,13 @@ --- title: Le modèle de grille et les autres modèles de disposition -slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout tags: - CSS - CSS Grids - Guide - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_images/sprites_css/index.html b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html index a141a8a11e..1454f113ed 100644 --- a/files/fr/web/css/css_images/sprites_css/index.html +++ b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -1,11 +1,12 @@ --- title: Les sprites CSS -slug: Web/CSS/CSS_Images/Sprites_CSS +slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS tags: - Avancé - CSS - Guide translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +original_slug: Web/CSS/CSS_Images/Sprites_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/utilisation_de_dégradés_css/index.html b/files/fr/web/css/css_images/using_css_gradients/index.html index 94a0fbcb67..5b836a6e21 100644 --- a/files/fr/web/css/utilisation_de_dégradés_css/index.html +++ b/files/fr/web/css/css_images/using_css_gradients/index.html @@ -1,11 +1,12 @@ --- title: Utilisation de dégradés CSS -slug: Web/CSS/Utilisation_de_dégradés_CSS +slug: Web/CSS/CSS_Images/Using_CSS_gradients tags: - Avancé - CSS - Guide translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +original_slug: Web/CSS/Utilisation_de_dégradés_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html index 52a1cfbc33..632152b9d6 100644 --- a/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -1,11 +1,12 @@ --- title: Indentation homogène des listes -slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation tags: - CSS - Guide - Intermédiaire translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_lists/index.html b/files/fr/web/css/css_lists_and_counters/index.html index 781d7cb961..40b79a5e95 100644 --- a/files/fr/web/css/css_lists/index.html +++ b/files/fr/web/css/css_lists_and_counters/index.html @@ -1,10 +1,11 @@ --- title: CSS Lists -slug: Web/CSS/CSS_Lists +slug: Web/CSS/CSS_Lists_and_Counters tags: - CSS - Reference translation_of: Web/CSS/CSS_Lists_and_Counters +original_slug: Web/CSS/CSS_Lists --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_lists/compteurs_css/index.html b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html index 7ca83181c4..e5eb03d473 100644 --- a/files/fr/web/css/css_lists/compteurs_css/index.html +++ b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html @@ -1,11 +1,12 @@ --- title: Compteurs CSS -slug: Web/CSS/CSS_Lists/Compteurs_CSS +slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters tags: - Avancé - CSS - Guide translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists/Compteurs_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html b/files/fr/web/css/css_logical_properties/basic_concepts/index.html index 4129c926c7..0df0049658 100644 --- a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html +++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.html @@ -1,11 +1,12 @@ --- title: Concepts de base des propriétés et valeurs logiques -slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base +slug: Web/CSS/CSS_Logical_Properties/Basic_concepts tags: - CSS - Guide - Propriété logique translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html index 3a99d5bbad..dbb69adc26 100644 --- a/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html +++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html @@ -1,11 +1,12 @@ --- title: Propriétés logiques pour les flottements et le positionnement -slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement +slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning tags: - CSS - Guide - Propriété logique translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html index 8b4da0bce6..82b2995802 100644 --- a/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html @@ -1,12 +1,13 @@ --- -title: 'Propriétés logiques pour les marges, les bordures et les remplissages' -slug: >- - Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages +title: Propriétés logiques pour les marges, les bordures et les remplissages +slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding tags: - CSS - Guide - Propriété logique translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +original_slug: >- + Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/css_logical_properties/dimensionnement/index.html b/files/fr/web/css/css_logical_properties/sizing/index.html index f6ffe024e6..4b5c4dd892 100644 --- a/files/fr/web/css/css_logical_properties/dimensionnement/index.html +++ b/files/fr/web/css/css_logical_properties/sizing/index.html @@ -1,11 +1,12 @@ --- title: Propriétés logiques pour le dimensionnement -slug: Web/CSS/CSS_Logical_Properties/Dimensionnement +slug: Web/CSS/CSS_Logical_Properties/Sizing tags: - CSS - Guide - Propriété logique translation_of: Web/CSS/CSS_Logical_Properties/Sizing +original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_masks/index.html b/files/fr/web/css/css_masking/index.html index ea2a9afeb5..4d7acfab53 100644 --- a/files/fr/web/css/css_masks/index.html +++ b/files/fr/web/css/css_masking/index.html @@ -1,12 +1,13 @@ --- title: CSS Masks -slug: Web/CSS/CSS_Masks +slug: Web/CSS/CSS_Masking tags: - Aperçu - CSS - CSS Masking - Reference translation_of: Web/CSS/CSS_Masking +original_slug: Web/CSS/CSS_Masks --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/motion_path/index.html b/files/fr/web/css/css_motion_path/index.html index e6740d2023..7bde7c0ee7 100644 --- a/files/fr/web/css/motion_path/index.html +++ b/files/fr/web/css/css_motion_path/index.html @@ -1,6 +1,6 @@ --- title: Motion Path -slug: Web/CSS/Motion_Path +slug: Web/CSS/CSS_Motion_Path tags: - Aperçu - CSS @@ -8,6 +8,7 @@ tags: - Motion Path - Reference translation_of: Web/CSS/CSS_Motion_Path +original_slug: Web/CSS/Motion_Path --- <div>{{CSSRef}}{{SeeCompatTable}}</div> diff --git a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index d12e2113d1..e0076181f3 100644 --- a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -1,12 +1,13 @@ --- title: Ajouter z-index -slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index tags: - Avancé - CSS - Guide - z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index --- <div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html index 0c6c636886..1f41be9467 100644 --- a/files/fr/web/css/comprendre_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html @@ -1,11 +1,12 @@ --- title: Comprendre z-index en CSS -slug: Web/CSS/Comprendre_z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index tags: - Avancé - CSS - Guide translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +original_slug: Web/CSS/Comprendre_z-index --- <p>{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p> diff --git a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html index de0cc3761f..f031a73fde 100644 --- a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -1,6 +1,6 @@ --- title: Empilement et éléments flottants -slug: Web/CSS/Comprendre_z-index/Empilement_et_float +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float tags: - Avancé - CSS @@ -10,6 +10,7 @@ tags: - float - z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float --- <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/exemple_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html index f155461dd4..ed1138131b 100644 --- a/files/fr/web/css/comprendre_z-index/exemple_1/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -1,11 +1,12 @@ --- title: Exemple d'empilement 1 -slug: Web/CSS/Comprendre_z-index/Exemple_1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 tags: - Avancé - CSS - Guide translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +original_slug: Web/CSS/Comprendre_z-index/Exemple_1 --- <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/exemple_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html index 75bbba62d9..161afae998 100644 --- a/files/fr/web/css/comprendre_z-index/exemple_2/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -1,11 +1,12 @@ --- title: Exemple d'empilement 2 -slug: Web/CSS/Comprendre_z-index/Exemple_2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 tags: - Avancé - CSS - Guide translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +original_slug: Web/CSS/Comprendre_z-index/Exemple_2 --- <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/exemple_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html index 5530887ec2..ae2dfa1046 100644 --- a/files/fr/web/css/comprendre_z-index/exemple_3/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -1,11 +1,12 @@ --- title: Exemple d'empilement 3 -slug: Web/CSS/Comprendre_z-index/Exemple_3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 tags: - Avancé - CSS - Guide translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +original_slug: Web/CSS/Comprendre_z-index/Exemple_3 --- <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index db892c51dc..89eddc49b5 100644 --- a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -1,12 +1,13 @@ --- title: Empilement sans z-index -slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index tags: - Avancé - CSS - Guide - z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index --- <div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index 20fa6ab2ce..da1de35a86 100644 --- a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -1,12 +1,13 @@ --- title: L'empilement de couches -slug: Web/CSS/Comprendre_z-index/Empilement_de_couches +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context tags: - Avancé - CSS - Guide - z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches --- <div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_questions_frequentes/index.html b/files/fr/web/css/css_questions_frequentes/index.html deleted file mode 100644 index 0d62552798..0000000000 --- a/files/fr/web/css/css_questions_frequentes/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Questions fréquentes en CSS -slug: Web/CSS/CSS_questions_frequentes -tags: - - CSS - - Débutant - - Exemple - - Guide -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -<h2 id="Pourquoi_mon_CSS_pourtant_valide_ne_fournit_pas_un_rendu_correct">Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?</h2> - -<p>Pour afficher un document, les navigateurs utilisent le <code>DOCTYPE</code> - contraction de l'anglais <em>document type</em>, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un <code>DOCTYPE</code> correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.</p> - -<p>Les navigateurs modernes ont deux modes de rendu :</p> - -<ul> - <li><em>Mode Quirk:</em> aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un <code>DOCTYPE</code> incomplet, incorrect ou manquant, ou avec une déclaration <code>DOCTYPE</code> en utilisation avant 2001 seront affichées en mode Quirks.</li> - <li><em>Mode Standard: </em>le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un <code>DOCTYPE</code> moderne seront affichées en mode Standard.</li> -</ul> - -<p>Les navigateurs basés sur Gecko ont un troisième mode <a href="/fr/docs/Mode_presque_standard_de_Gecko">Presque Standard</a> qui comporte quelques <em>quirks</em> mineurs.</p> - -<p>Voici une liste des <code>DOCTYPE</code> les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :</p> - -<pre class="brush: html"><!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque - navigateur moderne utilise un parseur HTML5, c'est le - doctype recommandé. */ - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"https://www.w3.org/TR/html4/loose.dtd"> - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"https://www.w3.org/TR/html4/strict.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></pre> - -<h2 id="Pourquoi_mon_CSS_qui_est_valide_n'est_pas_affiché_du_tout">Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?</h2> - -<p>Pour être appliqué, une feuille CSS doit être définie avec un type MIME <code>text/css</code>. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.</p> - -<h2 id="Quelle_est_la_différence_entre_id_et_class">Quelle est la différence entre <code>id</code> et <code>class</code> ?</h2> - -<p>Les éléments HTML peuvent posséder un attribut de type <code>id</code> et / ou <code>class</code>. L'attribut <code>id</code> assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut <code>class</code> assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en <code>id</code> et / ou en <code>class</code>.</p> - -<p>Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut <code>id</code>. Ces caractéristiques de style ne seront appliquées que sur cet <code>id</code> particulier.</p> - -<p>Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut <code>class</code>.</p> - -<p>Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type <code>label</code> et <code>form</code> ou pour décorer des éléments qui doivent être sémantiquement uniques.</p> - -<p>Voire <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs" title="Les sélecteurs CSS">Les sélecteurs CSS</a>.</p> - -<h2 id="Comment_revenir_à_la_valeur_par_défaut_d'un_propriété">Comment revenir à la valeur par défaut d'un propriété ?</h2> - -<p>Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.</p> - -<p>Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur <code><a href="/fr/docs/Web/CSS/initial">initial</a></code>. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.</p> - -<h2 id="Comment_créer_un_style_dérivant_d'un_autre">Comment créer un style dérivant d'un autre ?</h2> - -<p>CSS ne permet de faire dériver un style d'un autre. Voire <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">l'article d'Eric Meyer à propos de la position du groupe de travail</a>. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.</p> - -<h2 id="Comment_assigner_de_multiples_classes_à_un_élément">Comment assigner de multiples classes à un élément?</h2> - -<p>Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut <code>class</code> en séparant chaque classe d'un espace.</p> - -<pre class="brush: html"><style type="text/css"> -.news { background: black; color: white; } -.today { font-weight: bold; } -</style> - -<div class="news today"> -... content of today's news ... -</div> -</pre> - -<p>Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut <code>class</code> n'est pas pris en compte.</p> - -<h2 id="Pourquoi_mes_règles_ne_fonctionnent-elles_pas_correctement">Pourquoi mes règles ne fonctionnent-elles pas correctement ?</h2> - -<p>Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie <em>Règles de style CSS</em> de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.</p> - -<h3 id="Hiérarchie_des_éléments_HTML">Hiérarchie des éléments HTML</h3> - -<p>La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.</p> - -<pre class="brush: css">.news { - color: black; -} - -.corpName { - font-weight: bold; - color: red; -} -</pre> - -<pre class="brush: html"><!-- Le texte de l'annonce est en noir - mais le nom de l'entreprise est - en rouge gras --> -<div class="news"> (Reuters) - <span class="corpName">General Electric</span> - (GE.NYS) announced on Thursday... -</div> -</pre> - -<p>Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.</p> - -<h3 id="L'ordre_et_la_redéfinition_des_règles">L'ordre et la redéfinition des règles</h3> - -<p>Pour les feuilles de style CSS, <strong>l'ordre est important</strong>. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.</p> - -<pre class="brush: css">#stockTicker { - font-weight: bold; -} -.stockSymbol { - color: red; -} -/* D'autres règles */ -/* D'autres règles */ -/* D'autres règles */ -.stockSymbol { - font-weight: normal; -} -</pre> - -<p> </p> - -<pre class="brush: html"><!-- La plupart du texte est en gras sauf "GE", - qui est en rouge et sans graisse --> -<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div> - -</pre> - -<p>Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.</p> - -<h3 id="Utiliser_les_propriétés_raccourcies">Utiliser les propriétés raccourcies</h3> - -<p>Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.</p> - -<pre class="brush: css">#stockTicker { - font-size: 12px; - font-family: Verdana; - font-weight: bold; -} - -.stockSymbol { - font: 14px Arial; - color: red; -} -</pre> - -<pre class="brush: html"><div id="stockTicker"> - NYS: - <span class="stockSymbol"> - GE - </span> - +1.0 ... -</div></pre> - -<p>Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car <strong>l'ordre des règles est important</strong>.</p> - -<pre class="brush: css">#stockTicker { - font-weight: bold; - font: 12px Verdana; - /* font-weight vaut maintenant normal */ -} -</pre> - -<h3 id="Utiliser_le_sélecteur_*">Utiliser le sélecteur <code>*</code></h3> - -<p>Le sélecteur <code>*</code> fait référence à n'importe quel élément et doit donc être utilisé avec soin.</p> - -<pre class="brush: css">body * { - font-weight: normal; -} - -#stockTicker { - font: 12px Verdana; -} - -.corpName { - font-weight: bold; -} - -.stockUp { - color: red; -} -</pre> - -<pre class="brush: html"><div id="section"> - NYS: - <span class="corpName"> - <span class="stockUp"> - GE - </span> - </span> - +1.0 ... -</div></pre> - -<p>Dans cet exemple, le sélecteur <code>body *</code> cible tous les éléments à l'intérieur de <code>body</code>, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe <code>.stockUp</code>. Ainsi, la règle <code>font-weight: bold;</code> appliquée sur la classe <code>.corpName</code> est surchargée par la règle <code>font-weight: normal;</code> qui est appliquée à tous les éléments contenus dans <code>body</code>.</p> - -<p>Le sélecteur <code>*</code> doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.</p> - -<h3 id="La_spécificité_en_CSS">La spécificité en CSS</h3> - -<p>Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a>. Les styles <em>inline</em> (ceux déclarés via l'attribut HTML <code>style</code>) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.</p> - -<pre class="brush: css">div { - color: black; -} - -#orange { - color: orange; -} - -.green { - color: green; -} -</pre> - -<pre class="brush: html"><div id="orange" class="green" style="color: red;"> - Voici quelque chose qui sera rouge. -</div></pre> - -<p>Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire <a href="https://www.w3.org/TR/CSS21/cascade.html#specificity">le chapitre de la spécification CSS 2.1</a> ou <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">le chapitre correspondant de la section Apprendre</a>.</p> - -<h2 id="Quid_des_propriétés_-moz-*_-ms-*_-webkit-*_-o-*_et_-khtml-*">Quid des propriétés <code>-moz-*</code>, <code>-ms-*</code>, <code>-webkit-*</code>, <code>-o-*</code> et <code>-khtml-*</code> ?</h2> - -<p>Ces propriétés, appelées <em>propriétés préfixées</em>, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.</p> - -<p>Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.</p> - -<p>Pour plus d'informations <a href="/fr/docs/Web/CSS/Extensions_Mozilla">sur les extensions CSS de Mozilla, vous pouvez consulter la page associée</a>.</p> - -<h2 id="Quel_est_l'impact_de_z-index_sur_le_positionnement_des_éléments">Quel est l'impact de <code>z-index</code> sur le positionnement des éléments ?</h2> - -<p>La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.</p> - -<p>Un élément pour lequel <code>z-index</code> est plus grand qu'un autre sera toujours empilé « devant ».</p> - -<p>La propriété <code>z-index</code> ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut <code>absolute</code>, <code>relative</code> ou <code>fixed</code>).</p> diff --git a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html index 3ec397cfde..8fbc368201 100644 --- a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html @@ -1,11 +1,12 @@ --- title: Concepts de bases pour CSS Scroll Snap -slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base +slug: Web/CSS/CSS_Scroll_Snap/Basic_concepts tags: - CSS - CSS Scroll Snap - Guide translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts +original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html b/files/fr/web/css/css_scroll_snap/browser_compat/index.html index f5d6f97ca4..095ea0b616 100644 --- a/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html +++ b/files/fr/web/css/css_scroll_snap/browser_compat/index.html @@ -1,12 +1,13 @@ --- title: Compatibilité des navigateurs et CSS Scroll Snap -slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs +slug: Web/CSS/CSS_Scroll_Snap/Browser_compat tags: - CSS - CSS Scroll Snap - Compatibilité - Guide translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/sélecteurs_css/index.html b/files/fr/web/css/css_selectors/index.html index a9d6f91d81..8580452402 100644 --- a/files/fr/web/css/sélecteurs_css/index.html +++ b/files/fr/web/css/css_selectors/index.html @@ -1,6 +1,6 @@ --- title: Sélecteurs CSS -slug: Web/CSS/Sélecteurs_CSS +slug: Web/CSS/CSS_Selectors tags: - Aperçu - CSS @@ -8,6 +8,7 @@ tags: - Reference - Sélecteur translation_of: Web/CSS/CSS_Selectors +original_slug: Web/CSS/Sélecteurs_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index 8aeae8c255..4c55b270d4 100644 --- a/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -1,11 +1,12 @@ --- -title: 'Utiliser la pseudo-classe :target dans un sélecteur' -slug: 'Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur' +title: Utiliser la pseudo-classe :target dans un sélecteur +slug: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors tags: - CSS - Guide - Intermédiaire -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +translation_of: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/basic_shapes/index.html index e1c594bce0..eed2d48370 100644 --- a/files/fr/web/css/css_shapes/formes_simples/index.html +++ b/files/fr/web/css/css_shapes/basic_shapes/index.html @@ -1,11 +1,12 @@ --- title: Formes simples -slug: Web/CSS/CSS_Shapes/Formes_simples +slug: Web/CSS/CSS_Shapes/Basic_Shapes tags: - CSS - CSS Shapes - Guide translation_of: Web/CSS/CSS_Shapes/Basic_Shapes +original_slug: Web/CSS/CSS_Shapes/Formes_simples --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html b/files/fr/web/css/css_shapes/from_box_values/index.html index 5ed5b06bfa..ec57c04537 100644 --- a/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html +++ b/files/fr/web/css/css_shapes/from_box_values/index.html @@ -1,6 +1,6 @@ --- title: Créer des formes à partir des boîtes -slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes +slug: Web/CSS/CSS_Shapes/From_box_values tags: - Boîtes - CSS @@ -8,6 +8,7 @@ tags: - Formes CSS - Guide translation_of: Web/CSS/CSS_Shapes/From_box_values +original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_shapes/aperçu_formes_css/index.html b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html index bf8d674cf3..4f7abd917f 100644 --- a/files/fr/web/css/css_shapes/aperçu_formes_css/index.html +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html @@ -1,12 +1,13 @@ --- title: Aperçu des formes CSS -slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS +slug: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes tags: - Aperçu - CSS - CSS Shapes - Formes CSS translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +original_slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_shapes/générer_formes_images/index.html b/files/fr/web/css/css_shapes/shapes_from_images/index.html index e85db873c1..58a1729e2c 100644 --- a/files/fr/web/css/css_shapes/générer_formes_images/index.html +++ b/files/fr/web/css/css_shapes/shapes_from_images/index.html @@ -1,11 +1,12 @@ --- title: Générer des formes avec des images -slug: Web/CSS/CSS_Shapes/Générer_formes_images +slug: Web/CSS/CSS_Shapes/Shapes_From_Images tags: - CSS - Formes CSS - Guide translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images +original_slug: Web/CSS/CSS_Shapes/Générer_formes_images --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html b/files/fr/web/css/css_transforms/using_css_transforms/index.html index c33a7e3ac9..3f5eb410b5 100644 --- a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.html @@ -1,6 +1,6 @@ --- title: Utilisation des transformations CSS -slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms tags: - 3D - Avancé @@ -12,6 +12,7 @@ tags: - perspective - rotation translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html b/files/fr/web/css/css_transitions/using_css_transitions/index.html index bbcdcb51e2..19d7aefd57 100644 --- a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html +++ b/files/fr/web/css/css_transitions/using_css_transitions/index.html @@ -1,12 +1,13 @@ --- title: Utiliser les transitions CSS -slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions tags: - Avancé - CSS - Guide - Transitions translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS --- <div>{{CSSref}}</div> @@ -50,7 +51,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -115,7 +116,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -180,7 +181,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -245,7 +246,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -314,7 +315,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -377,7 +378,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: linear</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -440,7 +441,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-end</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -503,7 +504,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: steps(4, end)</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -570,7 +571,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -642,7 +643,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -714,7 +715,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -786,7 +787,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/fr/web/css/types_css/index.html b/files/fr/web/css/css_types/index.html index 28f95eeef4..5642f8cf43 100644 --- a/files/fr/web/css/types_css/index.html +++ b/files/fr/web/css/css_types/index.html @@ -1,6 +1,6 @@ --- title: Types CSS -slug: Web/CSS/Types_CSS +slug: Web/CSS/CSS_Types tags: - Aperçu - CSS @@ -8,6 +8,7 @@ tags: - Reference - Type translation_of: Web/CSS/CSS_Types +original_slug: Web/CSS/Types_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/valeurs_et_unités_css/index.html b/files/fr/web/css/css_values_and_units/index.html index 0c1c4f9b57..b49a59e9aa 100644 --- a/files/fr/web/css/valeurs_et_unités_css/index.html +++ b/files/fr/web/css/css_values_and_units/index.html @@ -1,10 +1,11 @@ --- title: Valeurs et unités CSS -slug: Web/CSS/Valeurs_et_unités_CSS +slug: Web/CSS/CSS_Values_and_Units tags: - CSS - Reference translation_of: Web/CSS/CSS_Values_and_Units +original_slug: Web/CSS/Valeurs_et_unités_CSS --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html b/files/fr/web/css/cssom_view/coordinate_systems/index.html index 543167b1b6..2d356ed5c8 100644 --- a/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html +++ b/files/fr/web/css/cssom_view/coordinate_systems/index.html @@ -1,12 +1,13 @@ --- title: Systèmes de coordonnées -slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées +slug: Web/CSS/CSSOM_View/Coordinate_systems tags: - CSS - CSSOM - Coordonnées - Guide translation_of: Web/CSS/CSSOM_View/Coordinate_systems +original_slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées --- <div>{{cssref}}</div> diff --git a/files/fr/web/css/sélecteurs_descendant/index.html b/files/fr/web/css/descendant_combinator/index.html index 5690dd95e7..de2b140431 100644 --- a/files/fr/web/css/sélecteurs_descendant/index.html +++ b/files/fr/web/css/descendant_combinator/index.html @@ -1,12 +1,13 @@ --- title: Sélecteurs descendant -slug: Web/CSS/Sélecteurs_descendant +slug: Web/CSS/Descendant_combinator tags: - CSS - Débutant - Reference - Sélecteur translation_of: Web/CSS/Descendant_combinator +original_slug: Web/CSS/Sélecteurs_descendant --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/fr/web/css/timing-function/index.html b/files/fr/web/css/easing-function/index.html index 4170f065b1..5398af2641 100644 --- a/files/fr/web/css/timing-function/index.html +++ b/files/fr/web/css/easing-function/index.html @@ -1,12 +1,13 @@ --- title: <timing-function> -slug: Web/CSS/timing-function +slug: Web/CSS/easing-function tags: - CSS - Reference - Type translation_of: Web/CSS/easing-function translation_of_original: Web/CSS/timing-function +original_slug: Web/CSS/timing-function --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/filter-function/url/index.html b/files/fr/web/css/filter-function/url/index.html deleted file mode 100644 index a31d8c3342..0000000000 --- a/files/fr/web/css/filter-function/url/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: url() -slug: Web/CSS/filter-function/url -tags: - - CSS - - Junk - - Reference -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url ---- -<div>{{CSSRef}}</div> - -<p>La fonction <strong><code>url()</code></strong> permet d'utiliser un <a href="/fr/docs/Web/SVG/Element/filter">filtre SVG</a> afin de modifier l'apparence d'une image.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">url(<em>emplacement</em>)</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>emplacement</code></dt> - <dd>L'URL ({{cssxref("<url>")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.</dd> -</dl> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: css">url(ressources.svg#c1)</pre> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("<filter-function>")}}</li> -</ul> diff --git a/files/fr/web/css/filter/index.html b/files/fr/web/css/filter/index.html index 2e10b2f60c..9f24d80f55 100644 --- a/files/fr/web/css/filter/index.html +++ b/files/fr/web/css/filter/index.html @@ -101,7 +101,7 @@ img { <pre class="brush: css">filter: blur(5px) </pre> -<div id="blur_example" style="display: none;"> +<div id="blur_example" class="hidden"> <pre class="brush: html"> <table class="standard-table"> <thead> <tr> @@ -198,7 +198,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> +<div id="brightness_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -297,7 +297,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="contrast_example" style="display: none;"> +<div id="contrast_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -411,7 +411,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="shadow_example" style="display: none;"> +<div id="shadow_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -533,7 +533,7 @@ table.standard-table td { <pre class="brush: css">filter: grayscale(100%)</pre> -<div id="grayscale_example" style="display: none;"> +<div id="grayscale_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -621,7 +621,7 @@ table.standard-table td { <pre class="brush: css">filter: hue-rotate(90deg)</pre> -<div id="huerotate_example" style="display: none;"> +<div id="huerotate_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -712,7 +712,7 @@ table.standard-table td { <pre class="brush: css">filter: invert(100%)</pre> -<div id="invert_example" style="display: none;"> +<div id="invert_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -800,7 +800,7 @@ table.standard-table td { <pre class="brush: css">filter: opacity(50%)</pre> -<div id="opacity_example" style="display: none;"> +<div id="opacity_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -886,7 +886,7 @@ table.standard-table td { <pre class="brush: css">filter: saturate(200%)</pre> -<div id="saturate_example" style="display: none;"> +<div id="saturate_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -971,7 +971,7 @@ table.standard-table td { <pre class="brush: css">filter: sepia(100%)</pre> -<div id="sepia_example" style="display: none;"> +<div id="sepia_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -1059,7 +1059,7 @@ table.standard-table td { <pre class="brush: css">filter: contrast(175%) brightness(103%)</pre> -<div id="combination()" style="display: none;"> +<div id="combination()" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> diff --git a/files/fr/web/css/filters_effects/index.html b/files/fr/web/css/filters_effects/index.html deleted file mode 100644 index 6976999a5f..0000000000 --- a/files/fr/web/css/filters_effects/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Filters Effects -slug: Web/CSS/Filters_Effects -tags: - - CSS - - Reference -translation_of: Web/CSS/Filter_Effects -translation_of_original: Web/CSS/Filters_Effects ---- -<div>{{CSSRef}}</div> - -<p><em><strong>Filter Effects</strong></em> (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés_CSS">Propriétés CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("filter")}}</li> -</ul> -</div> - -<h3 id="Fonctions_CSS">Fonctions CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("filter", "blur()", "#blur()")}}</li> - <li>{{cssxref("filter", "brightness()", "#brightness()")}}</li> - <li>{{cssxref("filter", "contrast()", "#contrast()")}}</li> - <li>{{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}</li> - <li>{{cssxref("filter", "grayscale()", "#grayscale()")}}</li> - <li>{{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}</li> - <li>{{cssxref("filter", "invert()", "#invert()")}}</li> - <li>{{cssxref("filter", "opacity()", "#opacity()")}}</li> - <li>{{cssxref("filter", "saturate()", "#saturate()")}}</li> - <li>{{cssxref("filter", "sepia()", "#sepia()")}}</li> - <li>{{cssxref("filter", "url()", "#url()")}}</li> -</ul> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop(35)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td> - <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Edge</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simle</td> - <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop(35)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td> - <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p> - </td> - </tr> - </tbody> -</table> -</div> diff --git a/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html b/files/fr/web/css/general_sibling_combinator/index.html index ea97bdbf67..46c84e2baa 100644 --- a/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html +++ b/files/fr/web/css/general_sibling_combinator/index.html @@ -1,12 +1,13 @@ --- title: Sélecteurs de voisins généraux -slug: Web/CSS/Sélecteurs_de_voisins_généraux +slug: Web/CSS/General_sibling_combinator tags: - CSS - Débutant - Reference - Sélecteur translation_of: Web/CSS/General_sibling_combinator +original_slug: Web/CSS/Sélecteurs_de_voisins_généraux --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/fr/web/css/grid-column-gap/index.html b/files/fr/web/css/grid-column-gap/index.html deleted file mode 100644 index 05b3e559d2..0000000000 --- a/files/fr/web/css/grid-column-gap/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: grid-column-gap -slug: Web/CSS/grid-column-gap -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-gap -translation_of_original: Web/CSS/grid-column-gap ---- -<div>{{CSSRef}}{{Deprecated_Header}}</div> - -<div class="note"> -<p><strong>Note :</strong> La propriété <code>grid-column-gap</code> a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.</p> -</div> - -<p>La propriété <strong><code>grid-column-gap</code></strong> définit l'espacement entre les colonnes d'une grille.</p> - -<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css no-line-numbers">/* Valeurs de longueur */ -grid-column-gap: 20px; -grid-column-gap: 1em; -grid-column-gap: 3vmin; -grid-column-gap: 0.5cm; - -/* Valeurs relatives à la taille */ -/* de l'élément englobant */ -/* Type <percentage> */ -grid-column-gap: 10%; - -/* Valeurs globales */ -grid-column-gap: inherit; -grid-column-gap: initial; -grid-column-gap: unset; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight[6]">#grid { - display: grid; - height: 100px; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: 100px; - grid-column-gap: 20px; -} - -#grid > div { - background-color: lime; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="grid"> - <div></div> - <div></div> - <div></div> -</div></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.properties.grid-column-gap")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Versions standards non-préfixées : - <ul> - <li>{{cssxref("row-gap")}},</li> - <li>{{cssxref("column-gap")}},</li> - <li>{{cssxref("gap")}}</li> - </ul> - </li> - <li>{{cssxref("grid-row-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de bases : les gouttières</a></li> -</ul> diff --git a/files/fr/web/css/sélecteurs_d_id/index.html b/files/fr/web/css/id_selectors/index.html index aa9a2141bc..610370e219 100644 --- a/files/fr/web/css/sélecteurs_d_id/index.html +++ b/files/fr/web/css/id_selectors/index.html @@ -1,12 +1,13 @@ --- title: Sélecteurs d'ID -slug: Web/CSS/Sélecteurs_d_ID +slug: Web/CSS/ID_selectors tags: - CSS - Débutant - Reference - Sélecteur translation_of: Web/CSS/ID_selectors +original_slug: Web/CSS/Sélecteurs_d_ID --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/fr/web/css/implémentation_des_brouillons_css/index.html b/files/fr/web/css/implémentation_des_brouillons_css/index.html deleted file mode 100644 index 98f3c88b72..0000000000 --- a/files/fr/web/css/implémentation_des_brouillons_css/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Implémentation des fonctionnalités CSS à l'état de brouillon -slug: Web/CSS/Implémentation_des_Brouillons_CSS -tags: - - CSS - - Draft - - NeedsContent -translation_of: Web/CSS/Mozilla_Extensions -translation_of_original: Web/CSS/Draft_Implementations_of_CSS_Features ---- -<div>{{CSSRef}}{{Draft}}</div> - -<div class="warning"> -<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p> - -<ul> - <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li> -</ul> -</div> - -<p>Mozilla gère un certain nombre d'extensions <a href="/fr/docs/Web/CSS" title="en/CSS">CSS</a> préfixées par<code> -moz-</code>. La liste suivante contient toutes les extensions Mozilla correspondant aux implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.</p> - -<h3 id="Propriétés">Propriétés</h3> - -<p>...</p> - -<h3 id="Valeurs">Valeurs</h3> - -<p>...</p> - -<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3> - -<p>...</p> - -<h3 id="Règles_At">Règles At</h3> - -<p>...</p> - -<h3 id="Requêtes_de_média">Requêtes de média</h3> - -<p>...</p> - -<h3 id="Autres">Autres</h3> - -<p>...</p> diff --git a/files/fr/web/css/index/index.html b/files/fr/web/css/index/index.html deleted file mode 100644 index aa0bcd3253..0000000000 --- a/files/fr/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Index de la documentation CSS -slug: Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index ---- -<p>{{Index("/fr/docs/Web/CSS")}}</p> diff --git a/files/fr/web/css/héritage/index.html b/files/fr/web/css/inheritance/index.html index c5595da1e4..65f8e21a57 100644 --- a/files/fr/web/css/héritage/index.html +++ b/files/fr/web/css/inheritance/index.html @@ -1,11 +1,12 @@ --- title: Héritage -slug: Web/CSS/Héritage +slug: Web/CSS/inheritance tags: - CSS - Guide - Reference translation_of: Web/CSS/inheritance +original_slug: Web/CSS/Héritage --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/valeur_initiale/index.html b/files/fr/web/css/initial_value/index.html index eedda54344..7e11460792 100644 --- a/files/fr/web/css/valeur_initiale/index.html +++ b/files/fr/web/css/initial_value/index.html @@ -1,10 +1,11 @@ --- title: Valeur initiale -slug: Web/CSS/Valeur_initiale +slug: Web/CSS/initial_value tags: - CSS - Reference translation_of: Web/CSS/initial_value +original_slug: Web/CSS/Valeur_initiale --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html b/files/fr/web/css/inline_formatting_context/index.html index bb40bcce6d..80c8ddf694 100644 --- a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html +++ b/files/fr/web/css/inline_formatting_context/index.html @@ -1,10 +1,11 @@ --- title: Contexte de formatage en ligne (inline/incise) -slug: Web/CSS/Contexte_de_formatage_en_ligne +slug: Web/CSS/Inline_formatting_context tags: - CSS - Guide translation_of: Web/CSS/Inline_formatting_context +original_slug: Web/CSS/Contexte_de_formatage_en_ligne --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/inset-block-end/index.html b/files/fr/web/css/inset-block-end/index.html new file mode 100644 index 0000000000..68db20d737 --- /dev/null +++ b/files/fr/web/css/inset-block-end/index.html @@ -0,0 +1,127 @@ +--- +title: inset-block-end +slug: Web/CSS/inset-block-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-block-end +original_slug: inset-block-end +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>inset-block-end</code></strong> définit la fin du décalage logique en bloc (<em>block</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-block-end</code>. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 a mis à jour le nom de la propriété</a> afin de s'accorder avec les modifications apportées à la spécification.</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ +/* Type <length> */ +inset-block-end: 3px; +inset-block-end: 2.4em; + +/* Valeurs relatives à la largeur */ +/* du bloc englobant */ +/* Type <percentage> */ +inset-block-end: 10%; + +/* Valeurs avec un mot-clé */ +inset-block-end: auto; + +/* Valeurs globales */ +inset-block-end: inherit; +inset-block-end: initial; +inset-block-end: unset; +</pre> + +<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La propriété <code>inset-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="exemple">Texte pour l'exemple</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exemple { + writing-mode: vertical-lr; + position: relative; + inset-block-end: 20px; + background-color: #c8c800; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.inset-block-end")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés physiques correspondantes : + <ul> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("left")}}</li> + </ul> + </li> + <li>Les autres propriétés qui définissent les décalages logiques + <ul> + <li>{{cssxref("inset-block-start")}}</li> + <li>{{cssxref("inset-inline-start")}}</li> + <li>{{cssxref("inset-inline-end")}}</li> + </ul> + </li> + <li>{{cssxref("writing-mode")}}</li> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/fr/web/css/inset-block-start/index.html b/files/fr/web/css/inset-block-start/index.html new file mode 100644 index 0000000000..69734863df --- /dev/null +++ b/files/fr/web/css/inset-block-start/index.html @@ -0,0 +1,125 @@ +--- +title: inset-block-start +slug: Web/CSS/inset-block-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-block-start +original_slug: inset-block-start +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>inset-block-start</code></strong> définit le début du décalage logique en bloc (<em>block</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-block-start</code>. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 a mis à jour son implémentation</a> afin de suivre les modifications apportées à la spécification.</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ +/* Type <length> */ +inset-block-start: 3px; +inset-block-start: 2.4em; + +/* Valeurs relatives à la largeur */ +/* du bloc englobant */ +/* Type <percentage> */ +inset-block-start: 10%; + +/* Valeurs avec un mot-clé */ +inset-block-start: auto; + +/* Valeurs globales */ +inset-block-start: inherit; +inset-block-start: initial; +inset-block-start: unset; +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La propriété <code>inset-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="exemple">Texte pour l'exemple</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exemple { + writing-mode: vertical-lr; + position: relative; + inset-block-start: 20px; + background-color: #c8c800; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.inset-block-start")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés physiques correspondantes : + <ul> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("left")}}</li> + </ul> + </li> + <li>Les propriétés qui définissent les autres décalages logiques + <ul> + <li>{{cssxref("inset-block-end")}}</li> + <li>{{cssxref("offset-inline-end")}}</li> + <li>{{cssxref("offset-inline-start")}}</li> + </ul> + </li> + <li>{{cssxref("writing-mode")}}</li> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/fr/web/css/inset-inline-end/index.html b/files/fr/web/css/inset-inline-end/index.html new file mode 100644 index 0000000000..edc8e15fda --- /dev/null +++ b/files/fr/web/css/inset-inline-end/index.html @@ -0,0 +1,127 @@ +--- +title: inset-inline-end +slug: Web/CSS/inset-inline-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-inline-end +original_slug: inset-inline-end +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>inset-inline-end</code></strong> définit la fin du décalage logique en ligne (<em>inline</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-inline-end</code>. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 a mis à jour son implémentation</a> afin de suivre les modifications apportées à la spécification.</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ +/* Type <length> */ +inset-inline-end: 3px; +inset-inline-end: 2.4em; + +/* Valeurs relatives à la largeur */ +/* du bloc englobant */ +/* Type <percentage> */ +inset-inline-end: 10%; + +/* Valeurs avec un mot-clé */ +inset-inline-end: auto; + +/* Valeurs globales */ +inset-inline-end: inherit; +inset-inline-end: initial; +inset-inline-end: unset; +</pre> + +<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La propriété <code>inset-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="exemple">Texte pour l'exemple</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exemple { + writing-mode: vertical-lr; + position: relative; + inset-inline-end: 20px; + background-color: #c8c800; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.inset-inline-end")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés physiques correspondantes : + <ul> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("left")}}</li> + </ul> + </li> + <li>{{cssxref("writing-mode")}}</li> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("text-orientation")}}</li> + <li>Les propriétés qui définissent les autres décalages : + <ul> + <li>{{cssxref("inset-block-start")}},</li> + <li>{{cssxref("inset-block-end")}},</li> + <li>{{cssxref("inset-inline-start")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/css/inset-inline-start/index.html b/files/fr/web/css/inset-inline-start/index.html new file mode 100644 index 0000000000..8eb72d1bc2 --- /dev/null +++ b/files/fr/web/css/inset-inline-start/index.html @@ -0,0 +1,121 @@ +--- +title: inset-inline-start +slug: Web/CSS/inset-inline-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-inline-start +original_slug: inset-inline-start +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>inset-inline-start</code></strong> définit le début du décalage logique en ligne (<em>inline</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-inline-start</code>. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 a mis à jour son implémentation</a> afin de suivre les modifications apportées à la spécification.</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ +/* Type <length> */ +inset-inline-start: 3px; +inset-inline-start: 2.4em; + +/* Valeurs relatives à la largeur */ +/* du bloc englobant */ +/* Type <percentage> */ +inset-inline-start: 10%; + +/* Valeurs avec un mot-clé */ +inset-inline-start: auto; + +/* Valeurs globales */ +inset-inline-start: inherit; +inset-inline-start: initial; +inset-inline-start: unset; +</pre> + +<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}} qui permettent de définir les autres décalages de l'élément.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La propriété <code>inset-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="exemple">Texte pour l'exemple</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exemple { + writing-mode: vertical-lr; + position: relative; + inset-inline-start: 20px; + background-color: #c8c800; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.inset-inline-start")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés physiques correspondantes : + <ul> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("left")}}</li> + </ul> + </li> + <li>Les autres propriétés qui définissent les autres décalages : {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}}</li> + <li>{{cssxref("writing-mode")}}</li> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html index 8ba8d1ea7e..02610ef623 100644 --- a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html +++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -1,10 +1,11 @@ --- title: Fil d'Ariane (breadcrumb) -slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb +slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation tags: - CSS - Navigation translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/card/index.html index f363a49f0d..c3e847ed1f 100644 --- a/files/fr/web/css/layout_cookbook/carte/index.html +++ b/files/fr/web/css/layout_cookbook/card/index.html @@ -1,12 +1,13 @@ --- title: Carte -slug: Web/CSS/Layout_cookbook/Carte +slug: Web/CSS/Layout_cookbook/Card tags: - CSS - CSS Grid - Guide - Recette translation_of: Web/CSS/Layout_cookbook/Card +original_slug: Web/CSS/Layout_cookbook/Carte --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/center_an_element/index.html index c4d1fb52c3..cc5e8a9c86 100644 --- a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.html @@ -1,6 +1,6 @@ --- title: Centrer un élément -slug: Web/CSS/Layout_cookbook/Centrer_un_element +slug: Web/CSS/Layout_cookbook/Center_an_element tags: - Alignement - CSS @@ -9,6 +9,7 @@ tags: - flexbox - recettes translation_of: Web/CSS/Layout_cookbook/Center_an_element +original_slug: Web/CSS/Layout_cookbook/Centrer_un_element --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/column_layouts/index.html index 140cc9a35a..295c151e84 100644 --- a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.html @@ -1,6 +1,6 @@ --- title: Disposition en colonnes -slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes +slug: Web/CSS/Layout_cookbook/Column_layouts tags: - CSS - Guide @@ -8,6 +8,7 @@ tags: - flexbox - grid translation_of: Web/CSS/Layout_cookbook/Column_layouts +original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html index 7223cde7ef..2fe10e3403 100644 --- a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html @@ -1,10 +1,11 @@ --- title: Cookbook template -slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template +slug: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template tags: - CSS - Meta translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html index b356d20339..03a3396acc 100644 --- a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html @@ -1,12 +1,13 @@ --- title: Contribuer à une recette -slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette +slug: Web/CSS/Layout_cookbook/Contribute_a_recipe tags: - CSS - Guide - MDN - Meta translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe +original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html index 6c3f1d171f..26cd8466a5 100644 --- a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html +++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html @@ -1,11 +1,12 @@ --- title: Liste de groupes avec indicateurs -slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs +slug: Web/CSS/Layout_cookbook/List_group_with_badges tags: - CSS - Guide - Intermédiaire translation_of: Web/CSS/Layout_cookbook/List_group_with_badges +original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html b/files/fr/web/css/layout_cookbook/split_navigation/index.html index 24cc872422..008d99fd71 100644 --- a/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html +++ b/files/fr/web/css/layout_cookbook/split_navigation/index.html @@ -1,11 +1,12 @@ --- title: Navigation segmentée -slug: Web/CSS/Layout_cookbook/Navigation_segmentée +slug: Web/CSS/Layout_cookbook/Split_Navigation tags: - CSS - Navigation - flexbox translation_of: Web/CSS/Layout_cookbook/Split_Navigation +original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html b/files/fr/web/css/layout_cookbook/sticky_footers/index.html index be032d79cd..17529fb959 100644 --- a/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html +++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.html @@ -1,11 +1,12 @@ --- title: Bas de page adhérant -slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant +slug: Web/CSS/Layout_cookbook/Sticky_footers tags: - CSS - Guide - Recette translation_of: Web/CSS/Layout_cookbook/Sticky_footers +original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/mode_de_mise_en_page/index.html b/files/fr/web/css/layout_mode/index.html index 377b162194..34d2b37905 100644 --- a/files/fr/web/css/mode_de_mise_en_page/index.html +++ b/files/fr/web/css/layout_mode/index.html @@ -1,10 +1,11 @@ --- title: Mode de mise en page -slug: Web/CSS/Mode_de_mise_en_page +slug: Web/CSS/Layout_mode tags: - CSS - Reference translation_of: Web/CSS/Layout_mode +original_slug: Web/CSS/Mode_de_mise_en_page --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html b/files/fr/web/css/list_of_proprietary_css_features/index.html index 2c88258187..ecc4f646e7 100644 --- a/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html +++ b/files/fr/web/css/list_of_proprietary_css_features/index.html @@ -1,11 +1,12 @@ --- title: Liste de fonctionnalités CSS propriétaires -slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires +slug: Web/CSS/List_of_Proprietary_CSS_Features tags: - CSS - Draft - NeedsContent translation_of: Web/CSS/List_of_Proprietary_CSS_Features +original_slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires --- <p>{{CSSRef}}{{Draft}}</p> diff --git a/files/fr/web/css/mask/index.html b/files/fr/web/css/mask/index.html index 4a69a1adf8..6f36acacc4 100644 --- a/files/fr/web/css/mask/index.html +++ b/files/fr/web/css/mask/index.html @@ -80,7 +80,7 @@ mask: unset; <h3 id="CSS">CSS</h3> <pre class="brush: css">.exemple{ - mask:url(https://developer.cdn.mozilla.net/static/img/favicon72.png) luminance 20%; + mask:url(https://developer.mozilla.org/static/img/favicon72.png) luminance 20%; } </pre> diff --git a/files/fr/web/css/requêtes_média/index.html b/files/fr/web/css/media_queries/index.html index 58c6cdc73e..38aec3f36c 100644 --- a/files/fr/web/css/requêtes_média/index.html +++ b/files/fr/web/css/media_queries/index.html @@ -1,12 +1,13 @@ --- title: Media queries -slug: Web/CSS/Requêtes_média +slug: Web/CSS/Media_Queries tags: - Aperçu - CSS - CSS Media Queries - Reference translation_of: Web/CSS/Media_Queries +original_slug: Web/CSS/Requêtes_média --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html b/files/fr/web/css/media_queries/testing_media_queries/index.html index 39539a5749..c5e49db81d 100644 --- a/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html +++ b/files/fr/web/css/media_queries/testing_media_queries/index.html @@ -1,12 +1,13 @@ --- title: Tester les requêtes média en JavaScript -slug: Web/CSS/Requêtes_média/Tester_les_media_queries +slug: Web/CSS/Media_Queries/Testing_media_queries tags: - Avancé - CSS - DOM - Guide translation_of: Web/CSS/Media_Queries/Testing_media_queries +original_slug: Web/CSS/Requêtes_média/Tester_les_media_queries --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html index 4dc71551de..ef57afbdfd 100644 --- a/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html +++ b/files/fr/web/css/media_queries/using_media_queries/index.html @@ -1,6 +1,6 @@ --- title: Media queries -slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries +slug: Web/CSS/Media_Queries/Using_media_queries tags: - Avancé - CSS @@ -10,6 +10,7 @@ tags: - Requêtes média - Responsive Design translation_of: Web/CSS/Media_Queries/Using_media_queries +original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html index 3ff2740bd8..1086137f49 100644 --- a/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html +++ b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html @@ -1,11 +1,12 @@ --- title: Utilisation des requêtes média pour l'accessibilité -slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité +slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility tags: - '@media' - Accessibilité - CSS translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +original_slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité --- <div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}</div> diff --git a/files/fr/web/css/extensions_css_microsoft/index.html b/files/fr/web/css/microsoft_extensions/index.html index 017958249c..b9982e6bc0 100644 --- a/files/fr/web/css/extensions_css_microsoft/index.html +++ b/files/fr/web/css/microsoft_extensions/index.html @@ -1,11 +1,12 @@ --- title: Extensions CSS de Microsoft -slug: Web/CSS/Extensions_CSS_Microsoft +slug: Web/CSS/Microsoft_Extensions tags: - CSS - Non-standard - Reference translation_of: Web/CSS/Microsoft_Extensions +original_slug: Web/CSS/Extensions_CSS_Microsoft --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/extensions_mozilla/index.html b/files/fr/web/css/mozilla_extensions/index.html index 3d9acbff04..ee837f565c 100644 --- a/files/fr/web/css/extensions_mozilla/index.html +++ b/files/fr/web/css/mozilla_extensions/index.html @@ -1,12 +1,13 @@ --- title: Extensions CSS de Mozilla -slug: Web/CSS/Extensions_Mozilla +slug: Web/CSS/Mozilla_Extensions tags: - CSS - Mozilla - Non-standard - Reference translation_of: Web/CSS/Mozilla_Extensions +original_slug: Web/CSS/Extensions_Mozilla --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/none/index.html b/files/fr/web/css/none/index.html deleted file mode 100644 index 471bfdc5af..0000000000 --- a/files/fr/web/css/none/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: none -slug: Web/CSS/none -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/float -translation_of_original: Web/CSS/none ---- -<p>{{ CSSRef() }}</p> -<h2 id="Résumé">Résumé</h2> -<p><code>none</code> est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p> -<h2 id="Utilisation">Utilisation</h2> -<div class="warning"> - Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div> -<ul> - <li>{{ Cssxref("animation-name") }}</li> - <li>{{ Cssxref("background-image") }}</li> - <li>{{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}</li> - <li>{{ Cssxref("clear") }}</li> - <li>{{ Cssxref("content") }}</li> - <li>{{ Cssxref("display") }}</li> - <li>{{ Cssxref("float") }}</li> - <li>{{ Cssxref("font-size-adjust") }}</li> - <li>{{ Cssxref("list-style-image") }}</li> - <li>{{ Cssxref("list-style-type") }}</li> - <li>{{ Cssxref("max-height") }}</li> - <li>{{ Cssxref("max-width") }}</li> - <li>{{ Cssxref("outline-style") }}</li> - <li>{{ Cssxref("quotes") }}</li> - <li>{{ Cssxref("resize") }}</li> - <li>{{ Cssxref("text-decoration") }}</li> - <li>{{ Cssxref("text-transform") }}</li> -</ul> -<p><u><strong>Extensions Mozilla :</strong></u></p> -<ul> - <li>{{ Cssxref("-moz-transform") }}</li> - <li>{{ Cssxref("-moz-transition-property") }}</li> - <li>{{ Cssxref("-moz-text-blink") }}</li> - <li>{{ Cssxref("-moz-user-input") }}</li> - <li>{{ Cssxref("-moz-user-select") }}</li> - <li>{{ Cssxref("-moz-window-shadow") }}</li> -</ul> diff --git a/files/fr/web/css/normal/index.html b/files/fr/web/css/normal/index.html deleted file mode 100644 index 5b611f0369..0000000000 --- a/files/fr/web/css/normal/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal ---- -<p>{{ CSSRef() }}</p> -<h2 id="Résumé">Résumé</h2> -<p><code>normal</code> est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p> -<h2 id="Utilisation">Utilisation</h2> -<div class="warning"> - Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div> -<ul> - <li>{{ Cssxref("animation-direction") }}</li> - <li>{{ Cssxref("content") }}</li> - <li>{{ Cssxref("counter-increment") }}</li> - <li>{{ Cssxref("counter-reset") }}</li> - <li>{{ Cssxref("font-style") }}</li> - <li>{{ Cssxref("font-variant") }}</li> - <li>{{ Cssxref("font-weight") }}</li> - <li>{{ Cssxref("letter-spacing") }}</li> - <li>{{ Cssxref("white-space") }}</li> - <li>{{ Cssxref("word-spacing") }}</li> - <li>{{ Cssxref("word-wrap") }}</li> -</ul> -<p><u><strong>Extensions Mozilla :</strong></u></p> -<ul> - <li>{{ Cssxref("-moz-appearance") }}</li> - <li>{{ Cssxref("-moz-box-direction") }}</li> - <li>{{ Cssxref("-moz-column-gap") }}</li> - <li>{{ Cssxref("-moz-column-rule-width") }}</li> -</ul> -<p>{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}</p> diff --git a/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html index e50bb21aa3..01aab32d8c 100644 --- a/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -1,11 +1,12 @@ --- title: 'Guide : ancrage du défilement (scroll anchoring)' -slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement +slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring tags: - CSS - Guide - Intermédiaire translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring +original_slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/média_paginés/index.html b/files/fr/web/css/paged_media/index.html index 9d114b8e9b..a9270029af 100644 --- a/files/fr/web/css/média_paginés/index.html +++ b/files/fr/web/css/paged_media/index.html @@ -1,10 +1,11 @@ --- title: Médias paginés -slug: Web/CSS/Média_paginés +slug: Web/CSS/Paged_Media tags: - CSS - Reference translation_of: Web/CSS/Paged_Media +original_slug: Web/CSS/Média_paginés --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/type_position/index.html b/files/fr/web/css/position_value/index.html index 03ddd68285..d59ccec58e 100644 --- a/files/fr/web/css/type_position/index.html +++ b/files/fr/web/css/position_value/index.html @@ -1,11 +1,12 @@ --- title: <position> -slug: Web/CSS/Type_position +slug: Web/CSS/position_value tags: - CSS - Reference - Type translation_of: Web/CSS/position_value +original_slug: Web/CSS/Type_position --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html index 5f5a3655e8..0a9594e93f 100644 --- a/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html +++ b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html @@ -1,11 +1,12 @@ --- -title: 'Le sélecteur :visited et la vie privée' -slug: 'Web/CSS/:visited_et_la_vie_privée' +title: Le sélecteur :visited et la vie privée +slug: Web/CSS/Privacy_and_the_:visited_selector tags: - CSS - Guide - Sécurité -translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +translation_of: Web/CSS/Privacy_and_the_:visited_selector +original_slug: Web/CSS/:visited_et_la_vie_privée --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/pseudo-éléments/index.html b/files/fr/web/css/pseudo-elements/index.html index 4f9ce9eeb9..eec809e01b 100644 --- a/files/fr/web/css/pseudo-éléments/index.html +++ b/files/fr/web/css/pseudo-elements/index.html @@ -1,12 +1,13 @@ --- title: Pseudo-éléments -slug: Web/CSS/Pseudo-éléments +slug: Web/CSS/Pseudo-elements tags: - CSS - Pseudo-element - Reference - Sélecteur translation_of: Web/CSS/Pseudo-elements +original_slug: Web/CSS/Pseudo-éléments --- <div>{{CSSRef}}</div> @@ -37,7 +38,7 @@ p::first-line { <h2 id="Liste_des_pseudo-éléments">Liste des pseudo-éléments</h2> -<div class="index"> +<div class="index" id="index"> <ul> <li>{{CSSxRef("::after", "::after (:after)")}}</li> <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li> diff --git a/files/fr/web/css/élément_remplacé/index.html b/files/fr/web/css/replaced_element/index.html index eaa2f4d82a..f139b8ea0c 100644 --- a/files/fr/web/css/élément_remplacé/index.html +++ b/files/fr/web/css/replaced_element/index.html @@ -1,10 +1,11 @@ --- title: Élément remplacé -slug: Web/CSS/Élément_remplacé +slug: Web/CSS/Replaced_element tags: - CSS - Reference translation_of: Web/CSS/Replaced_element +original_slug: Web/CSS/Élément_remplacé --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/valeur_résolue/index.html b/files/fr/web/css/resolved_value/index.html index 8ce7a5b45a..54123bb7dc 100644 --- a/files/fr/web/css/valeur_résolue/index.html +++ b/files/fr/web/css/resolved_value/index.html @@ -1,10 +1,11 @@ --- title: Valeur résolue -slug: Web/CSS/valeur_résolue +slug: Web/CSS/resolved_value tags: - CSS - Reference translation_of: Web/CSS/resolved_value +original_slug: Web/CSS/valeur_résolue --- <div>{{cssref}}</div> diff --git a/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html b/files/fr/web/css/scaling_of_svg_backgrounds/index.html index ecd528838c..8e48618b9b 100644 --- a/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html +++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.html @@ -1,11 +1,12 @@ --- title: Redimensionnement d'arrière-plans SVG -slug: Web/CSS/Redimensionnement_arrière-plans_SVG +slug: Web/CSS/Scaling_of_SVG_backgrounds tags: - CSS - Guide - SVG translation_of: Web/CSS/Scaling_of_SVG_backgrounds +original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG --- <p>Les images SVG sont très flexibles et lorsqu'on les utilise en CSS avec les propriétés {{cssxref("background-image")}} et {{cssxref("background-size")}}, il faut s'assurer de considérer les différents aspects qui leurs sont propres. Dans cet article, on décrit comment les images SVG sont redimensionnées grâce à ces propriétés.</p> diff --git a/files/fr/web/css/shape-box/index.html b/files/fr/web/css/shape-box/index.html deleted file mode 100644 index de7ad2607a..0000000000 --- a/files/fr/web/css/shape-box/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: <shape-box> -slug: Web/CSS/shape-box -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/shape-outside -translation_of_original: Web/CSS/shape-box ---- -<div>{{CSSRef}}</div> - -<p>Le type de donnée CSS <strong><code><shape-box></code></strong> permet de définir des formes relatives aux boîtes de l'élément (voir <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a>), notamment pour la propriété {{cssxref("shape-outside")}}.</p> - -<h2 id="Valeurs">Valeurs</h2> - -<dl> - <dt><code>margin-box</code></dt> - <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio <code>border-radius</code> / <code>margin</code> est supérieur ou égal à 1, le rayon du coin de la boîte sera <code>border-radius</code> + <code>margin</code>. Si le ratio <code>border-radius / margin</code> est inférieur à 1, le rayon du coin de la boîte sera <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd> - <dt><code>border-box</code></dt> - <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd> - <dt><code>padding-box</code></dt> - <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (<em>padding</em>). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd> - <dt><code>content-box</code></dt> - <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre <code>0</code> et <code>border-radius</code> - <code>border-width</code> - <code>padding</code>.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.main { - width: 500px; - height: 200px; -} - -.left { - -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); - float: left; - width: 40%; - height: 12ex; - background-color: lightgray; - -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); -} - -.right { - -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); - float: right; - width: 40%; - height: 12ex; - background-color: lightgray; - -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); -} - -p { - text-align: center; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="main"> - <div class="left"></div> - <div class="right"></div> - <p> - Sometimes a web page's text content appears to be - funneling your attention towards a spot on the page - to drive you to follow a particular link. Sometimes - you don't notice. - </p> -</div></pre> - -<h3 id="Résultat">Résultat</h3> - -<h3 id="EmbedLiveSample('Exemples'100100)">{{EmbedLiveSample('Exemples',"100%","100%")}}</h3> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{compatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{compatVersionUnknown}}</td> - </tr> - <tr> - <td>\xx</td> - <td>{{compatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{compatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Chrome pour Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{compatVersionUnknown}}</td> - <td>{{compatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{compatVersionUnknown}}</td> - </tr> - <tr> - <td>\xx</td> - <td>{{compatVersionUnknown}}</td> - <td>{{compatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{compatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("shape-outside")}}</li> - <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li> -</ul> diff --git a/files/fr/web/css/propriétés_raccourcies/index.html b/files/fr/web/css/shorthand_properties/index.html index 6c390b9dc8..9bfeea32ff 100644 --- a/files/fr/web/css/propriétés_raccourcies/index.html +++ b/files/fr/web/css/shorthand_properties/index.html @@ -1,11 +1,12 @@ --- title: Propriétés raccourcies -slug: Web/CSS/Propriétés_raccourcies +slug: Web/CSS/Shorthand_properties tags: - CSS - Guide - Reference translation_of: Web/CSS/Shorthand_properties +original_slug: Web/CSS/Propriétés_raccourcies --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/valeur_spécifiée/index.html b/files/fr/web/css/specified_value/index.html index 14eb3d9e5a..6bf0f900be 100644 --- a/files/fr/web/css/valeur_spécifiée/index.html +++ b/files/fr/web/css/specified_value/index.html @@ -1,11 +1,12 @@ --- title: Valeur spécifiée -slug: Web/CSS/Valeur_spécifiée +slug: Web/CSS/specified_value tags: - CSS - Cascade - Reference translation_of: Web/CSS/specified_value +original_slug: Web/CSS/Valeur_spécifiée --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html b/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html deleted file mode 100644 index 2a35cb5611..0000000000 --- a/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Comparison entre les sélecteurs CSS et XPath -slug: Web/CSS/Sélecteurs_CSS/Comparison_with_XPath -tags: - - CSS - - Draft - - NeedsContent - - Reference - - XPath -translation_of: Web/XPath/Comparison_with_CSS_selectors ---- -<div>{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/fr/docs/Web/XPath")}}{{Draft}}</div> - -<p class="summary">Dans cet article, nous listerons les différences entre les sélecteurs CSS et les fonctionnalités XPath afin que les développeurs web puissent choisir l'outil le plus pertinent.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col"><a href="/fr/docs/Web/XPath">Fonctionnalité XPath</a></th> - <th scope="col"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS">Équivalent CSS</a></th> - </tr> - </thead> - <tbody> - <tr> - <td>Axe <a href="/fr/docs/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="/fr/docs/XPath/Axes/parent"><code>parent</code></a> ou <a href="/fr/docs/XPath/Axes/preceding-sibling"><code>preceding-sibling</code></a></td> - <td>{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}</td> - </tr> - <tr> - <td>Axe <a href="/fr/docs/XPath/Axes/attribute"><code>attribute</code></a></td> - <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Sélecteurs d'attribut</a></td> - </tr> - <tr> - <td>Axe <a href="/fr/docs/XPath/Axes/child"><code>child</code></a></td> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteurs d'enfant</a></td> - </tr> - <tr> - <td>Axe <a href="/fr/docs/XPath/Axes/descendant"><code>descendant</code></a></td> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteur de descendant</a></td> - </tr> - <tr> - <td>Axe <a href="/fr/docs/XPath/Axes/following-sibling"><code>following-sibling</code></a></td> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteur de voisin général</a> ou <a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">sélecteur de voisin direct</a></td> - </tr> - <tr> - <td>Axe <a href="/fr/docs/XPath/Axes/self"><code>self</code></a></td> - <td>Sélecteur {{CSSxRef(":scope")}} ou {{CSSxRef(":host")}}</td> - </tr> - </tbody> -</table> diff --git a/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html b/files/fr/web/css/tools/cubic_bezier_generator/index.html index 6a4671d141..d5831e071b 100644 --- a/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html +++ b/files/fr/web/css/tools/cubic_bezier_generator/index.html @@ -1,10 +1,11 @@ --- title: Générateur de courbe de Bézier -slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier +slug: Web/CSS/Tools/Cubic_Bezier_Generator tags: - CSS - Outils translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +original_slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier --- <p>{{Draft}}</p> diff --git a/files/fr/web/css/outils/index.html b/files/fr/web/css/tools/index.html index ac78261ad4..ac24b6e9ee 100644 --- a/files/fr/web/css/outils/index.html +++ b/files/fr/web/css/tools/index.html @@ -1,10 +1,11 @@ --- title: Outils -slug: Web/CSS/Outils +slug: Web/CSS/Tools tags: - CSS - Outils translation_of: Web/CSS/Tools +original_slug: Web/CSS/Outils --- <p>CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.</p> diff --git a/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html b/files/fr/web/css/tools/linear-gradient_generator/index.html index ae2340fd73..4a3dc87e32 100644 --- a/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html +++ b/files/fr/web/css/tools/linear-gradient_generator/index.html @@ -1,10 +1,11 @@ --- title: Générateur de dégradés linéaires -slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires +slug: Web/CSS/Tools/Linear-gradient_Generator tags: - CSS - Outils translation_of: Web/CSS/Tools/Linear-gradient_Generator +original_slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires --- <p>{{Draft}}</p> diff --git a/files/fr/web/css/transition-delay/index.html b/files/fr/web/css/transition-delay/index.html index 8d3991d0a2..7f1053f8c2 100644 --- a/files/fr/web/css/transition-delay/index.html +++ b/files/fr/web/css/transition-delay/index.html @@ -56,7 +56,7 @@ transition-delay: unset; <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -123,7 +123,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -190,7 +190,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -257,7 +257,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/fr/web/css/transition-duration/index.html b/files/fr/web/css/transition-duration/index.html index 7d97c7ae48..a859c23f3f 100644 --- a/files/fr/web/css/transition-duration/index.html +++ b/files/fr/web/css/transition-duration/index.html @@ -50,7 +50,7 @@ transition-duration: unset; <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -115,7 +115,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -180,7 +180,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -245,7 +245,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/fr/web/css/sélecteurs_de_type/index.html b/files/fr/web/css/type_selectors/index.html index adf931d9fe..9766cccaf9 100644 --- a/files/fr/web/css/sélecteurs_de_type/index.html +++ b/files/fr/web/css/type_selectors/index.html @@ -1,11 +1,12 @@ --- title: Sélecteurs de type -slug: Web/CSS/Sélecteurs_de_type +slug: Web/CSS/Type_selectors tags: - CSS - Reference - Sélecteur translation_of: Web/CSS/Type_selectors +original_slug: Web/CSS/Sélecteurs_de_type --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/fr/web/css/sélecteurs_universels/index.html b/files/fr/web/css/universal_selectors/index.html index 470d27160c..2851b47ec8 100644 --- a/files/fr/web/css/sélecteurs_universels/index.html +++ b/files/fr/web/css/universal_selectors/index.html @@ -1,11 +1,12 @@ --- title: Sélecteurs universels -slug: Web/CSS/Sélecteurs_universels +slug: Web/CSS/Universal_selectors tags: - CSS - Reference - Sélecteur translation_of: Web/CSS/Universal_selectors +original_slug: Web/CSS/Sélecteurs_universels --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/fr/web/css/url/index.html b/files/fr/web/css/url/index.html deleted file mode 100644 index d68db30cfe..0000000000 --- a/files/fr/web/css/url/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: <url> -slug: Web/CSS/url -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -<div>{{CSSRef}}</div> - -<p>Le type de donnée CSS <strong><code><url></code></strong> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle <code>url()</code>. Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.</p> - -<div class="note"><strong>Note : URI ou URL ?</strong><br> -<br> -Une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> est différente d'une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Name">URN</a> d'une ressource.<br> -<br> -Pour la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <code><url></code> bien qu'il n'était pas défini explicitement).<br> -<br> -Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car <code>url()</code> était utilisée pour créer une valeur de type <code><uri></code>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.<br> -<br> -Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle <code>url()</code> représente donc une valeur de type <code><url></code> et plus une valeur de type <code><uri></code>.<br> -<br> -Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<p>L'URL peut être indiquée telle quelle comme argument de la fonction <code>url()</code>et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).</p> - -<pre class="syntaxbox"> <propriété_css>: url("http://monsite.exemple.com/curseur.png") - <propriété_css>: url("http://monsite.exemple.com/curseur.png") - <propriété_css>: url(http://monsite.exemple.com/curseur.png) -</pre> - -<div class="note"> -<p><strong>Note :</strong> Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir {{bug(752230)}} pour plus d'informations.</p> -</div> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">ul { - list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><ul> - <li>Élément 1</li> - <li>Élément 2</li> -</ul> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemples')}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>Aucune modification significative.</td> - </tr> - <tr> - <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Aucune modification significative.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#url', '<url>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.types.url")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("url()", "url()")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/valeur_utilisée/index.html b/files/fr/web/css/used_value/index.html index df94445fd7..87c8cb6590 100644 --- a/files/fr/web/css/valeur_utilisée/index.html +++ b/files/fr/web/css/used_value/index.html @@ -1,12 +1,13 @@ --- title: Valeur utilisée -slug: Web/CSS/Valeur_utilisée +slug: Web/CSS/used_value tags: - CSS - Guide - Reference - Web translation_of: Web/CSS/used_value +original_slug: Web/CSS/Valeur_utilisée --- <div>{{cssref}}</div> diff --git a/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html b/files/fr/web/css/value_definition_syntax/index.html index 2acb4d1da7..30586cd5d9 100644 --- a/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html +++ b/files/fr/web/css/value_definition_syntax/index.html @@ -1,11 +1,12 @@ --- title: Syntaxe de définition des valeurs -slug: Web/CSS/Syntaxe_de_définition_des_valeurs +slug: Web/CSS/Value_definition_syntax tags: - CSS - Débutant - Reference translation_of: Web/CSS/Value_definition_syntax +original_slug: Web/CSS/Syntaxe_de_définition_des_valeurs --- <div>{{CSSRef}}</div> diff --git a/files/fr/web/css/concepts_viewport/index.html b/files/fr/web/css/viewport_concepts/index.html index 56143515c0..51937f9f12 100644 --- a/files/fr/web/css/concepts_viewport/index.html +++ b/files/fr/web/css/viewport_concepts/index.html @@ -1,11 +1,12 @@ --- title: Concepts relatifs au viewport -slug: Web/CSS/Concepts_viewport +slug: Web/CSS/Viewport_concepts tags: - CSS - Guide - viewport translation_of: Web/CSS/Viewport_concepts +original_slug: Web/CSS/Concepts_viewport --- <p>{{CSSRef}}</p> diff --git a/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html b/files/fr/web/css/visual_formatting_model/index.html index d9ac8b3f09..69a641a3f7 100644 --- a/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html +++ b/files/fr/web/css/visual_formatting_model/index.html @@ -1,11 +1,12 @@ --- title: Modèle de mise en forme visuelle -slug: Web/CSS/Modèle_de_mise_en_forme_visuelle +slug: Web/CSS/Visual_formatting_model tags: - CSS - Intermédiaire - NeedsUpdate translation_of: Web/CSS/Visual_formatting_model +original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle --- <div>{{CSSRef}}</div> |