From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- files/fr/web/css/-moz-box-ordinal-group/index.html | 74 - files/fr/web/css/-moz-cell/index.html | 16 - files/fr/web/css/-ms-high-contrast/index.html | 71 - files/fr/web/css/-ms-scroll-snap-type/index.html | 51 - files/fr/web/css/-ms-user-select/index.html | 108 - files/fr/web/css/-webkit-mask-image/index.html | 175 -- .../fr/web/css/@media/-ms-high-contrast/index.html | 71 + files/fr/web/css/@media/index/index.html | 12 - files/fr/web/css/@viewport/height/index.html | 77 - files/fr/web/css/@viewport/max-height/index.html | 77 - files/fr/web/css/@viewport/max-width/index.html | 76 - files/fr/web/css/@viewport/max-zoom/index.html | 70 - files/fr/web/css/@viewport/min-height/index.html | 77 - files/fr/web/css/@viewport/min-width/index.html | 76 - files/fr/web/css/@viewport/min-zoom/index.html | 70 - files/fr/web/css/@viewport/orientation/index.html | 65 - files/fr/web/css/@viewport/user-zoom/index.html | 69 - files/fr/web/css/@viewport/viewport-fit/index.html | 75 - files/fr/web/css/@viewport/width/index.html | 76 - files/fr/web/css/@viewport/zoom/index.html | 72 - .../fr/web/css/_colon_-moz-list-bullet/index.html | 55 + .../fr/web/css/_colon_-moz-list-number/index.html | 52 + files/fr/web/css/_colon_-moz-ui-invalid/index.html | 50 - .../css/_colon_-ms-input-placeholder/index.html | 117 - .../fr/web/css/_colon_-webkit-autofill/index.html | 33 - files/fr/web/css/_colon_any/index.html | 175 -- files/fr/web/css/_colon_autofill/index.html | 33 + files/fr/web/css/_colon_user-invalid/index.html | 50 + .../index.html" | 73 - .../css/_doublecolon_-moz-list-bullet/index.html | 55 - .../css/_doublecolon_-moz-list-number/index.html | 52 - .../index.html | 54 - .../index.html | 97 - .../_doublecolon_file-selector-button/index.html | 54 + .../web/css/a_propos_du_bloc_conteneur/index.html | 263 -- files/fr/web/css/actual_value/index.html | 52 + .../web/css/adjacent_sibling_combinator/index.html | 86 + .../fr/web/css/alternative_style_sheets/index.html | 77 + .../fr/web/css/animations_css/conseils/index.html | 165 - .../index.html" | 99 - files/fr/web/css/animations_css/index.html | 81 - .../utiliser_les_animations_css/index.html | 363 --- .../index.html" | 2626 ---------------- .../index.html" | 1600 ---------- .../index.html" | 162 - files/fr/web/css/at-rule/index.html | 82 + files/fr/web/css/attribute_selectors/index.html | 243 ++ files/fr/web/css/auto/index.html | 29 - .../fr/web/css/block_formatting_context/index.html | 44 - files/fr/web/css/child_combinator/index.html | 94 + files/fr/web/css/class_selectors/index.html | 101 + files/fr/web/css/color_value/index.html | 1379 +++++++++ files/fr/web/css/column_combinator/index.html | 97 + files/fr/web/css/combinateur_colonne/index.html | 97 - .../css/combinateur_de_voisin_direct/index.html | 86 - files/fr/web/css/compartimentation_css/index.html | 123 - .../comprendre_z-index/ajout_de_z-index/index.html | 149 - .../empilement_de_couches/index.html | 213 -- .../empilement_et_float/index.html | 135 - .../empilement_sans_z-index/index.html | 122 - .../css/comprendre_z-index/exemple_1/index.html | 117 - .../css/comprendre_z-index/exemple_2/index.html | 128 - .../css/comprendre_z-index/exemple_3/index.html | 160 - files/fr/web/css/comprendre_z-index/index.html | 36 - files/fr/web/css/computed_value/index.html | 67 + files/fr/web/css/concepts_viewport/index.html | 156 - files/fr/web/css/containing_block/index.html | 263 ++ .../css/contexte_de_formatage_en_ligne/index.html | 63 - files/fr/web/css/couleurs_css/index.html | 133 - .../s\303\251lecteur_de_couleurs/index.html" | 3235 -------------------- .../fr/web/css/css_animated_properties/index.html | 17 + .../detecting_css_animation_support/index.html | 99 + files/fr/web/css/css_animations/index.html | 81 + files/fr/web/css/css_animations/tips/index.html | 165 + .../css_animations/using_css_animations/index.html | 363 +++ .../border-image_generator/index.html | 2626 ++++++++++++++++ .../border-radius_generator/index.html | 1600 ++++++++++ .../box-shadow_generator/index.html | 2887 +++++++++++++++++ .../resizing_background_images/index.html | 117 + .../scaling_background_images/index.html | 117 - .../using_multiple_backgrounds/index.html | 55 + .../index.html" | 55 - .../index.html | 104 + .../index.html" | 104 - .../index.html" | 77 - .../index.html" | 51 - .../index.html" | 119 - .../index.html" | 119 - .../index.html | 77 + .../box_alignment_in_flexbox/index.html | 119 + .../box_alignment_in_grid_layout/index.html | 119 + .../index.html | 51 + files/fr/web/css/css_box_model/index.html | 115 + .../mastering_margin_collapsing/index.html | 92 + files/fr/web/css/css_charsets/index.html | 50 + .../css/css_colors/color_picker_tool/index.html | 3235 ++++++++++++++++++++ .../basic_concepts_of_multicol/index.html | 92 + .../concepts_base_multi-colonnes/index.html | 92 - .../index.html" | 49 - .../index.html" | 72 - .../handling_content_breaks_in_multicol/index.html | 72 + .../handling_overflow_in_multicol/index.html | 49 + .../mettre_en_forme_les_colonnes/index.html | 48 - .../r\303\251partir_entre_les_colonnes/index.html" | 63 - .../css/css_columns/spanning_columns/index.html | 63 + .../web/css/css_columns/styling_columns/index.html | 48 + .../using_multi-column_layouts/index.html | 201 ++ .../index.html | 201 -- .../using_feature_queries/index.html | 112 + .../index.html" | 112 - files/fr/web/css/css_containment/index.html | 123 + .../index.html" | 218 -- .../aligning_items_in_a_flex_container/index.html | 218 ++ .../backwards_compatibility_of_flexbox/index.html | 369 +++ .../basic_concepts_of_flexbox/index.html | 235 ++ .../index.html" | 188 -- .../cas_utilisation_flexbox/index.html | 140 - .../concepts_de_base_flexbox/index.html | 235 -- .../index.html | 200 ++ .../index.html" | 200 -- .../index.html | 125 - .../mastering_wrapping_of_flex_items/index.html | 101 + .../index.html" | 101 - .../css/css_flexible_box_layout/mixins/index.html | 369 --- .../ordering_flex_items/index.html | 139 + .../index.html" | 139 - .../index.html | 125 + .../index.html" | 121 - .../typical_use_cases_of_flexbox/index.html | 140 + .../index.html | 128 + .../dans_le_flux_ou_en_dehors/index.html | 68 - .../index.html | 128 - .../index.html" | 70 - .../index.html" | 90 - .../explications_contextes_formatage/index.html | 89 - .../flow_layout_and_overflow/index.html | 70 + .../flow_layout_and_writing_modes/index.html | 90 + .../in_flow_and_out_of_flow/index.html | 68 + .../intro_to_formatting_contexts/index.html | 89 + .../index.html" | 229 -- .../css_fonts/guide_polices_variables/index.html | 265 -- .../css/css_fonts/opentype_fonts_guide/index.html | 229 ++ .../css/css_fonts/variable_fonts_guide/index.html | 265 ++ .../index.html" | 661 ---- .../auto-placement_in_css_grid_layout/index.html | 569 ++++ .../basic_concepts_of_grid_layout/index.html | 625 ++++ .../box_alignment_in_css_grid_layout/index.html | 661 ++++ .../index.html | 560 ---- .../index.html | 420 +++ .../css_grid_layout_and_accessibility/index.html | 124 + .../index.html | 452 +++ .../index.html" | 482 --- .../css_grid_layout/grid_template_areas/index.html | 482 +++ .../layout_using_named_grid_lines/index.html | 431 +++ .../les_concepts_de_base/index.html | 625 ---- .../index.html" | 124 - .../index.html" | 420 --- .../index.html" | 452 --- .../line-based_placement_with_css_grid/index.html | 605 ++++ .../index.html" | 588 ---- .../index.html | 569 ---- .../index.html" | 605 ---- .../index.html | 560 ++++ .../relationship_of_grid_layout/index.html | 588 ++++ .../index.html" | 431 --- .../implementing_image_sprites_in_css/index.html | 51 + files/fr/web/css/css_images/sprites_css/index.html | 51 - .../css/css_images/using_css_gradients/index.html | 747 +++++ .../fr/web/css/css_lists/compteurs_css/index.html | 148 - .../index.html" | 105 - files/fr/web/css/css_lists/index.html | 57 - .../consistent_list_indentation/index.html | 105 + files/fr/web/css/css_lists_and_counters/index.html | 57 + .../using_css_counters/index.html | 148 + .../basic_concepts/index.html | 75 + .../concepts_de_base/index.html | 75 - .../dimensionnement/index.html | 89 - .../floating_and_positioning/index.html | 143 + .../margins_borders_padding/index.html | 297 ++ .../index.html" | 143 - .../index.html" | 297 -- .../css/css_logical_properties/sizing/index.html | 89 + files/fr/web/css/css_masking/index.html | 66 + files/fr/web/css/css_masks/index.html | 66 - files/fr/web/css/css_motion_path/index.html | 54 + .../adding_z-index/index.html | 149 + .../understanding_z_index/index.html | 36 + .../stacking_and_float/index.html | 135 + .../stacking_context_example_1/index.html | 117 + .../stacking_context_example_2/index.html | 128 + .../stacking_context_example_3/index.html | 160 + .../stacking_without_z-index/index.html | 122 + .../the_stacking_context/index.html | 213 ++ .../fr/web/css/css_questions_frequentes/index.html | 246 -- .../css/css_scroll_snap/basic_concepts/index.html | 70 + .../css/css_scroll_snap/browser_compat/index.html | 46 + .../compatibilit\303\251_navigateurs/index.html" | 46 - .../css_scroll_snap/concepts_de_base/index.html | 70 - files/fr/web/css/css_selectors/index.html | 114 + .../index.html | 63 + .../aper\303\247u_formes_css/index.html" | 125 - .../fr/web/css/css_shapes/basic_shapes/index.html | 149 + .../cr\303\251er_formes_bo\303\256tes/index.html" | 75 - .../web/css/css_shapes/formes_simples/index.html | 149 - .../web/css/css_shapes/from_box_values/index.html | 75 + .../index.html" | 64 - .../css_shapes/overview_of_css_shapes/index.html | 125 + .../css/css_shapes/shapes_from_images/index.html | 64 + .../css_transforms/using_css_transforms/index.html | 83 + .../utilisation_des_transformations_css/index.html | 83 - .../using_css_transitions/index.html | 1094 +++++++ .../utiliser_transitions_css/index.html | 1094 ------- files/fr/web/css/css_types/index.html | 102 + files/fr/web/css/css_values_and_units/index.html | 494 +++ .../css/cssom_view/coordinate_systems/index.html | 183 ++ .../index.html" | 183 -- files/fr/web/css/descendant_combinator/index.html | 109 + files/fr/web/css/easing-function/index.html | 275 ++ .../fr/web/css/extensions_css_microsoft/index.html | 118 - files/fr/web/css/extensions_mozilla/index.html | 678 ---- .../css/feuilles_de_style_alternatives/index.html | 77 - files/fr/web/css/filter-function/url/index.html | 34 - files/fr/web/css/filters_effects/index.html | 115 - .../web/css/general_sibling_combinator/index.html | 81 + files/fr/web/css/grid-column-gap/index.html | 128 - "files/fr/web/css/h\303\251ritage/index.html" | 76 - files/fr/web/css/id_selectors/index.html | 87 + .../index.html" | 47 - files/fr/web/css/index/index.html | 10 - files/fr/web/css/inheritance/index.html | 76 + files/fr/web/css/initial_value/index.html | 53 + .../web/css/inline_formatting_context/index.html | 63 + files/fr/web/css/inset-block-end/index.html | 126 + files/fr/web/css/inset-block-start/index.html | 124 + files/fr/web/css/inset-inline-end/index.html | 126 + files/fr/web/css/inset-inline-start/index.html | 120 + .../css/jeux_de_caract\303\250res_css/index.html" | 50 - .../bas_de_page_adh\303\251rant/index.html" | 73 - .../breadcrumb_navigation/index.html | 49 + files/fr/web/css/layout_cookbook/card/index.html | 81 + files/fr/web/css/layout_cookbook/carte/index.html | 81 - .../layout_cookbook/center_an_element/index.html | 59 + .../layout_cookbook/centrer_un_element/index.html | 59 - .../css/layout_cookbook/column_layouts/index.html | 129 + .../cookbook_template/index.html" | 62 - .../contribuer_\303\240_une_recette/index.html" | 104 - .../cookbook_template/index.html | 62 + .../layout_cookbook/contribute_a_recipe/index.html | 104 + .../disposition_en_colonnes/index.html | 129 - .../list_group_with_badges/index.html | 53 + .../liste_groupes_avec_indicateurs/index.html | 53 - .../navigation_breadcrumb/index.html | 49 - .../navigation_segment\303\251e/index.html" | 48 - .../layout_cookbook/split_navigation/index.html | 48 + .../css/layout_cookbook/sticky_footers/index.html | 73 + files/fr/web/css/layout_mode/index.html | 25 + .../list_of_proprietary_css_features/index.html | 173 ++ .../index.html" | 173 -- .../index.html" | 17 - files/fr/web/css/media_queries/index.html | 86 + .../media_queries/testing_media_queries/index.html | 79 + .../media_queries/using_media_queries/index.html | 384 +++ .../index.html | 96 + files/fr/web/css/microsoft_extensions/index.html | 118 + files/fr/web/css/mode_de_mise_en_page/index.html | 25 - .../fusion_des_marges/index.html" | 92 - .../index.html" | 2887 ----------------- .../mod\303\250le_de_bo\303\256te_css/index.html" | 115 - .../index.html" | 179 -- files/fr/web/css/motion_path/index.html | 54 - files/fr/web/css/mozilla_extensions/index.html | 678 ++++ .../css/m\303\251dia_pagin\303\251s/index.html" | 20 - files/fr/web/css/none/index.html | 43 - files/fr/web/css/normal/index.html | 36 - .../index.html" | 13 - .../index.html" | 13 - files/fr/web/css/outils/index.html | 20 - .../guide_ancrage_d\303\251filement/index.html" | 79 - .../guide_to_scroll_anchoring/index.html | 79 + files/fr/web/css/paged_media/index.html | 20 + files/fr/web/css/position_value/index.html | 129 + .../index.html | 73 + .../index.html" | 155 - files/fr/web/css/pseudo-elements/index.html | 132 + .../css/pseudo-\303\251l\303\251ments/index.html" | 132 - .../index.html" | 331 -- files/fr/web/css/replaced_element/index.html | 62 + .../css/requ\303\252tes_m\303\251dia/index.html" | 86 - .../tester_les_media_queries/index.html" | 79 - .../index.html" | 96 - .../utiliser_les_media_queries/index.html" | 384 --- files/fr/web/css/resolved_value/index.html | 40 + "files/fr/web/css/r\303\250gles_@/index.html" | 82 - .../web/css/scaling_of_svg_backgrounds/index.html | 331 ++ files/fr/web/css/shape-box/index.html | 169 - files/fr/web/css/shorthand_properties/index.html | 155 + files/fr/web/css/specified_value/index.html | 85 + .../index.html" | 421 --- .../comparison_with_xpath/index.html" | 49 - .../fr/web/css/s\303\251lecteurs_css/index.html" | 114 - .../index.html" | 63 - .../css/s\303\251lecteurs_d_attribut/index.html" | 243 -- .../fr/web/css/s\303\251lecteurs_d_id/index.html" | 87 - .../css/s\303\251lecteurs_de_classe/index.html" | 101 - .../web/css/s\303\251lecteurs_de_type/index.html" | 82 - .../index.html" | 81 - .../css/s\303\251lecteurs_descendant/index.html" | 109 - .../web/css/s\303\251lecteurs_enfant/index.html" | 94 - .../css/s\303\251lecteurs_universels/index.html" | 103 - files/fr/web/css/timing-function/index.html | 275 -- .../css/tools/cubic_bezier_generator/index.html | 13 + files/fr/web/css/tools/index.html | 20 + .../css/tools/linear-gradient_generator/index.html | 13 + files/fr/web/css/type_color/index.html | 1379 --------- files/fr/web/css/type_position/index.html | 129 - files/fr/web/css/type_selectors/index.html | 82 + files/fr/web/css/types_css/index.html | 102 - files/fr/web/css/universal_selectors/index.html | 103 + files/fr/web/css/url/index.html | 109 - files/fr/web/css/used_value/index.html | 144 + .../index.html" | 747 ----- .../fr/web/css/valeur_calcul\303\251e/index.html" | 67 - files/fr/web/css/valeur_initiale/index.html | 53 - files/fr/web/css/valeur_reelle/index.html | 52 - .../fr/web/css/valeur_r\303\251solue/index.html" | 40 - .../css/valeur_sp\303\251cifi\303\251e/index.html" | 85 - .../fr/web/css/valeur_utilis\303\251e/index.html" | 144 - .../css/valeurs_et_unit\303\251s_css/index.html" | 494 --- .../fr/web/css/value_definition_syntax/index.html | 421 +++ files/fr/web/css/viewport_concepts/index.html | 156 + .../fr/web/css/visual_formatting_model/index.html | 179 ++ .../index.html" | 62 - 332 files changed, 34899 insertions(+), 37771 deletions(-) delete mode 100644 files/fr/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/fr/web/css/-moz-cell/index.html delete mode 100644 files/fr/web/css/-ms-high-contrast/index.html delete mode 100644 files/fr/web/css/-ms-scroll-snap-type/index.html delete mode 100644 files/fr/web/css/-ms-user-select/index.html delete mode 100644 files/fr/web/css/-webkit-mask-image/index.html create mode 100644 files/fr/web/css/@media/-ms-high-contrast/index.html delete mode 100644 files/fr/web/css/@media/index/index.html delete mode 100644 files/fr/web/css/@viewport/height/index.html delete mode 100644 files/fr/web/css/@viewport/max-height/index.html delete mode 100644 files/fr/web/css/@viewport/max-width/index.html delete mode 100644 files/fr/web/css/@viewport/max-zoom/index.html delete mode 100644 files/fr/web/css/@viewport/min-height/index.html delete mode 100644 files/fr/web/css/@viewport/min-width/index.html delete mode 100644 files/fr/web/css/@viewport/min-zoom/index.html delete mode 100644 files/fr/web/css/@viewport/orientation/index.html delete mode 100644 files/fr/web/css/@viewport/user-zoom/index.html delete mode 100644 files/fr/web/css/@viewport/viewport-fit/index.html delete mode 100644 files/fr/web/css/@viewport/width/index.html delete mode 100644 files/fr/web/css/@viewport/zoom/index.html create mode 100644 files/fr/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/fr/web/css/_colon_-moz-list-number/index.html delete mode 100644 files/fr/web/css/_colon_-moz-ui-invalid/index.html delete mode 100644 files/fr/web/css/_colon_-ms-input-placeholder/index.html delete mode 100644 files/fr/web/css/_colon_-webkit-autofill/index.html delete mode 100644 files/fr/web/css/_colon_any/index.html create mode 100644 files/fr/web/css/_colon_autofill/index.html create mode 100644 files/fr/web/css/_colon_user-invalid/index.html delete mode 100644 "files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" delete mode 100644 files/fr/web/css/_doublecolon_-moz-list-bullet/index.html delete mode 100644 files/fr/web/css/_doublecolon_-moz-list-number/index.html delete mode 100644 files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html delete mode 100644 files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html create mode 100644 files/fr/web/css/_doublecolon_file-selector-button/index.html delete mode 100644 files/fr/web/css/a_propos_du_bloc_conteneur/index.html create mode 100644 files/fr/web/css/actual_value/index.html create mode 100644 files/fr/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/fr/web/css/alternative_style_sheets/index.html delete mode 100644 files/fr/web/css/animations_css/conseils/index.html delete mode 100644 "files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" delete mode 100644 files/fr/web/css/animations_css/index.html delete mode 100644 files/fr/web/css/animations_css/utiliser_les_animations_css/index.html delete mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" delete mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" delete mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" create mode 100644 files/fr/web/css/at-rule/index.html create mode 100644 files/fr/web/css/attribute_selectors/index.html delete mode 100644 files/fr/web/css/auto/index.html delete mode 100644 files/fr/web/css/block_formatting_context/index.html create mode 100644 files/fr/web/css/child_combinator/index.html create mode 100644 files/fr/web/css/class_selectors/index.html create mode 100644 files/fr/web/css/color_value/index.html create mode 100644 files/fr/web/css/column_combinator/index.html delete mode 100644 files/fr/web/css/combinateur_colonne/index.html delete mode 100644 files/fr/web/css/combinateur_de_voisin_direct/index.html delete mode 100644 files/fr/web/css/compartimentation_css/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/empilement_et_float/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/exemple_1/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/exemple_2/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/exemple_3/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/index.html create mode 100644 files/fr/web/css/computed_value/index.html delete mode 100644 files/fr/web/css/concepts_viewport/index.html create mode 100644 files/fr/web/css/containing_block/index.html delete mode 100644 files/fr/web/css/contexte_de_formatage_en_ligne/index.html delete mode 100644 files/fr/web/css/couleurs_css/index.html delete mode 100644 "files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" create mode 100644 files/fr/web/css/css_animated_properties/index.html create mode 100644 files/fr/web/css/css_animations/detecting_css_animation_support/index.html create mode 100644 files/fr/web/css/css_animations/index.html create mode 100644 files/fr/web/css/css_animations/tips/index.html create mode 100644 files/fr/web/css/css_animations/using_css_animations/index.html create mode 100644 files/fr/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/fr/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html delete mode 100644 "files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" create mode 100644 files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html delete mode 100644 "files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html create mode 100644 files/fr/web/css/css_box_model/index.html create mode 100644 files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/fr/web/css/css_charsets/index.html create mode 100644 files/fr/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html delete mode 100644 files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html delete mode 100644 "files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" delete mode 100644 "files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" create mode 100644 files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html create mode 100644 files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html delete mode 100644 files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html delete mode 100644 "files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" create mode 100644 files/fr/web/css/css_columns/spanning_columns/index.html create mode 100644 files/fr/web/css/css_columns/styling_columns/index.html create mode 100644 files/fr/web/css/css_columns/using_multi-column_layouts/index.html delete mode 100644 files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html create mode 100644 files/fr/web/css/css_conditional_rules/using_feature_queries/index.html delete mode 100644 "files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" create mode 100644 files/fr/web/css/css_containment/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html delete mode 100644 files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/mixins/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html delete mode 100644 files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html delete mode 100644 files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html delete mode 100644 "files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" delete mode 100644 "files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" delete mode 100644 files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html create mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html create mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html create mode 100644 files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html create mode 100644 files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html delete mode 100644 "files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" delete mode 100644 files/fr/web/css/css_fonts/guide_polices_variables/index.html create mode 100644 files/fr/web/css/css_fonts/opentype_fonts_guide/index.html create mode 100644 files/fr/web/css/css_fonts/variable_fonts_guide/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" create mode 100644 files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html delete mode 100644 files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" create mode 100644 files/fr/web/css/css_grid_layout/grid_template_areas/index.html create mode 100644 files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html delete mode 100644 files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" delete mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" delete mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" create mode 100644 files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" delete mode 100644 files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" create mode 100644 files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" create mode 100644 files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html delete mode 100644 files/fr/web/css/css_images/sprites_css/index.html create mode 100644 files/fr/web/css/css_images/using_css_gradients/index.html delete mode 100644 files/fr/web/css/css_lists/compteurs_css/index.html delete mode 100644 "files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" delete mode 100644 files/fr/web/css/css_lists/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/fr/web/css/css_logical_properties/basic_concepts/index.html delete mode 100644 files/fr/web/css/css_logical_properties/concepts_de_base/index.html delete mode 100644 files/fr/web/css/css_logical_properties/dimensionnement/index.html create mode 100644 files/fr/web/css/css_logical_properties/floating_and_positioning/index.html create mode 100644 files/fr/web/css/css_logical_properties/margins_borders_padding/index.html delete mode 100644 "files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" delete mode 100644 "files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" create mode 100644 files/fr/web/css/css_logical_properties/sizing/index.html create mode 100644 files/fr/web/css/css_masking/index.html delete mode 100644 files/fr/web/css/css_masks/index.html create mode 100644 files/fr/web/css/css_motion_path/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/fr/web/css/css_questions_frequentes/index.html create mode 100644 files/fr/web/css/css_scroll_snap/basic_concepts/index.html create mode 100644 files/fr/web/css/css_scroll_snap/browser_compat/index.html delete mode 100644 "files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" delete mode 100644 files/fr/web/css/css_scroll_snap/concepts_de_base/index.html create mode 100644 files/fr/web/css/css_selectors/index.html create mode 100644 files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html delete mode 100644 "files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" create mode 100644 files/fr/web/css/css_shapes/basic_shapes/index.html delete mode 100644 "files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" delete mode 100644 files/fr/web/css/css_shapes/formes_simples/index.html create mode 100644 files/fr/web/css/css_shapes/from_box_values/index.html delete mode 100644 "files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" create mode 100644 files/fr/web/css/css_shapes/overview_of_css_shapes/index.html create mode 100644 files/fr/web/css/css_shapes/shapes_from_images/index.html create mode 100644 files/fr/web/css/css_transforms/using_css_transforms/index.html delete mode 100644 files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html create mode 100644 files/fr/web/css/css_transitions/using_css_transitions/index.html delete mode 100644 files/fr/web/css/css_transitions/utiliser_transitions_css/index.html create mode 100644 files/fr/web/css/css_types/index.html create mode 100644 files/fr/web/css/css_values_and_units/index.html create mode 100644 files/fr/web/css/cssom_view/coordinate_systems/index.html delete mode 100644 "files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" create mode 100644 files/fr/web/css/descendant_combinator/index.html create mode 100644 files/fr/web/css/easing-function/index.html delete mode 100644 files/fr/web/css/extensions_css_microsoft/index.html delete mode 100644 files/fr/web/css/extensions_mozilla/index.html delete mode 100644 files/fr/web/css/feuilles_de_style_alternatives/index.html delete mode 100644 files/fr/web/css/filter-function/url/index.html delete mode 100644 files/fr/web/css/filters_effects/index.html create mode 100644 files/fr/web/css/general_sibling_combinator/index.html delete mode 100644 files/fr/web/css/grid-column-gap/index.html delete mode 100644 "files/fr/web/css/h\303\251ritage/index.html" create mode 100644 files/fr/web/css/id_selectors/index.html delete mode 100644 "files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" delete mode 100644 files/fr/web/css/index/index.html create mode 100644 files/fr/web/css/inheritance/index.html create mode 100644 files/fr/web/css/initial_value/index.html create mode 100644 files/fr/web/css/inline_formatting_context/index.html create mode 100644 files/fr/web/css/inset-block-end/index.html create mode 100644 files/fr/web/css/inset-block-start/index.html create mode 100644 files/fr/web/css/inset-inline-end/index.html create mode 100644 files/fr/web/css/inset-inline-start/index.html delete mode 100644 "files/fr/web/css/jeux_de_caract\303\250res_css/index.html" delete mode 100644 "files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" create mode 100644 files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/fr/web/css/layout_cookbook/card/index.html delete mode 100644 files/fr/web/css/layout_cookbook/carte/index.html create mode 100644 files/fr/web/css/layout_cookbook/center_an_element/index.html delete mode 100644 files/fr/web/css/layout_cookbook/centrer_un_element/index.html create mode 100644 files/fr/web/css/layout_cookbook/column_layouts/index.html delete mode 100644 "files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" delete mode 100644 "files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" create mode 100644 files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html create mode 100644 files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html delete mode 100644 files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html create mode 100644 files/fr/web/css/layout_cookbook/list_group_with_badges/index.html delete mode 100644 files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html delete mode 100644 files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html delete mode 100644 "files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" create mode 100644 files/fr/web/css/layout_cookbook/split_navigation/index.html create mode 100644 files/fr/web/css/layout_cookbook/sticky_footers/index.html create mode 100644 files/fr/web/css/layout_mode/index.html create mode 100644 files/fr/web/css/list_of_proprietary_css_features/index.html delete mode 100644 "files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" delete mode 100644 "files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" create mode 100644 files/fr/web/css/media_queries/index.html create mode 100644 files/fr/web/css/media_queries/testing_media_queries/index.html create mode 100644 files/fr/web/css/media_queries/using_media_queries/index.html create mode 100644 files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html create mode 100644 files/fr/web/css/microsoft_extensions/index.html delete mode 100644 files/fr/web/css/mode_de_mise_en_page/index.html delete mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" delete mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" delete mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" delete mode 100644 "files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" delete mode 100644 files/fr/web/css/motion_path/index.html create mode 100644 files/fr/web/css/mozilla_extensions/index.html delete mode 100644 "files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" delete mode 100644 files/fr/web/css/none/index.html delete mode 100644 files/fr/web/css/normal/index.html delete mode 100644 "files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" delete mode 100644 "files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" delete mode 100644 files/fr/web/css/outils/index.html delete mode 100644 "files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" create mode 100644 files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html create mode 100644 files/fr/web/css/paged_media/index.html create mode 100644 files/fr/web/css/position_value/index.html create mode 100644 files/fr/web/css/privacy_and_the__colon_visited_selector/index.html delete mode 100644 "files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" create mode 100644 files/fr/web/css/pseudo-elements/index.html delete mode 100644 "files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" delete mode 100644 "files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" create mode 100644 files/fr/web/css/replaced_element/index.html delete mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" delete mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" delete mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" delete mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" create mode 100644 files/fr/web/css/resolved_value/index.html delete mode 100644 "files/fr/web/css/r\303\250gles_@/index.html" create mode 100644 files/fr/web/css/scaling_of_svg_backgrounds/index.html delete mode 100644 files/fr/web/css/shape-box/index.html create mode 100644 files/fr/web/css/shorthand_properties/index.html create mode 100644 files/fr/web/css/specified_value/index.html delete mode 100644 "files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_css/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_d_id/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_de_classe/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_de_type/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_descendant/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_enfant/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_universels/index.html" delete mode 100644 files/fr/web/css/timing-function/index.html create mode 100644 files/fr/web/css/tools/cubic_bezier_generator/index.html create mode 100644 files/fr/web/css/tools/index.html create mode 100644 files/fr/web/css/tools/linear-gradient_generator/index.html delete mode 100644 files/fr/web/css/type_color/index.html delete mode 100644 files/fr/web/css/type_position/index.html create mode 100644 files/fr/web/css/type_selectors/index.html delete mode 100644 files/fr/web/css/types_css/index.html create mode 100644 files/fr/web/css/universal_selectors/index.html delete mode 100644 files/fr/web/css/url/index.html create mode 100644 files/fr/web/css/used_value/index.html delete mode 100644 "files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" delete mode 100644 "files/fr/web/css/valeur_calcul\303\251e/index.html" delete mode 100644 files/fr/web/css/valeur_initiale/index.html delete mode 100644 files/fr/web/css/valeur_reelle/index.html delete mode 100644 "files/fr/web/css/valeur_r\303\251solue/index.html" delete mode 100644 "files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" delete mode 100644 "files/fr/web/css/valeur_utilis\303\251e/index.html" delete mode 100644 "files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" create mode 100644 files/fr/web/css/value_definition_syntax/index.html create mode 100644 files/fr/web/css/viewport_concepts/index.html create mode 100644 files/fr/web/css/visual_formatting_model/index.html delete mode 100644 "files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" (limited to 'files/fr/web/css') 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 ---- -
{{CSSRef}}
- -
-

Attention ! 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 les boîtes flexibles.

-
- -

La propriété -moz-box-ordinal-group 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é.

- -

Valeurs

- -

Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.

- -

Exemples

- -

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;
-}
- -

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

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

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 ---- -
-
{{CSSRef}}{{deprecated_header}}
- -

Ne pas utiliser cette valeur ! C'est la valeur cursor {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.

-
diff --git a/files/fr/web/css/-ms-high-contrast/index.html b/files/fr/web/css/-ms-high-contrast/index.html deleted file mode 100644 index e9aef6fa8e..0000000000 --- a/files/fr/web/css/-ms-high-contrast/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: '-ms-high-contrast' -slug: Web/CSS/-ms-high-contrast -tags: - - '@media' - - CSS - - Caractéristique média - - Non-standard - - Reference -translation_of: Web/CSS/@media/-ms-high-contrast ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La caractéristique média -ms-high-contrast, relative à la règle @ @media, est une extension Microsoft qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.

- -

Cette caractéristique média s'applique aux média de type matriciel (bitmap). Elle ne gère pas les préfixes min et max.

- -

Syntaxe

- -

La caractéristique média -ms-high-contrast est définie avec une des valeurs définies ci-après.

- -

Valeurs

- -
-
active
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.

-
-
none{{deprecated_inline}}
-
Cette valeur n'est plus prise en charge par Edge.
-
black-on-white
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.

-
-
white-on-black
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.

-
-
- -

Syntaxe formelle

- -
{{CSSSyntax}}
- -

Exemples

- -

Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.

- -
@media screen and (-ms-high-contrast: active) {
-  /* Règles utilisées dans tous les cas si
-     le contraste élevé est utilisé */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
-}
-
- -

Spécifications

- -

Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.

- -

Notes

- -

À partir de Microsoft Edge, -ms-high-contrast: none n'est plus pris en charge.

- -

La caractéristique média -ms-high-contrast fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.

- -

La caractéristique média -ms-high-contrast a été introduite avec Windows 8.

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 ---- -
{{CSSRef}}{{non-standard_header}}
- -

La propriété -ms-scroll-snap-type est une propriété spécifique à Microsoft qui indique le type de point d'accroche à utiliser pour l'élément courant.

- -

Syntaxe

- -

Valeurs

- -
-
none
-
-

Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.

-
-
proximity
-
-

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.

-
-
mandatory
-
-

L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.

-
-
- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Spécifications

- -

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Notes

- -

 

- -

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.

- -

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.

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 ---- -
{{CSSRef}}{{non-standard_header}}
- -

La propriété CSS -ms-user-select est une propriété spécifique à Microsoft qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.

- -

Syntax

- -

Valeurs

- -
-
none
-
-

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.

-
-
element
-
-

Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.

-
-
text
-
-

Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.

-
-
- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Exemples

- -

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 blog. Ce conteneur contient un autre élément <div> avec l'identifiant blogPost pour le billet de la page. La classe comment est appliquée aux éléments <div> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.

- -

La déclaration suivante désactive la sélection à l'exception du contenu éditable.

- -
#blog {
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-}
-
- -

La déclaration suivante désactive la sélection pour le reste :

- -
#blog, #blog input, #blog textarea,
-#blog *[contenteditable=true] {
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-}
-
- -

La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.

- -
#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;
-}
-
- -

La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.

- -
.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;
-}
-
- -

Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.

- -
#blogPost, .comment {
-  -ms-user-select: text;
-}
-
-#blog {
-  -ms-user-select: none;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.

- -

{{cssinfo}}

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

{{ CSSRef() }}

- -

{{ Non-standard_header() }}

- -

Résumé

- -

La propriété CSS -webkit-mask-image 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.

- - - -

Syntaxe

- -
-webkit-mask-image:  <mask-image>[, <mask-image>]*
-
- -

Valeurs :

- -
-
<mask-image>
-
{{cssxref("<uri>")}} | <gradient> | none
-
- -

Values

- -
-
<uri>
-
Chemin de la ressource image utilisée comme masque.
-
 
-
<gradient>
-
Fonction-webkit-gradient utilisée comme masque.
-
none
-
Signifie que l'élément n'a pas de masque image.
-
- -

Exemples

- -
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;
-}
-
- -

Notes

- -

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.

- -

Compatibilité des navigateurs

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Support basique{{ CompatNo() }}1.0{{ CompatNo() }}{{ CompatNo() }}4.0
Images de masque multiples{{ CompatNo() }}1.0{{ CompatNo() }}{{ CompatNo() }}4.0
Dégradés{{ CompatNo() }}1.0{{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}
Masques SVG{{ CompatNo() }}8.0{{ CompatNo() }}{{ CompatNo() }}4.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéiOS SafariOpera MiniOpera MobileAndroid Browser
Support basique3.2{{ CompatNo() }}{{ CompatNo() }}2.1
Images de masque multiplesyes{{ CompatNo() }}{{ CompatNo() }}yes
Dégradésyes {{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}yes{{ property_prefix("-webkit") }}
-

Masques SVG

- 		-

yes

- 		-

{{ CompatNo() }}

- 		-

{{ CompatNo() }}

- 		-

yes

-
-
- -
Note : Gecko supporte les effets de filtre SVG depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.
- -

Voir également

- -

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html new file mode 100644 index 0000000000..e9aef6fa8e --- /dev/null +++ b/files/fr/web/css/@media/-ms-high-contrast/index.html @@ -0,0 +1,71 @@ +--- +title: '-ms-high-contrast' +slug: Web/CSS/-ms-high-contrast +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-ms-high-contrast +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La caractéristique média -ms-high-contrast, relative à la règle @ @media, est une extension Microsoft qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.

+ +

Cette caractéristique média s'applique aux média de type matriciel (bitmap). Elle ne gère pas les préfixes min et max.

+ +

Syntaxe

+ +

La caractéristique média -ms-high-contrast est définie avec une des valeurs définies ci-après.

+ +

Valeurs

+ +
+
active
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.

+
+
none{{deprecated_inline}}
+
Cette valeur n'est plus prise en charge par Edge.
+
black-on-white
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.

+
+
white-on-black
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.

+
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.

+ +
@media screen and (-ms-high-contrast: active) {
+  /* Règles utilisées dans tous les cas si
+     le contraste élevé est utilisé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+
+ +

Spécifications

+ +

Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.

+ +

Notes

+ +

À partir de Microsoft Edge, -ms-high-contrast: none n'est plus pris en charge.

+ +

La caractéristique média -ms-high-contrast fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.

+ +

La caractéristique média -ms-high-contrast a été introduite avec Windows 8.

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

{{CSSRef}}

- -

{{Index("/fr/docs/Web/CSS/@media")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur height, 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")}}.

- -

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 (viewport). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.

- -

Syntaxe

- -
/* Une valeur de longueur        */
-/* Type <length> ou <percentage> */
-height: auto;
-height: 320px;
-height: 15em;
-
-/* Deux valeurs de longueur */
-height: 320px 200px;
-
- -

Valeurs

- -
-
auto
-
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
-
<length>
-
Une longueur relative ou absolue qui doit être positive.
-
<percentage>
-
Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Exemples

- -
@viewport {
-  height: 500px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.height")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur max-height, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (viewport) d'un document.

- -

Syntaxe

- -
/* 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%;
- -

Valeurs

- -
-
auto
-
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
-
<length>
-
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
-
<percentage>
-
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.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -
@viewport {
-  max-height: 600px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.max-height")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur max-width, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (viewport) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du viewport initial.

- -

Syntaxe

- -
/* 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%;
- -

Valeurs

- -
-
auto
-
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
-
<length>
-
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
-
<percentage>
-
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.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -
@viewport {
-  max-width: 600px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.max-width")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur max-zoom, 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).

- -

Un facteur de zoom égal à 1.0 ou à 100% 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 ».

- -

Syntaxe

- -
/* 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%;
-
- -

Valeurs

- -
-
auto
-
L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.
-
<number>
-
Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<number>")}}).
-
<percentage>
-
Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<percentage>")}}).
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.max-zoom")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur min-height, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (viewport) d'un document.

- -

Syntaxe

- -
/* 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%;
- -

Valeurs

- -
-
auto
-
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
-
<length>
-
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
-
<percentage>
-
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.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -
@viewport {
-  min-height: 600px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.min-height")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur min-width, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (viewport) d'un document.

- -

Syntaxe

- -
/* 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%;
- -

Valeurs

- -
-
auto
-
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
-
<length>
-
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
-
<percentage>
-
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.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -
@viewport {
-  min-width: 600px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.min-width")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur min-zoom, 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).

- -

Un facteur de zoom égal à 1.0 ou à 100% 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 ».

- -

Syntaxe

- -
/* 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%;
-
- -

Valeurs

- -
-
auto
-
L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.
-
<number>
-
Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<number>")}}).
-
<percentage>
-
Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<percentage>")}}).
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.min-zoom")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur orientation, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.

- -
/* Valeurs avec un mot-clé */
-orientation: auto;
-orientation: portrait;
-orientation: landscape;
-
- -

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.

- -

Syntaxe

- -

Valeurs

- -
-
auto
-
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 »).
-
portrait
-
Le document devrait être verrouillé en mode portrait.
-
landscape
-
Le document devrait être verrouillé en mode paysage.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.orientation")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur user-zoom, 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 (viewport).

- -
/* Valeurs avec un mot-clé */
-user-zoom: zoom;
-user-zoom: fixed;
-
- -

Syntaxe

- -

Valeurs

- -
-
zoom
-
L'utilisateur peut zoomer/dézoomer.
-
fixed
-
L'utilisateur ne peut ni zoomer ni dézoomer.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Accessibilité

- -

Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.user-zoom")}}

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 ---- -
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
- -

Le descripteur viewport-fit, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (viewport) d'un document recouvre l'écran.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-viewport-fit: auto;
-viewport-fit: contain;
-viewport-fit: cover;
-
- -

Valeurs

- -
-
auto
-
Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.
-
contain
-
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.
-
cover
-
La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser des variables pour le placement en zone sûre afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.
-
- -

Syntaxe formelle

- -
auto | contain | cover
- -

Accessibilité

- -

When using the viewport-fit descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the safe area inset variables.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.viewport-fit")}}

- -

Voir aussi

- - 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 ---- -
{{CSSRef}}
- -

Le descripteur width, 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")}}.

- -

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 (viewport). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.

- -

Syntaxe

- -
/* Une valeur de longueur        */
-/* Type <length> ou <percentage> */
-width: auto;
-width: 320px;
-width: 15em;
-
-/* Deux valeurs de longueur */
-width: 320px 200px;
-
- -

Valeurs

- -
-
auto
-
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
-
<length>
-
Une longueur relative ou absolue qui doit être positive.
-
<percentage>
-
Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Exemples

- -
@viewport {
-  width: 500px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.width")}}

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 ---- -
{{CSSRef}}
- -

Le descripteur zoom, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.

- -

Un niveau de zoom égal à 1.0 ou 100% n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.

- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-zoom: auto;
-
-/* Valeurs numériques */
-/* Type <number>      */
-zoom: 0.8;
-zoom: 2.0;
-
-/* Valeurs proportionnelles */
-/* Type <percentage>        */
-zoom: 150%;
-
- -

Valeurs

- -
-
auto
-
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.
-
<number>
-
Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("<number>")}}.
-
<percentage>
-
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>")}}.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.zoom")}}

diff --git a/files/fr/web/css/_colon_-moz-list-bullet/index.html b/files/fr/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..f394c8a1c1 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/::-moz-list-bullet' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément CSS non-standard ::-moz-list-bullet de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).

+ +

Syntaxe

+ +
li::-moz-list-bullet { propriétés de style }
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li>Numéro 1</li>
+  <li>Numéro 2</li>
+  <li>Numéro 3</li>
+</ul>
+
+<ul class="list">
+  <li>Numéro 1</li>
+  <li>Numéro 2</li>
+  <li>Numéro 3</li>
+</ul>
+
+ +

CSS

+ +
.list ::-moz-list-bullet {
+  font-size: 36px;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-list-number/index.html b/files/fr/web/css/_colon_-moz-list-number/index.html new file mode 100644 index 0000000000..0f12741d94 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-list-number/index.html @@ -0,0 +1,52 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/::-moz-list-number' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/:-moz-list-number' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément CSS ::-moz-list-number permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).

+ +

Syntaxe

+ +
li::-moz-list-number { propriétés de style }
+
+ +

Exemples

+ +

CSS

+ +
li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+
+ +

HTML

+ +
<ol>
+  <li>Premier élément</li>
+  <li>Second élément</li>
+  <li>Troisième élément</li>
+</ol>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-ui-invalid/index.html b/files/fr/web/css/_colon_-moz-ui-invalid/index.html deleted file mode 100644 index 5f29e0f90f..0000000000 --- a/files/fr/web/css/_colon_-moz-ui-invalid/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: ':-moz-ui-invalid' -slug: 'Web/CSS/:-moz-ui-invalid' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:user-invalid' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La pseudo-classe :-moz-ui-invalid représente n'importe quel élément de formulaire dont la valeur est invalide selon ses contraintes de validation.

- -

Cette pseudo-classe est appliquée d'après les règles suivantes :

- - - -

Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.

- -

Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.

- -

Syntaxe

- -
{{CSSSyntax}}
- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.-moz-ui-invalid")}}

- -

Voir aussi

- - 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' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La pseudo-classe :-ms-input-placeholder 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.

- -

Exemples

- -

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

- -

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;
-}
- -

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

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Capture d'écran

- -

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. MSDN documente cette pseudo-classe.

- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatNo}}{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Support simple{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-webkit-autofill/index.html b/files/fr/web/css/_colon_-webkit-autofill/index.html deleted file mode 100644 index 4d7aadd16e..0000000000 --- a/files/fr/web/css/_colon_-webkit-autofill/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: ':-webkit-autofill' -slug: 'Web/CSS/:-webkit-autofill' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-webkit-autofill' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La pseudo-classe :-webkit-autofill correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.

- -

Note : Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent !important pour les déclarations avec :-webkit-autofill ce qui les rend difficilement modifiables sans utiliser JavaScript.

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.-webkit-autofill")}}

- -

Voir aussi

- - 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' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe :any() 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.

- -
/* 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;
-}
-
- -
Note : Cette pseudo-classe est en voie d'être standardisée dans la spécification CSS Selectors Level 4 sous le nom de :matches(). Il est probable que la syntaxe et le nom de :-préfixe-any() soit amené à changer pour l'adopter dans un avenir proche.
- -

Syntaxe

- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Valeurs

- -
-
selector
-
Un sélecteur, simple ou multiple, composé d'un sélecteur CSS simple.
-
- -
Note : Le sélecteur ne peut pas contenir de combinateur ou de pseudo-éléments.
- -

Exemples

- -

Simplifier la sélection de listes

- -

Par exemple, le code CSS suivant :

- -
/*  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;
-}
-
- -

Pourra être remplacé par :

- -
/* 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;
-}
- -

Cependant, on évitera d'utiliser le code suivant (cf. la section sur les performances plus bas) :

- -
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
-  list-style-type: square;
-}
- -

Simplifier la sélection de section

- -

Ceci est particulièrement utile lorsqu'on manipule des sections et des titres HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans :any(), leur appliquer un style peut être beaucoup plus complexe.

- -

Par exemple, sans :any(), appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :

- -
/* 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 */
-
- -

En utilisant : -any(), cela devient plus simple :

- -
/* 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;
-}
- -

Notes

- -

Problèmes avec les performances et la spécificité

- -

Le bug {{bug("561154")}} illustre un problème où la spécificité de :-moz-any() est incorrecte. L'implémentation actuelle considère :-moz-any() 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.

- -

Par exemple :

- -
.a > :-moz-any(.b, .c)
-
- -

est moins rapide que :

- -
.a > .b, .a > .c
-
- -

et celui-ci est rapide :

- -
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
-
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.any")}}

diff --git a/files/fr/web/css/_colon_autofill/index.html b/files/fr/web/css/_colon_autofill/index.html new file mode 100644 index 0000000000..4d7aadd16e --- /dev/null +++ b/files/fr/web/css/_colon_autofill/index.html @@ -0,0 +1,33 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La pseudo-classe :-webkit-autofill correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.

+ +

Note : Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent !important pour les déclarations avec :-webkit-autofill ce qui les rend difficilement modifiables sans utiliser JavaScript.

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-webkit-autofill")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_user-invalid/index.html b/files/fr/web/css/_colon_user-invalid/index.html new file mode 100644 index 0000000000..5f29e0f90f --- /dev/null +++ b/files/fr/web/css/_colon_user-invalid/index.html @@ -0,0 +1,50 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-ui-invalid représente n'importe quel élément de formulaire dont la valeur est invalide selon ses contraintes de validation.

+ +

Cette pseudo-classe est appliquée d'après les règles suivantes :

+ + + +

Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.

+ +

Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.

+ +

Syntaxe

+ +
{{CSSSyntax}}
+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-moz-ui-invalid")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" "b/files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" deleted file mode 100644 index 5f5a3655e8..0000000000 --- "a/files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: 'Le sélecteur :visited et la vie privée' -slug: 'Web/CSS/:visited_et_la_vie_privée' -tags: - - CSS - - Guide - - Sécurité -translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' ---- -
{{CSSRef}}
- -

Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.

- -

Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.

- -

Quelques petits mensonges pour se protéger

- -

La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances. 

- - - -

Les limites de la mise en forme applicable aux liens visités

- -

On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :

- - - -

De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec rgba() ou hsla() ou avec le mot-clé transparent).

- -

Voici un exemple de mise en forme prenant en compte ces restrictions :

- -
:link {
-  outline: 1px dotted blue;
-  background-color: white;
-  /* La valeur par défaut de background-color est 'transparent'.
-     et il faut donc une valeur différente, sinon les modifications
-     pour :visited ne s'appliqueront pas. */
-}
-
-:visited {
-  outline-color: orange;     /* Les liens visités auront un contour orange */
-  color: yellow;             /* Le texte des liens visités sera en jaune   */
-  background-color: green;   /* L'arrière-plan des liens visités sera vert */
-}
-
- -

Impact sur les développeurs web

- -

De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :

- - - -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html b/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html deleted file mode 100644 index f394c8a1c1..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: '::-moz-list-bullet' -slug: 'Web/CSS/::-moz-list-bullet' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/:-moz-list-bullet' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément CSS non-standard ::-moz-list-bullet de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).

- -

Syntaxe

- -
li::-moz-list-bullet { propriétés de style }
- -

Exemples

- -

HTML

- -
<ul>
-  <li>Numéro 1</li>
-  <li>Numéro 2</li>
-  <li>Numéro 3</li>
-</ul>
-
-<ul class="list">
-  <li>Numéro 1</li>
-  <li>Numéro 2</li>
-  <li>Numéro 3</li>
-</ul>
-
- -

CSS

- -
.list ::-moz-list-bullet {
-  font-size: 36px;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-list-number/index.html b/files/fr/web/css/_doublecolon_-moz-list-number/index.html deleted file mode 100644 index 0f12741d94..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-list-number/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: '::-moz-list-number' -slug: 'Web/CSS/::-moz-list-number' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/:-moz-list-number' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément CSS ::-moz-list-number permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).

- -

Syntaxe

- -
li::-moz-list-number { propriétés de style }
-
- -

Exemples

- -

CSS

- -
li::-moz-list-number {
-  font-style: italic;
-  font-weight: bold;
-}
-
- -

HTML

- -
<ol>
-  <li>Premier élément</li>
-  <li>Second élément</li>
-  <li>Troisième élément</li>
-</ol>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html deleted file mode 100644 index 2de12911cf..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: '::-webkit-file-upload-button' -slug: 'Web/CSS/::-webkit-file-upload-button' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::file-selector-button' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-file-upload-button représente le bouton d'un élément {{HTMLElement("input")}} de type file.

- -

Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.

- -

Syntaxe

- -
selecteur::-webkit-file-upload-button
-
- -

Exemples

- -

CSS

- -
input, label {
-  display: block;
-}
-
-input[type=file]::-webkit-file-upload-button {
-  border: 1px solid grey;
-  background: #FFFAAA;
-}
- -

HTML

- -
<form>
-  <label for="fileUpload">Uploader un fichier</label><br>
-  <input type="file" id="fileUpload">
-</form>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.-webkit-file-upload-button")}}

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' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément ::-webkit-input-placeholder représente le texte de substitution 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.

- -

Exemples

- -

HTML

- -
<input placeholder="Veuillez saisir ici...">
- -

CSS

- -
input::-webkit-input-placeholder {
-  color: green;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support simple{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_file-selector-button/index.html b/files/fr/web/css/_doublecolon_file-selector-button/index.html new file mode 100644 index 0000000000..2de12911cf --- /dev/null +++ b/files/fr/web/css/_doublecolon_file-selector-button/index.html @@ -0,0 +1,54 @@ +--- +title: '::-webkit-file-upload-button' +slug: 'Web/CSS/::-webkit-file-upload-button' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::file-selector-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-file-upload-button représente le bouton d'un élément {{HTMLElement("input")}} de type file.

+ +

Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.

+ +

Syntaxe

+ +
selecteur::-webkit-file-upload-button
+
+ +

Exemples

+ +

CSS

+ +
input, label {
+  display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+  border: 1px solid grey;
+  background: #FFFAAA;
+}
+ +

HTML

+ +
<form>
+  <label for="fileUpload">Uploader un fichier</label><br>
+  <input type="file" id="fileUpload">
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-webkit-file-upload-button")}}

diff --git a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html b/files/fr/web/css/a_propos_du_bloc_conteneur/index.html deleted file mode 100644 index 6269f895b5..0000000000 --- a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: À propos du bloc conteneur -slug: Web/CSS/A_Propos_Du_Bloc_Conteneur -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/Containing_block ---- -
{{CSSRef}}
- -

Le bloc englobant (containing block) affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la zone de contenu de l'ancêtre de bloc le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.

- -

Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :

- -
    -
  1. La zone de contenu (content area)
    2. -
  2. La zone de remplissage (padding area)
    3. -
  3. La zone de bordure (border area)
    4. -
  4. La zone de marge (margin area)
    5. -
- -

Diagram of the box model

- -
-

Note : Voir cet article pour découvrir le modèle de boîtes en CSS.

-
- -

On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.

- -

Les effets du bloc englobant

- -

Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.

- -

Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut absolute ou fixed).

- -

Identifier le bloc englobant

- -

Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :

- - - -
-

Note : Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé bloc englobant initial. Ce dernier a les dimensions de la zone d'affichage (viewport) ou de la page (pour les média paginés).

-
- -

Calcul des pourcentages à partir du bloc englobant

- -

Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés box model et offset :

- -
    -
  1. Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.
    2. -
  2. Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (width) du bloc englobant.
    3. -
- -

Quelques exemples

- -

Le code HTML utilisé pour les exemples suivants sera :

- -
<body>
-  <section>
-    <p>Et voici un paragraphe !</p>
-  </section>
-</body>
-
- -

Premier exemple

- -

Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.

- - - -
body {
-  background: beige;
-}
-
-section {
-  display: block;
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  width: 50%;   /* == 400px * .5 = 200px */
-  height: 25%;  /* == 160px * .25 = 40px */
-  margin: 5%;   /* == 400px * .05 = 20px */
-  padding: 5%;  /* == 400px * .05 = 20px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Premier_exemple','100%','300')}}

- -

Deuxième exemple

- -

Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}} car <section> n'est pas un conteneur de bloc en raison de display: inline et il ne crée pas de contexte de formatage.

- - - -
body {
-  background: beige;
-}
-
-section {
-  display: inline;
-  background: lightgray;
-}
-
-p {
-  width: 50%;     /* == half the body's width */
-  height: 200px;  /* Note: a percentage would be 0 */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Deuxième_exemple','100%','300')}}

- -

Troisième exemple

- -

Ici, le bloc englobant du paragraphe est <section> car la propriété position de ce dernier vaut absolute. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait border-box).

- - - -
body {
-  background: beige;
-}
-
-section {
-  position: absolute;
-  left: 30px;
-  top: 30px;
-  width: 400px;
-  height: 160px;
-  padding: 30px 20px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
-  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
-  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
-  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Troisième_exemple','100%','300')}}

- -

Quatrième exemple

- -

Dans cet exemple, la propriété position du paragraphe vaut fixed. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le viewport pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.

- - - -
body {
-  background: beige;
-}
-
-section {
-  width: 400px;
-  height: 480px;
-  margin: 30px;
-  padding: 15px;
-  background: lightgray;
-}
-
-p {
-  position: fixed;
-  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
-  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
-  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
-  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Quatrième_exemple','100%','300')}}

- -

Cinquième exemple

- -

Dans cet exemple, la propriété position du paragraphe vaut absolute. Son bloc englobant est donc <section> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas none.

- - - -
body {
-  background: beige;
-}
-
-section {
-  transform: rotate(0deg);
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  left: 80px;
-  top: 30px;
-  width: 50%;   /* == 200px */
-  height: 25%;  /* == 40px */
-  margin: 5%;   /* == 20px */
-  padding: 5%;  /* == 20px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Cinquième_exemple','100%','300')}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/actual_value/index.html b/files/fr/web/css/actual_value/index.html new file mode 100644 index 0000000000..4a4d768379 --- /dev/null +++ b/files/fr/web/css/actual_value/index.html @@ -0,0 +1,52 @@ +--- +title: Valeur réelle +slug: Web/CSS/valeur_reelle +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

La valeur réelle d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer la valeur calculée pour l'épaisseur de la bordure.

+ +

Calculer la valeur réelle d'une propriété

+ +

La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :

+ +
    +
  1. La valeur initiale (indiquée par la spécification).
    2. +
  2. La valeur définie qui résulte de l'héritage et de la cascade.
    3. +
  3. La valeur calculée est calculée selon la spécification.
    4. +
  4. La disposition est calculée, fournissant ainsi la valeur utilisée.
    5. +
  5. La valeur réelle
    6. +
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.html b/files/fr/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..4898c755c4 --- /dev/null +++ b/files/fr/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,86 @@ +--- +title: Combinateur de voisin direct +slug: Web/CSS/Combinateur_de_voisin_direct +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.

+ +
/* Ne cible que les paragraphes situé directement après une image */
+img + p {
+  font-style: bold;
+}
+ +

Syntaxe

+ +
premier_element + element_cible { styles }
+
+ +

Exemples

+ +

CSS

+ +
+
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+</ul>
+ +

Résultat

+
+ +

{{EmbedLiveSample('Exemples', 200, 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Renomme ce sélecteur en « next-sibling combinator ».
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.adjacent_sibling")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/alternative_style_sheets/index.html b/files/fr/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..cc96a123e1 --- /dev/null +++ b/files/fr/web/css/alternative_style_sheets/index.html @@ -0,0 +1,77 @@ +--- +title: Feuilles de style alternatives +slug: Web/CSS/Feuilles_de_style_alternatives +tags: + - CSS + - NeedsCompatTable + - Reference +translation_of: Web/CSS/Alternative_style_sheets +--- +
{{CSSRef}}
+ +

En proposant des feuilles de style alternatives, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.

+ +

Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage > Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage > Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.

+ +

Exemple d'application : définir des feuilles de style alternatives

+ +

Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs rel="stylesheet alternate" et title="...". Ainsi :

+ +
<link href="reset.css" rel="stylesheet" type="text/css">
+
+<link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut">
+<link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli">
+<link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique">
+
+ +

Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante alternate pour l'attribut rel) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.

+ +

Quel que soit la mise en forme choisie, les règles provenant de la feuille reset.css seront toujours appliquées.

+ +

Détails

+ +

Une feuille de style fera partie d'une de ces trois catégories :

+ + + +

Lorsqu'une feuille de style contient un attribut title sur l'élément {{HTMLElement("link", "<link rel=\"stylesheet\">")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (title a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut title seront toujours appliquées.

+ +

On utilisera rel="stylesheet" pour pointer vers la feuille de style par défaut et rel="alternate stylesheet" pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}La spécification CSS OM définit les concepts de nom d'ensemble de feuilles de style, le marqueur « désactivé » et le nom d'ensemble de feuilles de style CSS préférées.
+ Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir quand est créée une feuille de style CSS.
+

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

+ 		{{Spec2('HTML WHATWG')}}La spécification HTML définit quand et comment créer un algorithme déterminant la feuille de style CSS et qui gère les éléments <link> et <style>. Elle définit également le comportement de <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}La spécification HTML définit le concept de feuilles de style préférées et alternatives.
diff --git a/files/fr/web/css/animations_css/conseils/index.html b/files/fr/web/css/animations_css/conseils/index.html deleted file mode 100644 index bb79f19722..0000000000 --- a/files/fr/web/css/animations_css/conseils/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Trucs et astuces pour les animations CSS -slug: Web/CSS/Animations_CSS/Conseils -tags: - - Animations CSS - - CSS - - Exemple - - Guide - - Tutoriel -translation_of: Web/CSS/CSS_Animations/Tips ---- -
{{CSSRef}}
- -

Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.

- -

Relancer une animation

- -

La spécifications des animations CSS ne permet pas de relancer une animation. Il n'existe pas de méthode resetAnimation() qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur "running". Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.

- -

CSS

- -

Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).

- - - -
@keyframes colorchange {
-  0% { background: yellow }
-  100% { background: blue }
-}
-
-.box {
-  width: 100px;
-  height: 100px;
-  border: 1px solid black;
-}
-
-.changing {
-  animation: colorchange 2s;
-}
- -

On a deux classes qui sont définies. La classe box qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe changing qui indique que les {{cssxref("@keyframes")}} intitulées colorchange doivent être utilisées sur une période de deux secondes afin d'animer la boîte.

- -

Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.

- -

HTML

- -

Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.

- -
<div class="box">
-</div>
-
-<div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
- -

JavaScript

- -

Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction play() qui est appelée lorsque l'utilisateur clique sur le bouton.

- -
function play() {
-  document.querySelector(".box").className = "box";
-  window.requestAnimationFrame(function(time) {
-    window.requestAnimationFrame(function(time) {
-      document.querySelector(".box").className = "box changing";
-    });
-  });
-}
- -

Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.

- -

Voici ce qui se produit lorsque la fonction play() est appelée :

- -
    -
  1. On réinitialise la liste des classes CSS de la boîte avec uniquement box. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe changing en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.
    2. -
  2. Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (callback). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…
    3. -
  3. Notre fonction de rappel invoque à nouveau requestAnimationFrame() ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe changing à la boîte afin que l'animation soit lancée lors du rafraîchissement.
    4. -
- -

Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :

- -
document.querySelector(".runButton").addEventListener("click", play, false);
- -

Résultat

- -

{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}

- -

Arrêter une animation

- -

Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :

- -
    -
  1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur  animation-direction: alternate. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.
    2. -
  2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement animationiteration se déclenche.
    3. -
- -

Ces pistes sont utilisées dans la démonstration suivante :

- -

CSS

- -
.slidein {
-  animation-duration: 5s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
-.stopped {
-  animation-name: none;
-}
-
-@keyframes slidein {
-  0% {
-    margin-left: 0%;
-  }
-  50% {
-    margin-left: 50%;
-  }
-  100% {
-    margin-left: 0%;
-  }
-}
-
- -

HTML

- -
<h1 id="watchme">Cliquer pour arrêter</h1>
-
- -

JavaScript

- -
let watchme = document.getElementById('watchme')
-
-watchme.className = 'slidein'
-const listener = (e) => {
-  watchme.className = 'slidein stopped'
-}
-watchme.addEventListener('click', () =>
-  watchme.addEventListener('animationiteration', listener, false)
-)
-
- -

Résultat

- -

{{EmbedLiveSample("Arrêter_une_animation")}}

- -

Voir cette démo

- -

Voir aussi

- - diff --git "a/files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" "b/files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" deleted file mode 100644 index a2cb1bd5a3..0000000000 --- "a/files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Détecter la prise en charge des animations CSS -slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS -tags: - - Avancé - - CSS - - Obsolete -translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support ---- -
{{CSSRef}}{{obsolete_header}}
- -
-

Attention ! Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.

-
- -

Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, basé sur ce billet de Christian Heilmann, illustre une technique pour détecter la prise en charge des animations CSS.

- -

Détecter la prise en charge des animations CSS

- -

Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :

- -
var animation = false,
-  animationstring = 'animation',
-  keyframeprefix = '',
-  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
-  pfx  = '',
-  elem = document.createElement('div');
-
-if( elem.style.animationName !== undefined ) { animation = true; }
-
-if( animation === false ) {
-  for( var i = 0; i < domPrefixes.length; i++ ) {
-    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
-      pfx = domPrefixes[ i ];
-      animationstring = pfx + 'Animation';
-      keyframeprefix = '-' + pfx.toLowerCase() + '-';
-      animation = true;
-      break;
-    }
-  }
-}
-
- -

Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant animation avec false. On utilise la chaîne de caractères animationstring avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable pfx qu'on définit pour le moment avec la chaîne vide.

- -

Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable elem. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.

- -

Si le navigateur ne prend pas en charge la version sans préfixe et que animation vaut toujours false, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de AnimationName de la même façon.

- -

Une fois que ce code a fini son exécution, la valeur de animation sera false si les animations ne sont pas prises en charge ou true si animation est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le camelCase (ex. MozAnimation) et les tirets (-moz-x).

- -

Appliquer des animations avec la bonne syntaxe selon le navigateur

- -

Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :

- -
if( animation === false ) {
-
-  // on utilise JavaScript en fallback
-
-} else {
-  elem.style[ animationstring ] = 'rotate 1s linear infinite';
-
-  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
-                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
-                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
-                  '}';
-
-  if( document.styleSheets && document.styleSheets.length ) {
-
-      document.styleSheets[0].insertRule( keyframes, 0 );
-
-  } else {
-
-    var s = document.createElement( 'style' );
-    s.innerHTML = keyframes;
-    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
-
-  }
-
-}
-
- -

Ce code utilise la valeur d'animation : si c'est false, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.

- -

Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/keyframes car elles n'utilisent pas la syntaxe CSS traditionnelle.

- -

Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable keyframes qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.

- -

Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).

- -

S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.

- -

Voir dans JSFiddle

- -

Voir aussi

- - diff --git a/files/fr/web/css/animations_css/index.html b/files/fr/web/css/animations_css/index.html deleted file mode 100644 index acc7ab6997..0000000000 --- a/files/fr/web/css/animations_css/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Les animations CSS -slug: Web/CSS/Animations_CSS -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Animations ---- -
{{CSSRef}}
- -

Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

- -

Référence

- -

Propriétés CSS

- -
- -
- -

Règles @ CSS

- -
- -
- -

Guides

- -
-
Détecter la prise en charge des animations CSS
-
Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.
-
Manipuler les animations CSS
-
Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.
-
Conseils pour les animations CSS
-
Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

Propriété animation

- - - -

{{Compat("css.properties.animation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html b/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html deleted file mode 100644 index 4010492e3d..0000000000 --- a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: Utiliser les animations CSS -slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS -tags: - - Avancé - - CSS - - Guide - - Reference -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -
{{CSSRef}}
- -

Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (keyframes) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.

- -

Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :

- -
    -
  1. On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.
    2. -
  2. Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le frame-skipping) afin que le résultat obtenu soit aussi fluide que possible.
    3. -
  3. En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.
    4. -
- -

Paramétrer l'animation

- -

Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.

- -

Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :

- -
-
{{cssxref("animation-delay")}}
-
Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.
-
{{cssxref("animation-direction")}}
-
Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.
-
{{cssxref("animation-duration")}}
-
Cette propriété définit la durée d'un cycle de l'animation.
-
{{cssxref("animation-fill-mode")}}
-
Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.
-
{{cssxref("animation-iteration-count")}}
-
Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.
-
{{cssxref("animation-name")}}
-
Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.
-
{{cssxref("animation-play-state")}}
-
Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
-
{{cssxref("animation-timing-function")}}
-
Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.
-
- -

Définir les étapes composant une animation (@keyframes)

- -

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.

- -

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0% ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.

- -

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.

- -

Exemples

- -
Note : Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « live » ne fonctionnera pas.
- -

Utiliser une animation pour que le texte traverse la fenêtre du navigateur

- -

Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran

- -

On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}:hidden sur ce conteneur.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera slidein.

- -

Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.

- -

Les étapes (keyframes) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias from). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.

- -

La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias to). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.

- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
-
- -
-

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

-
- -

{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}

- -

Ajouter une autre étape

- -

Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ @keyframes :

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.

- -
-

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

-
- -

{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}

- -

Répéter une animation

- -

Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur infinite pour que l'animation se répète à l'infini :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

{{EmbedLiveSample("Répéter_une_animation","100%","250")}}

- -

Obtenir un effet aller-retour

- -

On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur alternate :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - - - -

{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}

- -

Utiliser la propriété raccourcie animation

- -

La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- -

On peut la réécrire de façon plus concise :

- -
p {
-  animation: 3s infinite alternate slidein;
-}
- -
-

Note : Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.

-
- -

Utiliser plusieurs valeurs pour différentes animations

- -

Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.

- -

Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 3s;
-animation-iteration-count: 1;
- -

Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple fadeInOut a une durée de 2.5s et 2 itérations.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s, 1s;
-animation-iteration-count: 2, 1, 5;
- -

Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, fadeInOut durera 2.5s, moveLeft300px durera 5s. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : bounce aura donc une durée de 2.5s. Le nombre d'itérations sera affecté de la même façon.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s;
-animation-iteration-count: 2, 1;
- -

Utiliser les événements liés aux animations

- -

Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.

- -

Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.

- -

La feuille de style CSS

- -

On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée slidein, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.

- -
.slidein {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: 3;
-  animation-direction: alternate;
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-    margin-left:0%;
-    width:100%;
-  }
-}
- -

Les gestionnaires d'événements

- -

On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).

- -
var element = document.getElementById("watchme");
-element.addEventListener("animationstart", listener, false);
-element.addEventListener("animationend", listener, false);
-element.addEventListener("animationiteration", listener, false);
-
-element.className = "slidein";
-
- -

Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur slidein sur l'élément.

- -

Quel est l'intérêt ? En fait, l'événement animationstart est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.

- -

Écouter les événements

- -

Les événements sont transmis à la fonction listener() décrite ici :

- -
function listener(event) {
-  var l = document.createElement("li");
-  switch(event.type) {
-    case "animationstart":
-      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.

- -

Le résultat obtenu devrait ressembler à quelque chose comme :

- - - -

On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

- -

Le document HTML

- -

Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :

- -
<h1 id="watchme">Regardez-moi bouger</h1>
-<p>
-  Un exemple d'animation CSS pour déplacer
-  un élément <code>H1</code> sur une page.
-</p>
-<p>
-  Voici les événements relatifs aux animations :
-</p>
-<ul id="output">
-</ul>
-</body>
-
- -

{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" deleted file mode 100644 index 592f9f64fd..0000000000 --- "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" +++ /dev/null @@ -1,2626 +0,0 @@ ---- -title: Générateur de border-image -slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

- -
-

Générateur border-image

- -

Contenu HTML

- -
    <div id="container">
-
-        <div id="gallery">
-            <div id="image-gallery">
-                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
-            </div>
-        </div>
-
-        <div id="load-actions" class="group section">
-            <div id="toggle-gallery" data-action="hide"> </div>
-            <div id="load-image" class="button"> Upload image </div>
-            <input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/>
-            <div id="load-remote" class="button"> </div>
-        </div>
-
-        <div id="general-controls" class="group section">
-            <div class="name"> Options </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">Échelle</div>
-                <div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10">
-                </div>
-            </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">Déplaçable</div>
-                <div class="ui-checkbox" data-topic='drag-subject'></div>
-            </div>
-            <div class="property right">
-                <div class="name">Hauteur de la section</div>
-                <div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000">
-                </div>
-            </div>
-        </div>
-
-        <div id="preview_section" class="group section">
-            <div id="subject">
-                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
-                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
-            </div>
-            <div id="preview"> </div>
-        </div>
-
-        <!-- controls -->
-        <div id="controls" class="group section">
-
-            <!-- border-image-slice -->
-            <div id="border-slice-control" class="category">
-                <div class="title"> border-image-slice </div>
-                <div class="property">
-                    <div class="name">fill</div>
-                    <div class="ui-checkbox" data-topic='slice-fill'></div>
-                </div>
-            </div>
-
-            <!-- border-image-width -->
-            <div id="border-width-control" class="category">
-                <div class="title"> border-image-width </div>
-            </div>
-
-            <!-- border-image-outset -->
-            <div id="border-outset-control" class="category">
-                <div class="title"> border-image-outset </div>
-            </div>
-
-            <!-- other-settings -->
-            <div id="aditional-properties" class="category">
-                <div class="title"> Autres propriétés </div>
-                <div class="property">
-                    <div class="name"> repeat-x </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
-                        <div data-value="0">repeat</div>
-                        <div data-value="0">stretch</div>
-                        <div data-value="0">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="name"> repeat-y </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
-                        <div data-value="1">repeat</div>
-                        <div data-value="1">stretch</div>
-                        <div data-value="1">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3">
-                    </div>
-                </div>
-
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
-                    </div>
-                </div>
-            </div>
-
-
-            <div id="output" class="category">
-                <div class="title"> Code CSS </div>
-                <div class="css-property">
-                    <span class="name"> border-image-slice: </span>
-                    <span id="out-border-slice" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-width: </span>
-                    <span id="out-border-width" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-outset: </span>
-                    <span id="out-border-outset" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-repeat: </span>
-                    <span id="out-border-repeat" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-source: </span>
-                    <span id="out-border-source" class="value">  </span>
-                </div>
-            </div>
-
-        </div>
-    </div>
- -

CSS Content

- -
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list > div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list > div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 2px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover > * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] > * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider > input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time < 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index >= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	};
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	};
-
-	var setValue = function setValue(topic, value) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j<4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i < positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- -

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" deleted file mode 100644 index 344dd64bcc..0000000000 --- "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" +++ /dev/null @@ -1,1600 +0,0 @@ ---- -title: Générateur de border-radius -slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

- -
-

border-radius

- -

Contenu HTML

- -
<div id="container">
-    <div class="group section">
-        <div id="preview" class="col span_12">
-            <div id="subject">
-                <div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top">
-                </div>
-                <div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top">
-                </div>
-                <div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom">
-                </div>
-                <div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom">
-                </div>
-
-                <div id="radius-ui-sliders">
-                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="controls" class="group section">
-
-        <div class="group section">
-            <div id="dimensions">
-                <div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
-
-                <div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
-            </div>
-
-            <div id="output"></div>
-        </div>
-
-        <div class="group section">
-            <div id="radius-lock">
-                <div class="info"> Coins arrondis </div>
-                <div class="ui-checkbox" data-topic='top-left'></div>
-                <div class="ui-checkbox" data-topic='top-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-left'></div>
-            </div>
-
-            <div id="unit-selection">
-                <div class="info"> Unités pour la bordure </div>
-            </div>
-        </div>
-
-    </div>
-</div>
-
- -

Contenu CSS

- -
/*  GRID OF TEN
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider-container {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider-container * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview {
-	height: 500px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	overflow: hidden;
-	position: relative;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#preview input {
-	color: #333;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-#subject {
-	width: 400px;
-	height: 150px;
-	margin: 0 auto;
-	border: 3px solid #C60;
-	background: #FFF;
-	position: relative;
-}
-
-.radius {
-	width: 50%;
-	height: 50%;
-	border: 1px solid #CCC;
-	display: none;
-	position: absolute;
-	z-index: 1;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.handle {
-	width: 16px;
-	height: 16px;
-	position: absolute;
-	z-index: 2;
-}
-
-.handle-top-left {
-	top: -12px;
-	left: -12px;
-	cursor: se-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
-}
-
-.handle-top-right {
-	top: -12px;
-	right: -12px;
-	cursor: sw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
-}
-
-.handle-bottom-right {
-	bottom: -12px;
-	right: -12px;
-	cursor: nw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
-}
-
-.handle-bottom-left {
-	bottom: -12px;
-	left: -12px;
-	cursor: ne-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
-}
-
-
-.radius-container {
-	position: absolute;
-	display : block;
-	z-index: 1;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* TOP LEFT */
-#top-left {
-	top: 0;
-	left: 0;
-}
-
-#top-left .radius {
-	border-top-left-radius: 100%;
-	top: 0;
-	left: 0;
-}
-
-/* TOP RIGHT */
-#top-right {
-	top: 0;
-	right: 0;
-}
-
-#top-right .radius {
-	border-top-right-radius: 100%;
-	top: 0;
-	right: 0;
-}
-
-/* BOTTOM RIGHT */
-#bottom-right {
-	bottom: 0;
-	right: 0;
-}
-
-#bottom-right .radius {
-	border-bottom-right-radius: 100%;
-	bottom: 0;
-	right: 0;
-}
-
-/* BOTTOM lEFT */
-#bottom-left {
-	bottom: 0;
-	left: 0;
-}
-
-#bottom-left .radius {
-	border-bottom-left-radius: 100%;
-	bottom: 0;
-}
-
-/* INPUT SLIDERS */
-
-#preview .ui-input-slider {
-	margin: 10px;
-	position: absolute;
-	z-index: 10;
-}
-
-#radius-ui-sliders {
-	width: 100%;
-	height: 100%;
-	min-height: 75px;
-	min-width: 150px;
-	padding: 20px 50px;
-	top: -20px;
-	left: -50px;
-	position: relative;
-}
-
-#tlr {
-	top: -30px;
-	left: -50px;
-	display: none;
-}
-
-#tlw {
-	top: -30px;
-	left: 30px;
-}
-
-#tlh {
-	top: 20px;
-	left: -50px;
-}
-
-#trr {
-	top: -30px;
-	right: -50px;
-	display: none;
-}
-
-#trw {
-	top: -30px;
-	right: 30px;
-}
-
-#trh {
-	top: 20px;
-	right: -50px;
-}
-
-#brr {
-	bottom: -30px;
-	right: -50px;
-	display: none;
-}
-
-#brw {
-	bottom: -30px;
-	right: 30px;
-}
-
-#brh {
-	bottom: 20px;
-	right: -50px;
-}
-
-#blr {
-	bottom: -30px;
-	left: -50px;
-	display: none;
-}
-
-#blw {
-	bottom: -30px;
-	left: 30px;
-}
-
-#blh {
-	bottom: 20px;
-	left: -50px;
-}
-
-#preview .ui-input-slider-left, #preview .ui-input-slider-right {
-	visibility: hidden;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-left {
-	visibility: visible;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-right {
-	visibility: visible;
-}
-
-/*
- *
- */
-
-#unit-selection {
-	width: 200px;
-	height: 75px;
-	margin: 30px 30px 0 0;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: right;
-}
-
-#unit-selection .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#unit-selection .dropdown {
-	width: 50px;
-	height: 20px;
-	margin: 10px;
-	padding: 0;
-	border-radius: 3px;
-	position: absolute;
-	overflow: hidden;
-}
-
-#unit-selection select {
-	width: 50px;
-	height: 20px;
-	marign: 0;
-	padding: 0 0 0 10px;
-	background: #555;
-	border: 1px solid #555;
-	border: none;
-	color: #FFF;
-	float: left;
-}
-
-#unit-selection select option {
-	background: #FFF;
-	color: #333;
-}
-
-#unit-selection select:hover {
-	cursor: pointer;
-}
-
-#unit-selection .dropdown:before {
-	content: "";
-	width: 18px;
-	height: 20px;
-	display: block;
-	background-color: #555;
-	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	top: 0px;
-	right: 0px;
-	position: absolute;
-	z-index: 1;
-	pointer-events: none;
-}
-
-#unit-selection .unit-top-left {
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-left-w {
-	top: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-top-left-h {
-	top: 20px;
-	left: -37px;
-}
-
-#unit-selection .unit-top-right {
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-right-w {
-	top: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-top-right-h {
-	top: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-right {
-	bottom: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-right-w {
-	bottom: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-bottom-right-h {
-	bottom: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-left {
-	bottom: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-left-w {
-	bottom: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-bottom-left-h {
-	bottom: 20px;
-	left: -37px;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-
-
-#radius-lock {
-	width: 200px;
-	height: 75px;
-	margin: 30px 0 0 30px;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: left;
-}
-
-#radius-lock .ui-checkbox {
-	color: #FFF;
-	position: absolute;
-}
-
-#radius-lock .ui-checkbox > label {
-	height: 20px;
-	width: 34px;
-	padding: 0;
-}
-
-#radius-lock .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#radius-lock [data-topic="top-left"] {
-	top: 10px;
-	left: 10px;
-}
-
-#radius-lock [data-topic="top-right"] {
-	top: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-right"] {
-	bottom: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-left"] {
-	bottom: 10px;
-	left: 10px;
-}
-
-/**
- * Controls
- */
-
-#dimensions {
-	width: 200px;
-	color: #444;
-	float:left;
-}
-
-#dimensions input {
-	background: #555;
-	color: #FFF;
-	border: none;
-	border-radius: 3px;
-}
-
-#output {
-	width: 500px;
-	padding: 10px 0;
-	margin: 10px 0;
-	color: #555;
-	text-align: center;
-	border: 1px dashed #999;
-	border-radius: 3px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-
-	float: right;
-}
-
-
-
- -

Contenu JavaScript

- -
'use strict';
-
-
-/**
- * UI-InputSliderManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseInt(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		subscribe(obj.topic, function(value) {
-			input.value = value + obj.unit;
-		});
-
-		return input;
-	}
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		});
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		}
-
-		return slider;
-	}
-
-	var InputSlider = function(node) {
-		var min		= node.getAttribute('data-min') | 0;
-		var max		= node.getAttribute('data-max') | 0;
-		var step	= node.getAttribute('data-step') | 0;
-		var value	= node.getAttribute('data-value') | 0;
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-		node.className = 'ui-input-slider ui-input-slider-container';
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	}
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined && send_notify === false) {
-			slider.input.value = value + slider.unit;
-			return;
-		}
-
-		notify.call(slider);
-	}
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	}
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	}
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	}
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		getNode : getNode,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-		}
-		catch(error) {
-			console.log(error);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function() {
-	BorderRadius.init();
-});
-
-var BorderRadius = (function BorderRadius() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	var subject;
-	var units = ['px', '%'];
-	var output = null;
-
-	var UnitSelector = function UnitSelector(topic) {
-
-		this.container = document.createElement("div");
-		this.select = document.createElement("select");
-		for (var i in units) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.textContent = units[i];
-			this.select.appendChild(option);
-		}
-
-		this.container.className = 'dropdown ' + 'unit-' + topic;
-		this.container.appendChild(this.select);
-	}
-
-	UnitSelector.prototype.setValue = function setValue(value) {
-		this.salect.value = value;
-	}
-
-
-	var RadiusContainer = function RadiusContainer(node) {
-		var radius = document.createElement('div');
-		var handle = document.createElement('div');
-		var x = node.getAttribute('data-x');
-		var y = node.getAttribute('data-y');
-		var active = false;
-
-		this.id = node.id;
-		this.node = node;
-		this.radius = radius;
-		this.handle = handle;
-		this.width = 100;
-		this.height = 50;
-		this.size = 0;
-		this.rounded = false;
-
-		this.unitX = 0;
-		this.unitY = 0;
-		this.unitR = 0;
-
-		this.maxW = 100;
-		this.maxH = 100;
-		this.maxR = 100;
-
-		this.topic = y + '-' + x;
-
-		var sliderW = InputSliderManager.getNode(this.topic + '-w');
-		var sliderH = InputSliderManager.getNode(this.topic + '-h');
-		var sliderR = InputSliderManager.getNode(this.topic);
-
-		this.setUnitX(this.unitX);
-		this.setUnitY(this.unitY);
-		this.setUnitR(this.unitR);
-
-		this.updateWidth();
-		this.updateHeight();
-		this.updateRadius();
-
-		if (x === 'left')	this.resizeX =  1;
-		if (x === 'right')	this.resizeX = -1;
-		if (y === 'top')	this.resizeY =  1;
-		if (y === 'bottom')	this.resizeY = -1;
-
-		radius.className = 'radius';
-
-		var unit_selector = document.getElementById("unit-selection");
-		var unitW = new UnitSelector(this.topic + '-w');
-		var unitH = new UnitSelector(this.topic + '-h');
-		var unitR = new UnitSelector(this.topic);
-
-		unit_selector.appendChild(unitW.container);
-		unit_selector.appendChild(unitH.container);
-		unit_selector.appendChild(unitR.container);
-		node.appendChild(radius);
-		subject.appendChild(handle);
-
-		unitW.select.addEventListener('change', function(e) {
-			this.setUnitX(e.target.value | 0);
-		}.bind(this));
-
-		unitH.select.addEventListener('change', function(e) {
-			this.setUnitY(e.target.value | 0);
-		}.bind(this));
-
-		unitR.select.addEventListener('change', function(e) {
-			this.setUnitR(e.target.value | 0);
-		}.bind(this));
-
-		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
-
-		handle.addEventListener("mousedown", function(e) {
-			active = true;
-			this.radius.style.display = 'block';
-			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		document.addEventListener("mouseup", function(e) {
-			this.radius.style.display = 'none';
-			if (active === true)
-				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
-		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
-		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
-
-		ButtonManager.subscribe(this.topic, function(value) {
-			this.rounded = value;
-			if (value === true) {
-				unitW.container.style.display = 'none';
-				unitH.container.style.display = 'none';
-				unitR.container.style.display = 'block';
-				sliderW.style.display = 'none';
-				sliderH.style.display = 'none';
-				sliderR.style.display = 'block';
-				this.setUnitR(this.unitR);
-				this.updateRadius();
-			}
-
-			if (value === false) {
-				unitW.container.style.display = 'block';
-				unitH.container.style.display = 'block';
-				unitR.container.style.display = 'none';
-				sliderW.style.display = 'block';
-				sliderH.style.display = 'block';
-				sliderR.style.display = 'none';
-				this.setUnitX(this.unitX);
-				this.setUnitY(this.unitY);
-				this.updateWidth();
-				this.updateHeight();
-			}
-
-			this.updateBorderRadius();
-
-		}.bind(this));
-
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.updateWidth = function updateWidth() {
-		this.node.style.width = this.width + units[this.unitX];
-		var value = Math.round(this.width / 2);
-		InputSliderManager.setValue(this.topic + '-w', value, false);
-	}
-
-	RadiusContainer.prototype.updateHeight = function updateHeight() {
-		this.node.style.height = this.height + units[this.unitY];
-		var value = Math.round(this.height / 2);
-		InputSliderManager.setValue(this.topic + '-h', value, false);
-	}
-
-	RadiusContainer.prototype.updateRadius = function updateRadius() {
-		var value = Math.round(this.size / 2);
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		InputSliderManager.setValue(this.topic, value, false);
-	}
-
-	RadiusContainer.prototype.setWidth = function setWidth(value) {
-		this.radius.style.display = 'block';
-		this.width = 2 * value;
-		this.node.style.width = this.width + units[this.unitX];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setHeight = function setHeight(value) {
-		this.radius.style.display = 'block';
-		this.height = 2 * value;
-		this.node.style.height = this.height + units[this.unitY];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setRadius = function setRadius(value) {
-		this.radius.style.display = 'block';
-		this.size = 2 * value;
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
-		this.unitX = value;
-		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
-		if (this.unitX === 1) this.maxW = 200;
-		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
-		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
-	}
-
-	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
-		this.unitY = value;
-		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
-		if (this.unitY === 1) this.maxH = 200;
-		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
-		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
-	}
-
-	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
-		this.unitR = value;
-
-		if (this.unitR === 0)
-			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
-
-		if (this.unitR === 1)
-			this.maxR = 200;
-
-		InputSliderManager.setUnit(this.topic, units[this.unitR]);
-		InputSliderManager.setMax(this.topic, this.maxR / 2);
-	}
-
-	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
-		if (this.rounded) {
-			this.setUnitR(this.unitR);
-			return;
-		}
-
-		if (unit === 0)
-			this.setUnitX(this.unitX);
-
-		if (unit === 1)
-			this.setUnitY(this.unitY);
-	}
-
-	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
-
-		if (this.rounded === true) {
-			var unit = units[this.unitR];
-			var value = Math.round(this.size / 2);
-			return value + unit;
-		}
-
-		var unitX = units[this.unitX];
-		var unitY = units[this.unitY];
-		var valueX = Math.round(this.width / 2);
-		var valueY = Math.round(this.height / 2);
-
-		if (valueX === valueY && this.unitX === this.unitY)
-			return valueX + unitX;
-
-		return valueX + unitX + ' ' + valueY + unitY;
-	}
-
-	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
-		var radius = this.composeBorderRadius();
-		var corner = 0;
-
-		if (this.topic === 'top-left') {
-			subject.style.borderTopLeftRadius = radius;
-			corner = 0;
-		}
-
-		if (this.topic === 'top-right') {
-			subject.style.borderTopRightRadius = radius;
-			corner = 1;
-		}
-
-		if (this.topic === 'bottom-right') {
-			subject.style.borderBottomRightRadius = radius;
-			corner = 2;
-		}
-
-		if (this.topic === 'bottom-left') {
-			subject.style.borderBottomLeftRadius = radius;
-			corner = 3;
-		}
-
-		Tool.updateOutput(corner, radius);
-	}
-
-	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
-
-		if (this.rounded === true) {
-			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size < 0)	this.size = 0;
-			if (this.size > this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width < 0)	this.width = 0;
-			if (this.width > this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height < 0) this.height = 0;
-			if (this.height > this.maxH)	this.height = this.maxH;
-			this.updateHeight();
-		}
-
-		if (deltaX || deltaY)
-			this.updateBorderRadius();
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview;
-		var preview_ui;
-		var radius_containers = [];
-		var border_width = 3;
-		var borders1 = [null, null, null, null];
-		var borders2 = [0, 0, 0, 0];
-
-		var updateUIWidth = function updateUIWidth(value) {
-			var pwidth = subject.parentElement.clientWidth;
-			var left = (pwidth - value) / 2;
-			subject.style.width = value + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(0);
-		}
-
-		var updateUIHeight = function updateUIHeight(value) {
-			var pheight = subject.parentElement.clientHeight;
-			var top = (pheight - value) / 2;
-			subject.style.height = value + "px";
-			subject.style.top = top - border_width + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(1);
-		}
-
-		var updatePreviewUIWidth = function updatePreviewUIWidth() {
-			var p = subject.parentElement.clientWidth;
-			var v = preview_ui.clientWidth;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.left = (p - v) / 2 + "px" ;
-		}
-
-		var updatePreviewUIHeight = function updatePreviewUIHeight() {
-			var p = subject.parentElement.clientHeight;
-			var v = preview_ui.clientHeight;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.top = (p - v) / 2 + "px" ;
-		}
-
-		var updateOutput = function updateOutput(corner, radius) {
-			var values = radius.split(" ");
-
-			borders1[corner] = values[0];
-			borders2[corner] = values[0];
-
-			if (values.length === 2)
-				borders2[corner] = values[1];
-
-			var border_1_value = borders1.join(" ");
-			var border_2_value = borders2.join(" ");
-			var border_radius = 'border-radius: ' + border_1_value;
-
-			if (border_2_value !== border_1_value)
-				border_radius += ' / ' + border_2_value;
-
-			border_radius += ';';
-			output.textContent = border_radius;
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-			subject = getElemById("subject");
-			output = getElemById("output");
-			preview_ui = getElemById("radius-ui-sliders");
-
-			var elem = document.querySelectorAll('.radius-container');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				radius_containers[i] = new RadiusContainer(elem[i]);
-
-			InputSliderManager.subscribe("width", updateUIWidth);
-			InputSliderManager.subscribe("height", updateUIHeight);
-
-			InputSliderManager.setValue("width", subject.clientWidth);
-			InputSliderManager.setValue("height", subject.clientHeight);
-		}
-
-		return {
-			init : init,
-			updateOutput : updateOutput
-		}
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		InputSliderManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
- -

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" deleted file mode 100644 index 8873196702..0000000000 --- "a/files/fr/web/css/arri\303\250re-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 ---- -
{{CSSRef}}
- -

Les arrière-plans et bordures CSS 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.

- -

Référence

- -

Propriétés CSS

- -
- -
- -

Guides

- -
-
Utiliser plusieurs arrière-plans CSS
-
Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.
-
Redimensionner des images d'arrière-plan
-
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.
-
- -

Outils

- -
-
Générateur de border-image
-
Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.
-
Générateur de border-radius
-
Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.
-
Générateur de box-shadow
-
Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds')}}{{Spec2('CSS3 Backgrounds')}} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
-
diff --git a/files/fr/web/css/at-rule/index.html b/files/fr/web/css/at-rule/index.html new file mode 100644 index 0000000000..e298cf9028 --- /dev/null +++ b/files/fr/web/css/at-rule/index.html @@ -0,0 +1,82 @@ +--- +title: Règles @ +slug: Web/CSS/Règles_@ +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

Une règle @ est une expression CSS commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain bloc CSS trouvé en premier.

+ +
/* Forme générique */
+@IDENTIFIANT (RÈGLE);
+
+/* Exemple : indiquer au navigateur d'utiliser */
+/* UTF-8 comme jeu de caractères */
+@charset "utf-8";
+ +

Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :

+ + + +

Les règles de groupe conditionnelles

+ +

Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : les règles de groupe conditionnelles. Ces instructions partagent une syntaxe commune et permettent d'inclure des instructions imbriquées (soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.

+ +

Les règles de groupe conditionnelles définies par la spécification de niveau 3 sur les règles CSS conditionnelles sont :

+ + + +

Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatDéfinition
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Définition initiale.
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Standardisation de @-webkit-keyframes.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/attribute_selectors/index.html b/files/fr/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..6c9e719345 --- /dev/null +++ b/files/fr/web/css/attribute_selectors/index.html @@ -0,0 +1,243 @@ +--- +title: Sélecteurs d'attribut +slug: Web/CSS/Sélecteurs_d_attribut +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

+ +
/* Les éléments <a> avec un attribut title */
+a[title] {
+  color: purple;
+}
+
+/* Les éléments <a> avec un href qui correspond */
+/* à "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Les éléments <a> dont href contient "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Les éléments <a> dont href finit par ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Les éléments <a> dont l'attribut class contient le mot logo */
+/* comportement identique à a.logo */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

Syntaxe

+ +
+
[attr]
+
Permet de cibler un élément qui possède un attribut attr.
+
[attr=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur.
+
[attr~=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
+
[attr|=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
+
[attr^=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.
+
[attr$=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur se termine par valeur.
+
[attr*=valeur]
+
Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur dans la chaîne de caractères.
+
[attr operateur valeur i]
+
On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).
+
[attr operateur valeur s] {{experimental_inline}}
+
Ajouter un s (ou S) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

Liens

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Liens internes commençant avec "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Liens avec "example" n'importe où dans l'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Liens avec "insensitive" n'importe où dans l'URL,
+   quelle que soit la casse */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Liens avec "cAsE" n'importe où dans l'URL,
+   et avec cette casse donnée.*/
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Liens qui finissent ".org" */
+a[href$=".org"] {
+  color: red;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Lien interne<a></li>
+  <li><a href="http://example.com">Lien d'exemple</a></li>
+  <li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
+  <li><a href="http://example.org">Lien vers example.org</a></li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample("Liens")}}

+ +

Langues

+ +

CSS

+ +
/* Tous les éléments divs avec un attribut `lang` seront en gras. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tous les divs en anglais américains seront bleus. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tous les divs en portugais seront verts. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tous les divs en chinois seront rouges (chinois
+   simplifié (zh-CN) ou traditionnel (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tous les divs en chinois traditionnels pour l'attribut
+   `data-lang` seront violet. */
+/* Note : Les doubles quotes ne sont pas strictement nécessaires
+   ici */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Langues")}}

+ +

Listes ordonnées

+ +

{{SeeCompatTable}}

+ +

La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.

+ +

CSS

+ +
/* Les types de liste devront être utilisé avec le
+   marqueur pour la casse vu les spécifications HTML */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Liste d'exemple</li>
+</ol>
+ +

Résultat

+ +

{{EmbedLiveSample("Listes_ordonnées")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Voir aussi

+ + 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 ---- -

{{ CSSRef() }}

-

Résumé

-

Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de auto sont différents suivant la propriété à laquelle la valeur est affectée.

-

Utilisation

- 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 ---- -
{{CSSRef}}
- -

Un contexte de formatage de blocs (block formatting context) 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.

- -

Un contexte de formatage de blocs est créé dans les situations suivantes :

- - - -

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.

- -

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.

- -

Spécifications

- - - -

Voir aussi

- - diff --git a/files/fr/web/css/child_combinator/index.html b/files/fr/web/css/child_combinator/index.html new file mode 100644 index 0000000000..bc24234ef2 --- /dev/null +++ b/files/fr/web/css/child_combinator/index.html @@ -0,0 +1,94 @@ +--- +title: Sélecteurs enfant +slug: Web/CSS/Sélecteurs_enfant +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

+ +
/* Les éléments <li> qui sont des enfant d'un */
+/* <ul class="mon-truc"> */
+ul.mon-truc>li {
+  margin: 2em;
+}
+ +

En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

+ +

Syntaxe

+ +
selecteur1 > selecteur2 { déclarations CSS }
+
+ +

Exemples

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: blue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Premier span du div.
+    <span>Deuxième span, dans un span dans un div.</span>
+  </span>
+</div>
+<span>Troisième span, en dehors de tout div.</span>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%", 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.child")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/class_selectors/index.html b/files/fr/web/css/class_selectors/index.html new file mode 100644 index 0000000000..115d791092 --- /dev/null +++ b/files/fr/web/css/class_selectors/index.html @@ -0,0 +1,101 @@ +--- +title: Sélecteurs de classe +slug: Web/CSS/Sélecteurs_de_classe +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.

+ +
/* Cible tous les éléments ayant la classe "spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments <li> ayant la classe "spacious" */
+li.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments <li> ayant une classe qui */
+/* contient à la fois "spacious" et "elegant"        */
+li.spacious.elegant {
+  margin: 2em;
+}
+ +

L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.

+ +

Syntaxe

+ +
.nomdeclasse { déclarations CSS }
+ +

Cela est exactement équivalent à l'utilisation du sélecteur d'attribut de la façon suivante :

+ +
[class~=nomdeclasse] { déclarations CSS }
+ +

Exemples

+ +

CSS

+ +
.classy {
+  background-color: skyblue;
+}
+.toto {
+ font-weight: bold;
+}
+
+ +

HTML

+ +
<div class="classy">Voici un div avec du texte.</div>
+<div class="toto classy truc">Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !</div>
+<div>En voilà un autre.</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.class")}}

diff --git a/files/fr/web/css/color_value/index.html b/files/fr/web/css/color_value/index.html new file mode 100644 index 0000000000..fd238e5816 --- /dev/null +++ b/files/fr/web/css/color_value/index.html @@ -0,0 +1,1379 @@ +--- +title: +slug: Web/CSS/Type_color +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/color_value +--- +
{{CSSRef}}
+ +

Le type de données CSS <color> permet de représenter des couleurs dans l'espace de couleurs sRGB. Une couleur pourra être décrite de trois façons :

+ + + +

En plus de la couleur exprimée dans l'espace RGB, une valeur <color> contient également un canal alpha qui décrit la transparence de l'image et donc la façon dont cette image se compose avec son arrière-plan.

+ +
+

Note : Cet article décrit le type de donnée CSS <color> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire Appliquer des couleurs à des éléments HTML grâce à CSS.

+
+ +

Syntaxe

+ +
+

Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge le profil de couleurs de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.

+
+ +

Il existe plusieurs méthodes pour décrire une valeur <color>.

+ +

Les mots-clés

+ +

Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, blue le bleu, brown le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :

+ + + +

Voici quelques inconvénients liés aux mots-clés :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationCouleurMot-cléValeurs exprimées en hexadécimal RGBExemple « live » dans le navigateur
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan (synonyme de aqua)#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta (synonyme de fuchsia)#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
+ +

La couleur rebeccapurple est équivalente à la couleur #639. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « Honorer un grand homme » (en anglais).

+ +

Le mot-clé transparent

+ +

transparent est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : rgba(0,0,0,0).

+ +
+

Note : Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, la spécification W3C indique que transparent devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur alpha de 0.

+
+ +
Note historique : Le mot-clé transparent n'était pas une valeur de type <color> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via les canaux alpha, transparent a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <color> est nécessaire (la propriété {{cssxref("color")}} par exemple).
+ +

Le mot-clé currentColor

+ +

Le mot-clé currentColor représente la valeur calculée de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.

+ +

Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.

+ +

Si currentColor est utilisée comme valeur pour la propriété color, sa valeur est déterminée à partir de la valeur héritée pour la propriété color.

+ +

Exemples

+ +

La couleur de la ligne prend la couleur héritée depuis son élément parent.

+ +
+
Exemple live n°1
+ +
<div style="color:darkred">
+ La couleur de ce texte est bleu.
+  <div style="background:currentColor; height:1px"></div>
+ Un peu de texte.
+</div>
+
+ +

{{EmbedLiveSample('Exemple_live_n°1')}}

+ +
Exemple live n°2
+ +
<div style="color:blue; border-bottom: 1px dashed currentColor;">
+ La couleur de ce texte est bleu :
+  <div style="background:currentColor; height:1px"></div>
+ Un peu de texte.
+</div>
+ +

{{EmbedLiveSample('Exemple_live_n°2')}}

+
+ +

Les couleurs RGB

+ +

Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.

+ +

Syntaxe

+ +

Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #) ou avec des notations fonctionnelles (rgb() ou rgba()).

+ +
+

Note : Dans la spécification du module CSS Color de niveau 4, rgba() a été définie comme une fonction historique dont la grammaire et le comportement est le même que rgb(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

+
+ +
+
Notation hexadécimale : #RRGGBB[AA]
+
Le signe « # » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.
+
Notation hexadécimale : #RGB[A]
+
le signe « # » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.
+
Notation fonctionnelle avec des virgules : rgb(R, G, B[, A]) ou rgba(R, G, B, A)
+
Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction rgb()). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("<number>")}}) ou des pourcentages ({{cssxref("<percentage>")}}) (ex. rgb(1e2, .5e1, .5e0, +.25e2%)).
+
Notation fonctionnelle : rgb(R G B[ / A]) ou rgba(R G B / A)
+
Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification CSS Colors Level 4.
+
+ +

Exemples

+ +
Les différentes variantes pour la syntaxe RGB
+ +
/* Ces exemples définissent tous la même couleur */
+#f03
+#F03
+#ff0033
+#FF0033
+rgb(255,0,51)
+rgb(255, 0, 51)
+rgb(255, 0, 51.0)
+rgb(100%,0%,20%)
+rgb(100%, 0%, 20%)
+rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
+
+ +
RGBa
+ +
/* Notation hexadécimale */
+#f030               /*   0% opacité - rouge */
+#F03F               /* 100% opacité - rouge */
+#ff003300           /*   0% opacité - rouge */
+#FF003388           /*  50% opacité - rouge */
+
+/* Notation fonctionnelle */
+rgba(255,0,0,0.1)   /*  10% opacité - rouge */
+rgba(255,0,0,0.4)   /*  40% opacité - rouge */
+rgba(255,0,0,0.7)   /*  70% opacité - rouge */
+rgba(255,0,0,  1)   /* 100% opacité - rouge */
+
+/* Notation fonctionnelle avec des nombres décimaux */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+
+/* Notation avec un espace */
+rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
+rgba(255 0 0 / 40%) /* 40% opacité - rouge */
+ +

Les couleurs HSL

+ +

Les couleurs peuvent également être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-clarté).

+ +

HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).

+ +

Syntaxe

+ +

Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles hsl() ou hsla().

+ +
+

Note : Dans la spécification du module CSS Color de niveau 4, hsla() a été définie comme une fonction historique dont la grammaire et le comportement est le même que hsl(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

+
+ +
+
Notation fonctionnelle : hsl(H, S, L,[, A]) ou hsla(H, S, L, A)
+
+

La valeur H correspond à la teinte (hue) et est représentée comme un angle {{cssxref("<angle>")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, le rouge correspond à 0 et 360 et les autres couleurs évoluent sur le cercle. Vert correspond à 120 et bleu à 240. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).

+ +

La valeur S correspond à la saturation (saturation) et la valeur L correspond à la clarté (lightness), ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec 100% l'image sera complètement saturée et avec 0%, l'image sera en nuances de gris. Pour la clarté, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une clarté « normale ».

+ +

La valeur A (canal alpha) peut être un nombre (type {{cssxref("<number>")}} entre 0 et 1 ou un pourcentage (type {{cssxref("<percentage>")}} (la valeur 100% correspond alors à la valeur numérique 1 : opacité complète).

+
+
Notation fonctionnelle : hsl(H S L[ / A]) ou hsla(H S L / A)
+
+

Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.

+
+
+ +

Exemples

+ +
HSL
+ +
hsl(0,  100%,50%)   /* red */
+hsl(30, 100%,50%)
+hsl(60, 100%,50%)
+hsl(90, 100%,50%)
+hsl(120,100%,50%)   /* green */
+hsl(150,100%,50%)
+hsl(180,100%,50%)
+hsl(210,100%,50%)
+hsl(240,100%,50%)   /* blue */
+hsl(270,100%,50%)
+hsl(300,100%,50%)
+hsl(330,100%,50%)
+hsl(360,100%,50%)   /* red */
+
+hsl(120,100%,25%)   /* dark green */
+hsl(120,100%,50%)   /* green */
+hsl(120,100%,75%)   /* light green */
+
+hsl(120,100%,50%)   /* green */
+hsl(120, 67%,50%)
+hsl(120, 33%,50%)
+hsl(120,  0%,50%)
+
+hsl(120, 60%,70%)   /* pastel green */
+
+/* syntaxe avec les espaces */
+hsl(120 60% 70%) /* pastel green */
+
+/* Valeur d'angle */
+/* on peut également utiliser les unités */
+/* rad, grad, turn */
+hsl(120deg 60% 70%) /* pastel green */
+
+/* Valeur alpha optionnelle */
+hsl(240,100%,50%,0.05)   /* 5% opaque blue */
+hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
+hsl(240 100% 50% / 0.05) /* 5% opaque blue */
+hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */
+
+ +
HSLa
+ +
hsla(240,100%,50%,0.05)  /* 5% opaque blue */
+hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
+hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
+hsla(240,100%,50%,   1)  /* full opaque blue */
+
+/* syntaxe avec un espace */
+hsla(240 100% 50% / 0.05)/* 5% opaque blue */
+
+/* valeur en pourcentage pour l'alpha */
+hsla(240 100% 50% / 5%)/* 5% opaque blue */
+
+/* valeur d'angle pour la teinte */
+/* les unités rad, grad et turn*/
+/* sont également acceptées */
+hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
+hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
+ +

Couleurs système

+ +

Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).

+ +
+
ActiveBorder
+
La bordure de la fenêtre active.
+
ActiveCaption
+
La légende de la fenêtre active. Devrait être utilisé avec CaptionText comme couleur de premier-plan.
+
AppWorkspace
+
La couleur d'arrière-plan d'une interface avec plusieurs documents.
+
Background
+
L'arrière-plan du bureau.
+
ButtonFace
+
La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
+
ButtonHighlight
+
La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.
+
ButtonShadow
+
La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..
+
ButtonText
+
La couleur du texte sur les bouttons. Devrait être utilisée avec ButtonFace ou ThreeDFace comme couleur d'arrière-plan.
+
CaptionText
+
La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec ActiveCaption comme couleur d'arrière-plan.
+
GrayText
+
Texte (désactivé) en gris.
+
Highlight
+
La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec HighlightText comme couleur de premier-plan.
+
HighlightText
+
La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec Highlight comme couleur d'arrière-plan.
+
InactiveBorder
+
La couleur de la bordure d'une fenêtre inactive.
+
InactiveCaption
+
La couleur de la légende de fenêtre inactive. Devrait être utilisée avec InactiveCaptionText comme couleur de premier-plan.
+
InactiveCaptionText
+
La couleur du texte pour une légende inactive. Devrait être utilisée avec InactiveCaption comme couleur d'arrière-plan.
+
InfoBackground
+
La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec InfoText comme couleur de premier-plan.
+
InfoText
+
La couleur du texte pour les bulles d'informations. Devrait être utilisée avec InfoBackground comme couleur d'arrière-plan.
+
Menu
+
La couleur d'arrière-plan du menu. Devrait être utilisée avec MenuText ou -moz-MenuBarText comme couleur de premier-plan.
+
MenuText
+
La couleur du texte dans les menus. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
+
Scrollbar
+
La couleur d'arrière-plan de la barre de défilement (ascenseur).
+
ThreeDDarkShadow
+
La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDFace
+
La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
+
ThreeDHighlight
+
La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDLightShadow
+
La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDShadow
+
La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
Window
+
La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur WindowText en premier plan.
+
WindowFrame
+
La couleur du cadre de la fenêtre.
+
WindowText
+
La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur Window en arrière-plan.
+
+ +

Ajouts propres à Mozilla pour les couleurs système

+ +
+
-moz-ButtonDefault
+
La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.
+
-moz-ButtonHoverFace
+
La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait ThreeDFace ou ButtonFace lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec -moz-ButtonHoverText comme couleur de premier-plan.
+
-moz-ButtonHoverText
+
La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec-moz-ButtonHoverFace comme couleur d'arrière-plan.
+
-moz-CellHighlight
+
La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlightText comme couleur de premier-plan. Voir aussi -moz-html-CellHighlight.
+
-moz-CellHighlightText
+
La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlight comme couleur d'arrière-plan. Voir aussi -moz-html-CellHighlightText.
+
-moz-Combobox
+
{{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec -moz-ComboboxText comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-Field à la place.
+
-moz-ComboboxText
+
{{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec -moz-Combobox comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-FieldText à la place.
+
-moz-Dialog
+
La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec -moz-DialogText comme couleur de premier-plan.
+
-moz-DialogText
+
La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec -moz-Dialog comme couleur d'arrière-plan.
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-OddTreeRow.
+
-moz-Field
+
La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec -moz-FieldText comme couleur de premier-plan.
+
-moz-FieldText
+
La couleur du texte pour les champs texte. Devrait être utilisée avec -moz-Field, -moz-EvenTreeRow, ou -moz-OddTreeRow comme couleur d'arrière-plan.
+
-moz-html-CellHighlight
+
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlightText comme couleur de premier-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlight.
+
-moz-html-CellHighlightText
+
{{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlight comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlightText.
+
-moz-mac-accentdarkestshadow
+
-moz-mac-accentdarkshadow
+
-moz-mac-accentface
+
-moz-mac-accentlightesthighlight
+
-moz-mac-accentlightshadow
+
-moz-mac-accentregularhighlight
+
-moz-mac-accentregularshadow
+
-moz-mac-chrome-active
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-chrome-inactive
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à Highlight. Devrait être utilisée avec -moz-MenuHoverText ou -moz-MenuBarHoverText comme couleur de premier-plan.
+
-moz-MenuHoverText
+
La couleur du texte pour les éléments de menu survolés. Généralement similaire à HighlightText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
+
-moz-MenuBarText
+
{{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à MenuText. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
+
-moz-MenuBarHoverText
+
La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à -moz-MenuHoverText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
+
-moz-nativehyperlinktext
+
{{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.
+
-moz-OddTreeRow
+
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-EvenTreeRow.
+
-moz-win-accentcolor
+
{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.
+
-moz-win-accentcolortext
+
{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.
+
-moz-win-communicationstext
+
{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
+
-moz-win-mediatext
+
{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
+
+ +

Ajout de Mozilla pour les couleurs liées aux préférences

+ +
+
-moz-activehyperlinktext
+
La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+
-moz-default-background-color
+
{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
+
-moz-default-color
+
{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.
+
-moz-hyperlinktext
+
La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+
-moz-visitedhyperlinktext
+
La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+
+ +

Interpolation

+ +

Les valeurs de type <color> peuvent être interpolées afin de créer des animations ou des dégradés (type <gradient>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans l'espace de couleurs alpha sRGBA prémultiplié afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon la fonction de temporisation associée à l'animation.

+ +

Accessibilité

+ +

La recommandation du W3C : WCAG 2.0 conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur Ies couleurs et le contraste pour plus d'informations).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Ajout de la couleur rebeccapurple, de la notation hexadécimale sur quatre chiffres (#RGBA) et sur huit chiffres (#RRGGBBAA). rgba() et hsla() sont désormais synonymes de rgb() et hsl(), les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.color")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/column_combinator/index.html b/files/fr/web/css/column_combinator/index.html new file mode 100644 index 0000000000..b971e8ae4c --- /dev/null +++ b/files/fr/web/css/column_combinator/index.html @@ -0,0 +1,97 @@ +--- +title: Combinateur de colonne +slug: Web/CSS/Combinateur_colonne +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Column_combinator +--- +
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
+ +

Le combinateur de colonne (||) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.

+ +
/* Les cellules de tableaux qui appartiennent */
+/* à la colonne "selected" */
+col.selected || td {
+  background: gray;
+}
+
+ +

Syntaxe

+ +
column-selector || cell-selector {
+  /* propriétés pour le style */
+}
+
+ +

Exemples

+ +

HTML

+ +
<table border="1">
+  <colgroup>
+    <col span="2"/>
+    <col class="selected"/>
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A
+      <td>B
+      <td>C
+    </tr>
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.sort")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/combinateur_colonne/index.html b/files/fr/web/css/combinateur_colonne/index.html deleted file mode 100644 index b971e8ae4c..0000000000 --- a/files/fr/web/css/combinateur_colonne/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Combinateur de colonne -slug: Web/CSS/Combinateur_colonne -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Column_combinator ---- -
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
- -

Le combinateur de colonne (||) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.

- -
/* Les cellules de tableaux qui appartiennent */
-/* à la colonne "selected" */
-col.selected || td {
-  background: gray;
-}
-
- -

Syntaxe

- -
column-selector || cell-selector {
-  /* propriétés pour le style */
-}
-
- -

Exemples

- -

HTML

- -
<table border="1">
-  <colgroup>
-    <col span="2"/>
-    <col class="selected"/>
-  </colgroup>
-  <tbody>
-    <tr>
-      <td>A
-      <td>B
-      <td>C
-    </tr>
-    <tr>
-      <td colspan="2">D</td>
-      <td>E</td>
-    </tr>
-    <tr>
-      <td>F</td>
-      <td colspan="2">G</td>
-    </tr>
-  </tbody>
-</table>
- -

CSS

- -
col.selected || td {
-  background: gray;
-  color: white;
-  font-weight: bold;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.sort")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/combinateur_de_voisin_direct/index.html b/files/fr/web/css/combinateur_de_voisin_direct/index.html deleted file mode 100644 index 4898c755c4..0000000000 --- a/files/fr/web/css/combinateur_de_voisin_direct/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Combinateur de voisin direct -slug: Web/CSS/Combinateur_de_voisin_direct -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.

- -
/* Ne cible que les paragraphes situé directement après une image */
-img + p {
-  font-style: bold;
-}
- -

Syntaxe

- -
premier_element + element_cible { styles }
-
- -

Exemples

- -

CSS

- -
-
li:first-of-type + li {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-</ul>
- -

Résultat

-
- -

{{EmbedLiveSample('Exemples', 200, 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Renomme ce sélecteur en « next-sibling combinator ».
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.adjacent_sibling")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/compartimentation_css/index.html b/files/fr/web/css/compartimentation_css/index.html deleted file mode 100644 index 34af6f3274..0000000000 --- a/files/fr/web/css/compartimentation_css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Compartimentation CSS (CSS Containment) -slug: Web/CSS/Compartimentation_CSS -tags: - - CSS - - CSS Containment -translation_of: Web/CSS/CSS_Containment ---- -

{{CSSRef}}
- L'objectif du module de spécification CSS Containment (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.

- -

Exemple simple

- -

De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.

- -
<h1>Mon blog</h1>
-<article>
-  <h2>Titre d'un article sympa</h2>
-  <p>Un peu de contenu.</p>
-</article>
-<article>
-  <h2>Un autre titre pour un autre article</h2>
-  <p>Un peu plus de contenu ici.</p>
-</article>
- -

Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur content.

- -
article {
-  contain: content;
-}
- -

Chaque article est indépendant des autres articles de la page et on fournit contain: content afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).

- -

Si on fournit contain: content pour chaque <article>, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si <article> est mis en forme de telle façon que sa forme dépend de son contenu (ex. height: auto), le navigateur devra prendre en compte le redimensionnement.

- -

La valeur content est une valeur synthétique pour contain: layout paint. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.

- -

Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.

- -

Concepts et terminologie

- -

Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.

- -

Compartimentation de la disposition

- -
article {
-  contain: layout;
-}
- -

La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec contain: layout, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.

- -

De plus :

- - - -

Compartimentation pour la peinture

- -
article {
-  contain: paint;
-}
- -

La compartimentation avec paint limite/rogne la boîte jusqu'à la limite de la zone de remplissage (padding) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec layout (voir ci-avant).

- -

De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).

- -

Compartimentation pour le dimensionnement

- -
article {
-  contain: size;
-}
- -

La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.

- -

Si on active contain: size, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.

- -

Compartimentation pour le style

- -
article {
-  contain: style;
-}
- -

Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un Shadow DOM. Cette valeur sert principlament pour les compteurs CSS qui pourraient changer sur un élément et affecter le reste de l'arborescence.

- -

En utilisant contain: style, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.

- -
-

Note : La valeur style est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).

-
- -

Valeurs spéciales

- -

La propriété contain possède deux valeurs spéciales :

- - - -

La première (vue dans le premier exemple) est un synonyme pour la conjonction de layout et paint. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (size) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.

- -

Pour obtenir la compartimentation la plus forte, on utilisera contain: strict qui est synonyme de contain: size layout paint voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :

- -
contain: strict;
-contain: strict style;
- -

Référence

- -

Propriétés CSS

- - - -

Ressources externes

- - diff --git a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html deleted file mode 100644 index d12e2113d1..0000000000 --- a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Ajouter z-index -slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index -tags: - - Avancé - - CSS - - Guide - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index ---- -
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}
- -

Ajouter z-index

- -

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.

- -

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

- -
-

Attention : z-index a un effet sur les éléments uniquement si ceux-ci sont positionnés.

-
- - - -
-

Notes :

- -
    -
  • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
    • -
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
    • -
-
- -

Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le z-index du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.

- -

{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}

- -

Code source de l’exemple

- -

HTML

- -
<div id="abs1">
-  <b>DIV #1</b>
-  <br />position: absolute;
-  <br />z-index: 5;
-</div>
-
-<div id="rel1">
-  <b>DIV #2</b>
-  <br />position: relative;
-  <br />z-index: 3;
-</div>
-
-<div id="rel2">
-  <b>DIV #3</b>
-  <br />position: relative;
-  <br />z-index: 2;
-</div>
-
-<div id="abs2">
-  <b>DIV #4</b>
-  <br />position: absolute;
-  <br />z-index: 1;
-</div>
-
-<div id="sta1">
-  <b>DIV #5</b>
-  <br />no positioning
-  <br />z-index: 8;
-</div>
-
- -

CSS

- -
div {
-  padding: 10px;
-  opacity: 0.7;
-  text-align: center;
-}
-
-b {
-  font-family: sans-serif;
-}
-
-#abs1 {
-  z-index: 5;
-  position: absolute;
-  width: 150px;
-  height: 350px;
-  top: 10px;
-  left: 10px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#rel1 {
-  z-index: 3;
-  height: 100px;
-  position: relative;
-  top: 30px;
-  border: 1px dashed #696;
-  background-color: #cfc;
-  margin: 0px 50px 0px 50px;
-}
-
-#rel2 {
-  z-index: 2;
-  height: 100px;
-  position: relative;
-  top: 15px;
-  left: 20px;
-  border: 1px dashed #696;
-  background-color: #cfc;
-  margin: 0px 50px 0px 50px;
-}
-
-#abs2 {
-  z-index: 1;
-  position: absolute;
-  width: 150px;
-  height: 350px;
-  top: 10px;
-  right: 10px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#sta1 {
-  z-index: 8;
-  height: 70px;
-  border: 1px dashed #996;
-  background-color: #ffc;
-  margin: 0px 50px 0px 50px;
-}
-
- -

{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html deleted file mode 100644 index 20fa6ab2ce..0000000000 --- a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: L'empilement de couches -slug: Web/CSS/Comprendre_z-index/Empilement_de_couches -tags: - - Avancé - - CSS - - Guide - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context ---- -
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
- -

Le contexte d'empilement

- -

Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.

- -

Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.

- -

Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :

- - - -

Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des z-index pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.

- -

En bref :

- - - -
Notes : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
- -

Illustration

- -

Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

- -

Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur z-index. La hiérarchie des contextes d'empilement est organisée comme suit :

- - - -

Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfants du bloc DIV #3, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément DIV #3 est prise en compte pour l'empilement dans l'élément racine par rapport à ses DIV voisins.

- -
-

Notes :

- -
    -
  • DIV #4 est rendu dans le bloc DIV #1 car le z-index (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le z-index (6) du bloc DIV #4 est valide à l'intérieur du contexte d'empilement du bloc DIV #3. Ainsi, DIV #4 se trouve sous DIV #1, parce que DIV #4 appartient à DIV #3, qui possède une valeur de z-index plus petite.
    • -
  • Pour la même raison DIV #2 (dont le z-index est 2) est rendu sous DIV#5 (de z-index égal à 1) parce que DIV #5 appartient à DIV #3, qui possède une valeur de z-index plus grande.
    • -
  • Le z-index du bloc DIV #3 est 4, mais cette valeur est indépendante du z-index du bloc DIV #4, DIV #5 et DIV #6, parce qu'il appartient à un contexte d'empilement différent.
    • -
-
- -

Exemple

- -

CSS

- -
* {
-  margin: 0;
-}
-
-html {
-  padding: 20px;
-  font: 12px/20px Arial, sans-serif;
-}
-
-div {
-  opacity: 0.7;
-  position: relative;
-}
-
-h1 {
-  font: inherit;
-  font-weight: bold;
-}
-
-#div1, #div2 {
-  border: 1px dashed #696;
-  padding: 10px;
-  background-color: #cfc;
-}
-
-#div1 {
-  z-index: 5;
-  margin-bottom: 190px;
-}
-
-#div2 {
-  z-index: 2;
-}
-
-#div3 {
-  z-index: 4;
-  opacity: 1;
-  position: absolute;
-  top: 40px;
-  left: 180px;
-  width: 330px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-  padding: 40px 20px 20px;
-}
-
-#div4, #div5 {
-  border: 1px dashed #996;
-  background-color: #ffc;
-}
-
-#div4 {
-  z-index: 6;
-  margin-bottom: 15px;
-  padding: 25px 10px 5px;
-}
-
-#div5 {
-  z-index: 1;
-  margin-top: 15px;
-  padding: 5px 10px;
-}
-
-#div6 {
-  z-index: 3;
-  position: absolute;
-  top: 20px;
-  left: 180px;
-  width: 150px;
-  height: 125px;
-  border: 1px dashed #009;
-  padding-top: 125px;
-  background-color: #ddf;
-  text-align: ce        }
-
- -

HTML

- -
<div id="div1">
-  <h1>Division Element #1</h1>
-  <code>position: relative;<br/>
-  z-index: 5;</code>
-</div>
-
-<div id="div2">
-  <h1>Division Element #2</h1>
-  <code>position: relative;<br/>
-  z-index: 2;</code>
-</div>
-
-<div id="div3">
-
-  <div id="div4">
-    <h1>Division Element #4</h1>
-    <code>position: relative;<br/>
-    z-index: 6;</code>
-  </div>
-
-  <h1>Division Element #3</h1>
-  <code>position: absolute;<br/>
-  z-index: 4;</code>
-
-  <div id="div5">
-    <h1>Division Element #5</h1>
-    <code>position: relative;<br/>
-    z-index: 1;</code>
-  </div>
-
-  <div id="div6">
-    <h1>Division Element #6</h1>
-    <code>position: absolute;<br/>
-    z-index: 3;</code>
-  </div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple","556","396")}}

- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html deleted file mode 100644 index de0cc3761f..0000000000 --- a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Empilement et éléments flottants -slug: Web/CSS/Comprendre_z-index/Empilement_et_float -tags: - - Avancé - - CSS - - Contextes d’empilement - - Guide - - Ordre d’empilement - - float - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float ---- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
- -

L'empilement et les éléments flottants

- -

Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :

- -
    -
  1. L'arrière-plan et les bordures de l'élément racine du document
    2. -
  2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;
    3. -
  3. Les blocs flottants ;
    4. -
  4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).
    5. -
- -

En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.

- -

Ce comportement peut être expliqué en améliorant la liste précédente :

- -
    -
  1. L'arrière-plan et les bordures de l'élément racine ;
    2. -
  2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
    3. -
  3. Les blocs flottants ;
    4. -
  4. Les éléments « en-ligne » enfants dans le flux normal ;
    5. -
  5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
    6. -
- -
Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
- -

{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}

- -

Code source de l'exemple

- -

HTML

- -
<div id="abs1">
-  <b>DIV #1</b><br />position: absolute;</div>
-
-<div id="flo1">
-  <b>DIV #2</b><br />float: left;</div>
-
-<div id="flo2">
-  <b>DIV #3</b><br />float: right;</div>
-
-<br />
-
-<div id="sta1">
-  <b>DIV #4</b><br />no positioning</div>
-
-<div id="abs2">
-  <b>DIV #5</b><br />position: absolute;</div>
-
- -

CSS

- -
div {
-  padding: 10px;
-  text-align: center;
-}
-
-b {
-  font-family: sans-serif;
-}
-
-#abs1 {
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 10px;
-  right: 140px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#sta1 {
-  height: 100px;
-  border: 1px dashed #996;
-  background-color: #ffc;
-  margin: 0px 10px 0px 10px;
-  text-align: left;
-}
-
-#flo1 {
-  margin: 0px 10px 0px 20px;
-  float: left;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#flo2 {
-  margin: 0px 20px 0px 10px;
-  float: right;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#abs2 {
-  position: absolute;
-  width: 150px;
-  height: 100px;
-  top: 130px;
-  left: 100px;
-  border: 1px dashed #990;
-  background-color: #fdd;
-}
- -

Voir aussi

- - - - - -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html deleted file mode 100644 index db892c51dc..0000000000 --- a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Empilement sans z-index -slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index -tags: - - Avancé - - CSS - - Guide - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index ---- -
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
- -

Empilement sans z-index

- -

Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :

- -
    -
  1. Arrière-plans et bordures de l'élément racine
    2. -
  2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)
    3. -
  3. Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)
    4. -
- -

On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.

- -

Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.

- -
-

Notes :

- -
    -
  • Dans un groupe d'éléments sans aucune propriété z-index, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
    • -
  • Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
    • -
  • Attention : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.
    • -
-
- -

Figure 1. Exemple de règles d'empilement sans propriété z-index

- -

Exemple

- -

HTML

- -
<div id="abs1" class="absolute">
-  <b>DIV #1</b><br />position: absolute;</div>
-<div id="rel1" class="relative">
-  <b>DIV #2</b><br />position: relative;</div>
-<div id="rel2" class="relative">
-  <b>DIV #3</b><br />position: relative;</div>
-<div id="abs2" class="absolute">
-  <b>DIV #4</b><br />position: absolute;</div>
-<div id="sta1" class="static">
-  <b>DIV #5</b><br />position: static;</div>
-
- -

CSS

- -
b {
-  font-family: sans-serif;
-}
-
-div {
-  padding: 10px;
-  border: 1px dashed;
-  text-align: center;
-}
-
-.static {
-  position: static;
-  height: 80px;
-  background-color: #ffc;
-  border-color: #996;
-}
-
-.absolute {
-  position: absolute;
-  width: 150px;
-  height: 350px;
-  background-color: #fdd;
-  border-color: #900;
-  opacity: 0.7;
-}
-
-.relative {
-  position: relative;
-  height: 80px;
-  background-color: #cfc;
-  border-color: #696;
-  opacity: 0.7;
-}
-
-#abs1 {
-  top: 10px;
-  left: 10px;
-}
-
-#rel1 {
-  top: 30px;
-  margin: 0px 50px 0px 50px;
-}
-
-#rel2 {
-  top: 15px;
-  left: 20px;
-  margin: 0px 50px 0px 50px;
-}
-
-#abs2 {
-  top: 10px;
-  right: 10px;
-}
-
-#sta1 {
-  background-color: #ffc;
-  margin: 0px 50px 0px 50px;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple","600","400")}}

- -
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_1/index.html b/files/fr/web/css/comprendre_z-index/exemple_1/index.html deleted file mode 100644 index f155461dd4..0000000000 --- a/files/fr/web/css/comprendre_z-index/exemple_1/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Exemple d'empilement 1 -slug: Web/CSS/Comprendre_z-index/Exemple_1 -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 ---- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
- -

Premier exemple

- -

Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs DIV (DIV #1 et DIV #3), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc DIV #1 il y a un bloc DIV #2 en position absolue, alors que dans le bloc DIV #3 il y a un bloc DIV #4 en position absolue, tout deux également sans propriété z-index.

- -

Le seul et unique contexte d'empilement est le contexte racine. Sans z-index, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.

- -

Figure 5a : Exemple de contexte d'empilement 1

- -

Si on assigne au bloc DIV #2 une valeur de z-index positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.

- -

Figure 5b : Exemple de contexte d'empilement 1

- -

Si maintenant on assigne également au bloc DIV #4 une valeur de z-index positive, plus grande que celle du DIV #2, le bloc DIV #4 est rendu par dessus tous les autres, y compris par dessus le bloc DIV #2.

- -

Figure 5c : Exemple de contexte d'empilement 1

- -

Dans le dernier exemple, vous pouvez voir que les blocs DIV #2 et DIV #4 ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc DIV #4, tout en respectant le bloc DIV #2, peut être contrôlé avec la propriété z-index. Il se fait que les éléments DIV #1 et DIV #3 n'ayant pas de z-index défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs DIV #2 et DIV #3, appartient au contexte d'empilement de la racine.

- -

Dans le contexte d'empilement, les blocs DIV #1 et DIV #3 sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :

- - - -
Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
- -

Exemple

- -

CSS

- -
.bold {
-  font-weight: bold;
-  font: 12px Arial;
-}
-#div1,
-#div3 {
-  height: 80px;
-  position: relative;
-  border: 1px dashed #669966;
-  background-color: #ccffcc;
-  padding-left: 5px;
-}
-
-#div2 {
-  opacity: 0.8;
-  z-index: 1;
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 20px;
-  left: 170px;
-  border: 1px dashed #990000;
-  background-color: #ffdddd;
-  text-align: center;
-}
-
-#div4 {
-  opacity: 0.8;
-  z-index: 2;
-  position: absolute;
-  width: 200px;
-  height: 70px;
-  top: 65px;
-  left: 50px;
-  border: 1px dashed #000099;
-  background-color: #ddddff;
-  text-align: left;
-  padding-left: 10px;
-}
- -

HTML

- -
<div id="div1">
-  <br/>
-  <span class="bold">DIV #1</span>
-  <br/>position: relative;
-  <div id="div2">
-    <br/><span class="bold">DIV #2</span>
-    <br/>position: absolute;
-     <br/>z-index: 1;
-  </div>
-</div>
-
-<br/>
-
-<div id="div3">
-  <b/><span class="bold">DIV #3</span>
-  <br/>position: relative;
-  <div id="div4">
-    <br/><span class="bold">DIV #4</span>
-    <br/>position: absolute;
-    <br/>z-index: 2;
-  </div>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple')}}

- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_2/index.html b/files/fr/web/css/comprendre_z-index/exemple_2/index.html deleted file mode 100644 index 75bbba62d9..0000000000 --- a/files/fr/web/css/comprendre_z-index/exemple_2/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Exemple d'empilement 2 -slug: Web/CSS/Comprendre_z-index/Exemple_2 -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 ---- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
- -

Deuxième exemple

- -

Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.

- -

Figure 6 : Exemple de contexte d'empilement 2

- -

Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.

- -

Ce qui peut apparaitre comme étrange, c'est que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #4 (z-index : 10), malgré leurs valeurs de z-index. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc DIV #4 appartient au contexte d'empilement créé par le bloc DIV #3, et, comme expliqué précédemment, le bloc DIV #3 (et tout son contenu) est au dessous du bloc DIV #2.

- -

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

- - - -
Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
- -

Exemple

- -

CSS

- -
div {
-  font: 12px Arial;
-}
-
-span.bold {
-  font-weight: bold;
-}
-
-#div2 {
-  z-index: 2;
-}
-
-#div3 {
-  z-index: 1;
-}
-
-#div4 {
-  z-index: 10;
-}
-
-#div1,#div3 {
-  height: 80px;
-  position: relative;
-  border: 1px dashed #669966;
-  background-color: #ccffcc;
-  padding-left: 5px;
-}
-
-#div2 {
-  opacity: 0.8;
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 20px;
-  left: 170px;
-  border: 1px dashed #990000;
-  background-color: #ffdddd;
-  text-align: center;
-}
-
-#div4 {
-  opacity: 0.8;
-  position: absolute;
-  width: 200px;
-  height: 70px;
-  top: 65px;
-  left: 50px;
-  border: 1px dashed #000099;
-  background-color: #ddddff;
-  text-align: left;
-  padding-left: 10px;
-}
- -

HTML

- -
<br/>
-
-<div id="div1">
-  <br/><span class="bold">DIV #1</span>
-  <br/>position: relative;
-  <div id="div2">
-    <br/><span class="bold">DIV #2</span>
-    <br/>position: absolute;
-    <br/>z-index: 2;
-  </div>
-</div>
-
-<br/>
-
-<div id="div3">
-  <br/><span class="bold">DIV #3</span>
-  <br/>position: relative;
-  <br/>z-index: 1;
-  <div id="div4">
-    <br/><span class="bold">DIV #4</span>
-    <br/>position: absolute;
-    <br/>z-index: 10;
-  </div>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_3/index.html b/files/fr/web/css/comprendre_z-index/exemple_3/index.html deleted file mode 100644 index 5530887ec2..0000000000 --- a/files/fr/web/css/comprendre_z-index/exemple_3/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Exemple d'empilement 3 -slug: Web/CSS/Comprendre_z-index/Exemple_3 -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 ---- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
- -

Troisième exemple

- -

Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.

- -

Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs DIV positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'id.

- -

Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.

- -

Figure 7 : Exemple de contexte d'empilement 3

- -

Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.

- -

Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un z-index. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.

- -

Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de z-index et que les règles d'empilement par défaut s'appliquent.

- -

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

- - - -

On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de z-index individuelles (et différentes) assignées à l'aide de sélecteurs d'id plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.

- -
Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
- -

Exemple

- -

CSS

- -
div {
-  font: 12px Arial;
-}
-
-span.bold {
-  font-weight: bold;
-}
-
-div.lev1 {
-  width: 250px;
-  height: 70px;
-  position: relative;
-  border: 2px outset #669966;
-  background-color: #ccffcc;
-  padding-left: 5px;
-}
-
-#container1 {
-  z-index: 1;
-  position: absolute;
-  top: 30px;
-  left: 75px;
-}
-
-div.lev2 {
-  opacity: 0.9;
-  width: 200px;
-  height: 60px;
-  position: relative;
-  border: 2px outset #990000;
-  background-color: #ffdddd;
-  padding-left: 5px;
-}
-
-#container2 {
-  z-index: 1;
-  position: absolute;
-  top: 20px;
-  left: 110px;
-}
-
-div.lev3 {
-  z-index: 10;
-  width: 100px;
-  position: relative;
-  border: 2px outset #000099;
-  background-color: #ddddff;
-  padding-left: 5px;
-}
- -

HTML

- -
<br/>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-  <div id="container1">
-    <div class="lev2">
-      <br/><span class="bold">LEVEL #2</span>
-      <br/>z-index: 1;
-      <div id="container2">
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-      </div>
-    </div>
-    <div class="lev2">
-      <br/><span class="bold">LEVEL #2</span>
-      <br/>z-index: 1;
-    </div>
-  </div>
-</div>
-
-<div class="lev1">
-  <span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-  <span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-  <span class="bold">LEVEL #1</span>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/index.html b/files/fr/web/css/comprendre_z-index/index.html deleted file mode 100644 index 0c6c636886..0000000000 --- a/files/fr/web/css/comprendre_z-index/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Comprendre z-index en CSS -slug: Web/CSS/Comprendre_z-index -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---- -

{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

- -

Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

- -
-

Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

-
- -

Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

- -

Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.

- -

z-index peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque z-index est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.

- -

Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.

- -
    -
  1. L'empilement sans z-index : Règles d'empilement par défaut
    2. -
  2. L'empilement et float : Comportement des éléments flottants
    3. -
  3. Ajouter z-index : Utiliser z-index pour modifier l'empilement par défaut
    4. -
  4. L'empilement de couches : Remarques sur l'empilement de couches
    5. -
  5. Exemple d'empilement n°1 : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
    6. -
  6. Exemple d'empilement n°2 : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
    7. -
  7. Exemple d'empilement n°3 : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau
    8. -
- -

{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/computed_value/index.html b/files/fr/web/css/computed_value/index.html new file mode 100644 index 0000000000..356a3f75ba --- /dev/null +++ b/files/fr/web/css/computed_value/index.html @@ -0,0 +1,67 @@ +--- +title: Valeur calculée +slug: Web/CSS/Valeur_calculée +tags: + - CSS + - Reference +translation_of: Web/CSS/computed_value +--- +
{{CSSRef}}
+ +

La valeur calculée d'une propriété CSS est calculée à partir de la valeur définie :

+ +
    +
  1. En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
    2. +
  2. En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.
    3. +
+ +

Les calculs utilisés pour obtenir la valeur calculée correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme em ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes font-size: 16px et padding-top: 2em. La valeur calculée de la propriété padding-top sera 32px (on double la taille de la police).

+ +

Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme width, margin-right, text-indent, et top), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété line-height sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine les valeurs utilisées.

+ +

Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de la valeur spécifiée à la valeur utilisée) est l'héritage, notamment grâce au mot-clé {{cssxref("inherit")}}.

+ +
+

Note : La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie la valeur résolue qui correspond à la valeur calculée ou à la valeur utilisée selon la propriété.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/concepts_viewport/index.html b/files/fr/web/css/concepts_viewport/index.html deleted file mode 100644 index 56143515c0..0000000000 --- a/files/fr/web/css/concepts_viewport/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Concepts relatifs au viewport -slug: Web/CSS/Concepts_viewport -tags: - - CSS - - Guide - - viewport -translation_of: Web/CSS/Viewport_concepts ---- -

{{CSSRef}}

- -

Dans cet article, nous définirons le concept de viewport ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.

- -

Qu'est-ce qu'une zone d'affichage (viewport) ?

- -

Une zone d'affichage (aussi appelée viewport en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.

- -

Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.

- - - -

En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.

- -

Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.

- -

Les dimensions de la zone d'affichage sont modifiables

- -

La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci :

- -
document.documentElement.clientWidth /* 1200 */
-window.innerWidth /* 1200 */
-window.outerWidth /* 1200 */
-
- -
document.documentElement.clientHeight /* 800 */
-window.innerHeight /* 800 */
-window.outerHeight /* 900 */
-
- -

Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :

- - - -

Dans l'exemple précédent, on peut voir que innerWidth et outerWidth ont la même valeur mais que outerHeight mesure 100 pixels de plus que innerHeight. En effet, outerHeight tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de chrome à gauche ou à droite de la fenêtre.

- -

La zone contenu entre innerHeight et innerWidth correspond à la zone d'affichage pour la disposition (layout viewport). Le chrome du navigateur ne fait pas partie de la zone d'affichage.

- -

Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour innerWidth et clientWidth. Les valeurs renvoyées pour outerWidth et outerHeight dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir :

- -
document.documentElement.clientWidth /* 800 */
-window.innerWidth /* 800 */
-window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
-
- -
document.documentElement.clientHeight /* 533 */
-window.innerHeight /* 533 */
-window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
-
- -

La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de la zone d'affichage pour la disposition.

- -
body > header {
-  position: fixed;
-  top: 0;
-}
-body > footer {
-  position: fixed;
-  bottom: 0;
-}
-
- -

On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?

- -

Dans le contexte du Web, on parle de deux zones d'affichage : la zone d'affichage pour la disposition (layout viewport) et la zone d'affichage visuelle (visual viewport). La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.

- -

Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.

- -

La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.

- -

Pour une page contenant des iframes, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.

- -

CSS

- -

La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.

- -

On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un vh correspond à 1% de la hauteur de la zone d'affichage pour la disposition et vw mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.

- -

<iframe>

- -

À l'intérieur d'une iframe, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'iframe et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une iframe mais le document pourra ne pas être visible dans son intégralité.

- -

Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'iframe, 1vh correspondra à 1% de la hauteur de l'iframe et 1vw correspondra à 1% de la largeur du document imbriqué.

- -
iframe {
-  width: 50vw;
-}
-
- -

Si l'iframe est dimensionnée à 50vw, elle mesurera 50% de large des 1200px du document parent (soit 600px). À l'intérieur de cette iframe, 1vw correspondra donc à 6px. Lorsqu'on zoomera, l'iframe se réduira à 400px de large et 1vw correspondra alors à 4px.

- -

Lorsqu'on utilise une requête média à l'intérieur du document de l'iframe, les dimensions utilisées sont relatives à la zone d'affichage de l'iframe.

- -
@media screen and (min-width: 500px) {
-  p {
-    color: red;
-  }
-}
-
- -

Si le fragment de code CSS était inclus dans l'iframe, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.

- -

SVG

- -

Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs width et height de l'élément {{SVGElement("svg")}}.

- -
<svg height="300" width="400"></svg>
- -

Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).

- -

SVG possède un système de coordonnées interne qui est défini grâce à l'attribut viewbox mais qui n'est pas directement lié à la problématique des zones d'affichage.

- -

Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.

- -
@media screen and (min-width: 400px) and (max-width: 500px) {
-  /* styles CSS ici */
-}
- -

Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.

- -

JavaScript

- -

L'API Visual Viewport fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.

- -

Zones d'affichage sur mobiles

- -

Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <meta> suivante :

- -
<meta name="viewport" content="width=device-width">
- -

La propriété width contrôle la taille de la zone d'affichage et on l'utilisera généralement avec device-width qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme maximum-scale, minimum-scale et user-scalable afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.

- -

Voir aussi

- - diff --git a/files/fr/web/css/containing_block/index.html b/files/fr/web/css/containing_block/index.html new file mode 100644 index 0000000000..6269f895b5 --- /dev/null +++ b/files/fr/web/css/containing_block/index.html @@ -0,0 +1,263 @@ +--- +title: À propos du bloc conteneur +slug: Web/CSS/A_Propos_Du_Bloc_Conteneur +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/Containing_block +--- +
{{CSSRef}}
+ +

Le bloc englobant (containing block) affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la zone de contenu de l'ancêtre de bloc le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.

+ +

Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :

+ +
    +
  1. La zone de contenu (content area)
    2. +
  2. La zone de remplissage (padding area)
    3. +
  3. La zone de bordure (border area)
    4. +
  4. La zone de marge (margin area)
    5. +
+ +

Diagram of the box model

+ +
+

Note : Voir cet article pour découvrir le modèle de boîtes en CSS.

+
+ +

On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.

+ +

Les effets du bloc englobant

+ +

Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.

+ +

Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut absolute ou fixed).

+ +

Identifier le bloc englobant

+ +

Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :

+ + + +
+

Note : Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé bloc englobant initial. Ce dernier a les dimensions de la zone d'affichage (viewport) ou de la page (pour les média paginés).

+
+ +

Calcul des pourcentages à partir du bloc englobant

+ +

Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés box model et offset :

+ +
    +
  1. Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.
    2. +
  2. Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (width) du bloc englobant.
    3. +
+ +

Quelques exemples

+ +

Le code HTML utilisé pour les exemples suivants sera :

+ +
<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+
+ +

Premier exemple

+ +

Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Premier_exemple','100%','300')}}

+ +

Deuxième exemple

+ +

Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}} car <section> n'est pas un conteneur de bloc en raison de display: inline et il ne crée pas de contexte de formatage.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Deuxième_exemple','100%','300')}}

+ +

Troisième exemple

+ +

Ici, le bloc englobant du paragraphe est <section> car la propriété position de ce dernier vaut absolute. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait border-box).

+ + + +
body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Troisième_exemple','100%','300')}}

+ +

Quatrième exemple

+ +

Dans cet exemple, la propriété position du paragraphe vaut fixed. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le viewport pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Quatrième_exemple','100%','300')}}

+ +

Cinquième exemple

+ +

Dans cet exemple, la propriété position du paragraphe vaut absolute. Son bloc englobant est donc <section> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas none.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Cinquième_exemple','100%','300')}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html b/files/fr/web/css/contexte_de_formatage_en_ligne/index.html deleted file mode 100644 index bb40bcce6d..0000000000 --- a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Contexte de formatage en ligne (inline/incise) -slug: Web/CSS/Contexte_de_formatage_en_ligne -tags: - - CSS - - Guide -translation_of: Web/CSS/Inline_formatting_context ---- -

{{CSSRef}}

- -

Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (inline formatting context).

- -

Concepts-clés

- -

Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :

- - - -

Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns un contexte de formatage de bloc au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}

- -

Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (line box). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.

- -

Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (padding) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <span> est coupée au passage à la ligne.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}

- -

Les marges, les bordures et le remplissage (padding) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <span> qui a été ajouté.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}

- -
-

Note : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir les propriétés et les valeurs logiques en CSS.

-
- -

Alignement sur la direction de bloc (block)

- -

Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, vertical-align ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser vertical-align afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur top mais vous pouvez le modifier en utilisant middle, bottom ou encore baseline.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}

- -

Alignement le long de la direction en ligne (inline)

- -

S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de text-align afin d'utiliser end.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}

- -

Effets du flottement (float)

- -

Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

- -

Voir aussi

- - 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 ---- -
{{CSSRef}}
- -

Les couleurs CSS (CSS Color 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.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("color")}}
    • -
  • {{cssxref("opacity")}}
    • -
-
- -

Types de donnée

- -
-
    -
  • {{cssxref("<color>")}}
    • -
-
- -

Guide

- -
-
Appliquer des couleurs sur des éléments HTML grâce à CSS
-
Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.
-
- -

Outils

- -
-
Un sélecteur de couleurs
-
Cet outil vous permet de créer, ajuster et manipuler des couleurs.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

Voir aussi

- - diff --git "a/files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" "b/files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" deleted file mode 100644 index df4aa4661c..0000000000 --- "a/files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" +++ /dev/null @@ -1,3235 +0,0 @@ ---- -title: Sélecteur de couleurs CSS -slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPIcker Tool

- -

HTML Content

- -
 <div id="container">
-  <div id="palette" class="block">
-   <div id="color-palette"></div>
-   <div id="color-info">
-    <div class="title">Couleurs CSS </div>
-   </div>
-  </div>
-
-  <div id="picker" class="block">
-   <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
-   <div id="picker-samples" sample-id="master"></div>
-   <div id="controls">
-    <div id="delete">
-     <div id="trash-can"></div>
-    </div>
-    <div id="void-sample" class="icon"></div>
-   </div>
-  </div>
-
-  <div id="canvas" data-tutorial="drop">
-   <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-    data-max="20" data-sensivity="10"></div>
-  </div>
- </div>
-
-
- -

CSS Content

- -
/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-	width: 420px;
-	margin: 0;
-	border: 1px solid #DDD;
-	background-color: #FFF;
-	display: table;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-color-picker .picking-area {
-	width: 198px;
-	height: 198px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: relative;
-	float: left;
-	display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-	cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-	background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background-color: #F00;
-}
-
-.ui-color-picker .picker {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 1px solid #FFF;
-	position: absolute;
-	top: 45%;
-	left: 45%;
-}
-
-.ui-color-picker .picker:before {
-	width: 8px;
-	height: 8px;
-	content: "";
-	position: absolute;
-	border: 1px solid #999;
-	border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-	width: 198px;
-	height: 28px;
-	margin: 5px;
-	border: 1px solid #FFF;
-	float: left;
-}
-
-.ui-color-picker .hue {
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-	border: 1px solid #CCC;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-	width: 2px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-.ui-color-picker .info * {
-	float: left;
-}
-
-.ui-color-picker .input {
-	width: 64px;
-	margin: 5px 2px;
-	float: left;
-}
-
-.ui-color-picker .input .name {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-.ui-color-picker .input input {
-	width: 30px;
-	height: 18px;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #DDD;
-	text-align: center;
-	float: right;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-	display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-	margin-top: 10px;
-	width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > .name {
-	width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > input {
-	float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-	width: auto;
-	float: right;
-	margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > .name {
-	display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > input {
-	width: 90px;
-	height: 24px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-	width: 95px;
-	height: 53px;
-	margin: 5px;
-	margin-top: 10px;
-	border: 1px solid #DDD;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-	float: left;
-	position: relative;
-}
-
-.ui-color-picker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	top: 0;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 0, 0, 0.5);
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-	width: 10px;
-	height: 20px;
-	position: relative;
-	border-radius: 5px 0 0 5px;
-	border: 1px solid #DDD;
-	background-color: #EEE;
-	left: -12px;
-	top: -1px;
-	z-index: 1;
-	transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-	background-color: #CCC;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	box-shadow: 0 0 5px 0 #999;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-[data-resize='both']:hover {
-	cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-	cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-	cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-	display: none;
-}
-
-[data-collapsed='true'] {
-	height: 0 !important;
-}
-
-.block {
-	display: table;
-}
-
-
-/**
- * 	Container
- */
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	display: table;
-}
-
-/**
- * 	Picker Zone
- */
-
-#picker {
-	padding: 10px;
-	width: 980px;
-}
-
-.ui-color-picker {
-	padding: 3px 5px;
-	float: left;
-	border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-	display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-	cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-	width: 375px;
-	height: 114px;
-	max-height: 218px;
-	margin: 0 10px 0 30px;
-	overflow: hidden;
-	position: relative;
-	float: left;
-
-	transition: all 0.2s;
-}
-
-#picker-samples .sample {
-	width: 40px;
-	height: 40px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: absolute;
-	float: left;
-	transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-	border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#picker-samples #add-icon {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-	cursor: pointer;
-	border-color: #DDD;
-	box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-	content: "";
-	position: absolute;
-	background-color: #EEE;
-	box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-	width: 70%;
-	height: 16%;
-	top: 42%;
-	left: 15%;
-}
-
-#picker-samples #add-icon:after {
-	width: 16%;
-	height: 70%;
-	top: 15%;
-	left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-	background-color: #DDD;
-	box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- * 	Controls
- */
-
-#controls {
-	width: 110px;
-	padding: 10px;
-	float: right;
-}
-
-#controls #picker-switch {
-	text-align: center;
-	float: left;
-}
-
-#controls .icon {
-	width: 48px;
-	height: 48px;
-	margin: 10px 0;
-	background-repeat: no-repeat;
-	background-position: center;
-	border: 1px solid #DDD;
-	display: table;
-	float: left;
-}
-
-#controls .icon:hover {
-	cursor: pointer;
-}
-
-#controls .picker-icon {
-	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-	margin-right: 10px;
-	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-	background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-	border-color: #CCC;
-	background-position: center right;
-}
-
-#controls .switch {
-	width: 106px;
-	padding: 1px;
-	border: 1px solid #CCC;
-	font-size: 14px;
-	text-align: center;
-	line-height: 24px;
-	overflow: hidden;
-	float: left;
-}
-
-#controls .switch:hover {
-	cursor: pointer;
-}
-
-#controls .switch > * {
-	width: 50%;
-	padding: 2px 0;
-	background-color: #EEE;
-	float: left;
-}
-
-#controls .switch [data-active='true'] {
-	color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-color: #777;
-}
-
-/**
- * 	Trash Can
- */
-
-#delete {
-	width: 100%;
-	height: 94px;
-	background-color: #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-
-	text-align: center;
-	color: #777;
-
-	position: relative;
-	float: right;
-}
-
-#delete #trash-can {
-	width: 80%;
-	height: 80%;
-	border: 2px dashed #FFF;
-	border-radius: 5px;
-	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-	position: absolute;
-	top: 10%;
-	left: 10%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-	background-color: #999;
-}
-
-/**
- * 	Color Theme
- */
-
-#color-theme {
-	margin: 0 8px 0 0;
-	border: 1px solid #EEE;
-	display: inline-block;
-	float: right;
-}
-
-#color-theme .box {
-	width: 80px;
-	height: 92px;
-	float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-	width: 360px;
-	float: left;
-}
-
-#color-info .title {
-	width: 100%;
-	padding: 15px;
-	font-size: 18px;
-	text-align: center;
-	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-	background-repeat:no-repeat;
-	background-position: center left 28%;
-}
-
-#color-info .copy-container {
-	position: absolute;
-	top: -100%;
-}
-
-#color-info .property {
-	min-width: 280px;
-	height: 30px;
-	margin: 10px 0;
-	text-align: center;
-	line-height: 30px;
-}
-
-#color-info .property > * {
-	float: left;
-}
-
-#color-info .property .type {
-	width: 60px;
-	height: 100%;
-	padding: 0 16px 0 0;
-	text-align: right;
-}
-
-#color-info .property .value {
-	width: 200px;
-	height: 100%;
-	padding: 0 10px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 16px;
-	color: #777;
-	text-align: center;
-	background-color: #FFF;
-	border: none;
-}
-
-#color-info .property .value:hover {
-	color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-	background-position: center right;
-}
-
-#color-info .property .copy {
-	width: 24px;
-	height: 100%;
-	padding: 0 5px;
-	background-color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-	background-repeat: no-repeat;
-	background-position: center left;
-	border-left: 1px solid #EEE;
-	text-align: right;
-	float: left;
-}
-
-#color-info .property .copy:hover {
-	background-position: center right;
-}
-
-
-/**
- * 	Color Palette
- */
-
-#palette {
-	width: 1000px;
-	padding: 10px 0;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	background-color: #EEE;
-	color: #777;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#color-palette {
-	width: 640px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #777;
-	float: left;
-}
-
-#color-palette .container {
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	overflow: hidden;
-	float: left;
-	transition: all 0.5s;
-}
-
-#color-palette .container > * {
-	float: left;
-}
-
-#color-palette .title {
-	width: 100px;
-	padding: 0 10px;
-	text-align: right;
-	line-height: inherit;
-}
-
-#color-palette .palette {
-	width: 456px;
-	height: 38px;
-	margin: 3px;
-	padding: 3px;
-	display: table;
-	background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-	width: 30px;
-	height: 30px;
-	margin: 3px;
-	position: relative;
-	border: 1px solid #DDD;
-	float: left;
-	transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls > * {
-	float: left;
-}
-
-#color-palette .controls > *:hover {
-	cursor: pointer;
-}
-
-#color-palette .controls .lock {
-	width: 24px;
-	height: 24px;
-	margin: 10px;
-	padding: 3px;
-	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-	/*background-image: url('images/unlocked-hover.png');*/
-	background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-	/*background-image: url('images/locked.png');*/
-	background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-	/*background-image: url('images/lock-hover.png');*/
-	background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-	width: 100%;
-	height: 300px;
-	min-height: 250px;
-	border-top: 1px solid #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	position: relative;
-	float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-	text-align: center;
-	font-size: 30px;
-	color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-	content: "Déposez vos couleurs ici";
-	width: 40%;
-	padding: 30px 9% 70px 11%;
-
-	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-	background-repeat: no-repeat;
-	background-position: left 35px top 60%;
-
-	text-align: center;
-
-	border: 3px dashed rgb(221, 221, 221);
-	border-radius: 15px;
-
-	position: absolute;
-	top: 50px;
-	left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-	content: "pour les comparer, les ajuster ou les modifier.";
-	width: 40%;
-	font-size: 24px;
-	position: absolute;
-	top: 130px;
-	left: 32%;
-	z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-	background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-	content: "double click pour activer";
-	width: 80px;
-	color: #FFF;
-	position: absolute;
-	top: 10%;
-	left: 20%;
-	z-index: 2;
-}
-
-#canvas .sample {
-	width: 100px;
-	height: 100px;
-	min-width: 20px;
-	min-height: 20px;
-	position: absolute;
-	border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-	cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#canvas .sample:hover > * {
-	cursor: pointer;
-	display: block !important;
-}
-
-#canvas .sample .resize-handle {
-	display: none;
-}
-
-#canvas .sample .pick {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#canvas .sample .delete {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-	width: 16px;
-	height: 16px;
-	margin: 5px;
-	background: url("images/canvas-controls.png") center left no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-#canvas .toggle-bg:hover {
-	cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-	background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-	height: 20px;
-	margin: 5px;
-	font-size: 16px;
-	position: absolute;
-	opacity: 0;
-	top: -10000px;
-	left: 0;
-	color: #777;
-	float: left;
-	transition: opacity 1s;
-}
-
-#zindex input {
-	border: 1px solid #DDD;
-	font-size: 16px;
-	color: #777;
-}
-
-#zindex .ui-input-slider-info {
-	width: 60px;
-}
-
-#zindex[data-active='true'] {
-	top: 0;
-	opacity: 1;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	var subscribers = [];
-	var pickers = [];
-
-	/**
-	 * RGBA Color class
-	 *
-	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 * @param lightness		0-100
-	 */
-
-	function Color(color) {
-
-		if(color instanceof Color === true) {
-			this.copy(color);
-			return;
-		}
-
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-		this.lightness = 0;
-		this.format = 'HSV';
-	}
-
-	function RGBColor(r, g, b) {
-		var color = new Color();
-		color.setRGBA(r, g, b, 1);
-		return color;
-	}
-
-	function RGBAColor(r, g, b, a) {
-		var color = new Color();
-		color.setRGBA(r, g, b, a);
-		return color;
-	}
-
-	function HSVColor(h, s, v) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		return color;
-	}
-
-	function HSVAColor(h, s, v, a) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		color.a = a;
-		return color;
-	}
-
-	function HSLColor(h, s, l) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		return color;
-	}
-
-	function HSLAColor(h, s, l, a) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		color.a = a;
-		return color;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-		this.format = '' + obj.format;
-		this.lightness = obj.lightness;
-	};
-
-	Color.prototype.setFormat = function setFormat(format) {
-		if (format === 'HSV')
-			this.format = 'HSV';
-		if (format === 'HSL')
-			this.format = 'HSL';
-	};
-
-	/*========== Methods to set Color Properties ==========*/
-
-	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 255);
-	};
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (this.isValidRGBValue(red) === false ||
-			this.isValidRGBValue(green) === false ||
-			this.isValidRGBValue(blue) === false)
-			return;
-
-			this.r = red | 0;
-			this.g = green | 0;
-			this.b = blue | 0;
-
-		if (this.isValidRGBValue(alpha) === true)
-			this.a = alpha | 0;
-	};
-
-	Color.prototype.setByName = function setByName(name, value) {
-		if (name === 'r' || name === 'g' || name === 'b') {
-			if(this.isValidRGBValue(value) === false)
-				return;
-
-			this[name] = value;
-			this.updateHSX();
-		}
-	};
-
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.lightness = lightness;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHue = function setHue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 359)
-			return;
-		this.hue = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setSaturation = function setSaturation(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.saturation = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setValue = function setValue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setLightness = function setLightness(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.lightness = value;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-		this.RGBtoHSV();
-	};
-
-	/*========== Conversion Methods ==========*/
-
-	Color.prototype.convertToHSL = function convertToHSL() {
-		if (this.format === 'HSL')
-			return;
-
-		this.setFormat('HSL');
-		this.RGBtoHSL();
-	};
-
-	Color.prototype.convertToHSV = function convertToHSV() {
-		if (this.format === 'HSV')
-			return;
-
-		this.setFormat('HSV');
-		this.RGBtoHSV();
-	};
-
-	/*========== Update Methods ==========*/
-
-	Color.prototype.updateRGB = function updateRGB() {
-		if (this.format === 'HSV') {
-			this.HSVtoRGB();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.HSLtoRGB();
-			return;
-		}
-	};
-
-	Color.prototype.updateHSX = function updateHSX() {
-		if (this.format === 'HSV') {
-			this.RGBtoHSV();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.RGBtoHSL();
-			return;
-		}
-	};
-
-	Color.prototype.HSVtoRGB = function HSVtoRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.HSLtoRGB = function HSLtoRGB() {
-		var sat = this.saturation / 100;
-		var light = this.lightness / 100;
-		var C = sat * (1 - Math.abs(2 * light - 1));
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = light - C/2;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.RGBtoHSV = function RGBtoHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	};
-
-	Color.prototype.RGBtoHSL = function RGBtoHSL() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-		var lightness = (cmax + cmin) / 2;
-		var X = (1 - Math.abs(2 * lightness - 1));
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / X;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.lightness = (lightness * 100) | 0;
-	};
-
-	/*========== Get Methods ==========*/
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	};
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-		var a = '';
-		var v = '';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'rgb' + a + rgb + v + ')';
-		return value;
-	};
-
-	Color.prototype.getHSLA = function getHSLA() {
-		if (this.format === 'HSV') {
-			var color = new Color(this);
-			color.setFormat('HSL');
-			color.updateHSX();
-			return color.getHSLA();
-		}
-
-		var a = '';
-		var v = '';
-		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'hsl' + a + hsl + v + ')';
-		return value;
-	};
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	};
-
-	/*=======================================================================*/
-	/*=======================================================================*/
-
-	/*========== Capture Mouse Movement ==========*/
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener('mousedown', function(e) {
-			callback(e);
-			document.addEventListener('mousemove', callback);
-		});
-
-		document.addEventListener('mouseup', function(e) {
-			document.removeEventListener('mousemove', callback);
-		});
-	};
-
-	/*====================*/
-	// Color Picker Class
-	/*====================*/
-
-	function ColorPicker(node) {
-		this.color = new Color();
-		this.node = node;
-		this.subscribers = [];
-
-		var type = this.node.getAttribute('data-mode');
-		var topic = this.node.getAttribute('data-topic');
-
-		this.topic = topic;
-		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-		this.color.setFormat(this.picker_mode);
-
-		this.createPickingArea();
-		this.createHueArea();
-
-		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-		this.createAlphaArea();
-
-		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-		this.createPreviewBox();
-		this.createChangeModeButton();
-
-		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-		this.setColor(this.color);
-		pickers[topic] = this;
-	}
-
-	/*************************************************************************/
-	//				Function for generating the color-picker
-	/*************************************************************************/
-
-	ColorPicker.prototype.createPickingArea = function createPickingArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'picking-area';
-		picker.className = 'picker';
-
-		this.picking_area = area;
-		this.color_picker = picker;
-		setMouseTracking(area, this.updateColor.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createHueArea = function createHueArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'hue';
-		picker.className ='slider-picker';
-
-		this.hue_area = area;
-		this.hue_picker = picker;
-		setMouseTracking(area, this.updateHueSlider.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-		var area = document.createElement('div');
-		var mask = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'alpha';
-		mask.className = 'alpha-mask';
-		picker.className = 'slider-picker';
-
-		this.alpha_area = area;
-		this.alpha_mask = mask;
-		this.alpha_picker = picker;
-		setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-		area.appendChild(mask);
-		mask.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-		var preview_box = document.createElement('div');
-		var preview_color = document.createElement('div');
-
-		preview_box.className = 'preview';
-		preview_color.className = 'preview-color';
-
-		this.preview_color = preview_color;
-
-		preview_box.appendChild(preview_color);
-		this.node.appendChild(preview_box);
-	};
-
-	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-		var wrapper = document.createElement('div');
-		var input = document.createElement('input');
-		var info = document.createElement('span');
-
-		wrapper.className = 'input';
-		wrapper.setAttribute('data-topic', topic);
-		info.textContent = title;
-		info.className = 'name';
-		input.setAttribute('type', 'text');
-
-		wrapper.appendChild(info);
-		wrapper.appendChild(input);
-		this.node.appendChild(wrapper);
-
-		input.addEventListener('change', onChangeFunc);
-		input.addEventListener('click', function() {
-			this.select();
-		});
-
-		this.subscribe(topic, function(value) {
-			input.value = value;
-		});
-	};
-
-	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-		var button = document.createElement('div');
-		button.className = 'switch_mode';
-		button.addEventListener('click', function() {
-			if (this.picker_mode === 'HSV')
-				this.setPickerMode('HSL');
-			else
-				this.setPickerMode('HSV');
-
-		}.bind(this));
-
-		this.node.appendChild(button);
-	};
-
-	/*************************************************************************/
-	//					Updates properties of UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updateColor = function updateColor(e) {
-		var x = e.pageX - this.picking_area.offsetLeft;
-		var y = e.pageY - this.picking_area.offsetTop;
-		var picker_offset = 5;
-
-		// width and height should be the same
-		var size = this.picking_area.clientWidth;
-
-		if (x > size) x = size;
-		if (y > size) y = size;
-		if (x < 0) x = 0;
-		if (y < 0) y = 0;
-
-		var value = 100 - (y * 100 / size) | 0;
-		var saturation = x * 100 / size | 0;
-
-		if (this.picker_mode === 'HSV')
-			this.color.setHSV(this.color.hue, saturation, value);
-		if (this.picker_mode === 'HSL')
-			this.color.setHSL(this.color.hue, saturation, value);
-
-		this.color_picker.style.left = x - picker_offset + 'px';
-		this.color_picker.style.top = y - picker_offset + 'px';
-
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('value', value);
-		this.notify('lightness', value);
-		this.notify('saturation', saturation);
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-		var x = e.pageX - this.hue_area.offsetLeft;
-		var width = this.hue_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		// TODO 360 => 359
-		var hue = ((359 * x) / width) | 0;
-		// if (hue === 360) hue = 359;
-
-		this.updateSliderPosition(this.hue_picker, x);
-		this.setHue(hue);
-	};
-
-	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-		var x = e.pageX - this.alpha_area.offsetLeft;
-		var width = this.alpha_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		this.color.a = (x / width).toFixed(2);
-
-		this.updateSliderPosition(this.alpha_picker, x);
-		this.updatePreviewColor();
-
-		this.notify('alpha', this.color.a);
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setHue = function setHue(value) {
-		this.color.setHue(value);
-
-		this.updatePickerBackground();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-		this.notify('hue', this.color.hue);
-
-		notify(this.topic, this.color);
-	};
-
-	// Updates when one of Saturation/Value/Lightness changes
-	ColorPicker.prototype.updateSLV = function updateSLV() {
-		this.updatePickerPosition();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	/*************************************************************************/
-	//				Update positions of various UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-		var size = this.picking_area.clientWidth;
-		var value = 0;
-		var offset = 5;
-
-		if (this.picker_mode === 'HSV')
-			value = this.color.value;
-		if (this.picker_mode === 'HSL')
-			value = this.color.lightness;
-
-		var x = (this.color.saturation * size / 100) | 0;
-		var y = size - (value * size / 100) | 0;
-
-		this.color_picker.style.left = x - offset + 'px';
-		this.color_picker.style.top = y - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-		elem.style.left = Math.max(pos - 3, -2) + 'px';
-	};
-
-	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-		var size = this.hue_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.hue * size / 360 ) | 0;
-		this.hue_picker.style.left = pos - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-		var size = this.alpha_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.a * size) | 0;
-		this.alpha_picker.style.left = pos - offset + 'px';
-	};
-
-	/*************************************************************************/
-	//						Update background colors
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-		var nc = new Color(this.color);
-		nc.setHSV(nc.hue, 100, 100);
-		this.picking_area.style.backgroundColor = nc.getHexa();
-	};
-
-	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-		this.alpha_mask.style.backgroundColor = this.color.getHexa();
-	};
-
-	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-		this.preview_color.style.backgroundColor = this.color.getColor();
-	};
-
-	/*************************************************************************/
-	//						Update input elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-		var value = parseInt(e.target.value);
-		this.setHue(value);
-		this.updateHuePicker();
-	};
-
-	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-		var value = parseInt(e.target.value);
-		this.color.setSaturation(value);
-		e.target.value = this.color.saturation;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setValue(value);
-		e.target.value = this.color.value;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-		var value = parseInt(e.target.value);
-		this.color.setLightness(value);
-		e.target.value = this.color.lightness;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('r', value);
-		e.target.value = this.color.r;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('g', value);
-		e.target.value = this.color.g;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('b', value);
-		e.target.value = this.color.b;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-		var value = parseFloat(e.target.value);
-
-		if (typeof value === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 1)
-			this.color.a = value.toFixed(2);
-
-		e.target.value = this.color.a;
-		this.updateAlphaPicker();
-	};
-
-	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-		var value = e.target.value;
-		this.color.setHexa(value);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//							Internal Pub/Sub
-	/*************************************************************************/
-
-	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-		this.subscribers[topic] = callback;
-	};
-
-	ColorPicker.prototype.notify = function notify(topic, value) {
-		if (this.subscribers[topic])
-			this.subscribers[topic](value);
-	};
-
-	/*************************************************************************/
-	//							Set Picker Properties
-	/*************************************************************************/
-
-	ColorPicker.prototype.setColor = function setColor(color) {
-		if(color instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		if (color.format !== this.picker_mode) {
-			color.setFormat(this.picker_mode);
-			color.updateHSX();
-		}
-
-		this.color.copy(color);
-		this.updateHuePicker();
-		this.updatePickerPosition();
-		this.updatePickerBackground();
-		this.updateAlphaPicker();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-
-		this.notify('hue', this.color.hue);
-		this.notify('saturation', this.color.saturation);
-		this.notify('value', this.color.value);
-		this.notify('lightness', this.color.lightness);
-
-		this.notify('alpha', this.color.a);
-		this.notify('hexa', this.color.getHexa());
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' && mode !== 'HSL')
-			return;
-
-		this.picker_mode = mode;
-		this.node.setAttribute('data-mode', this.picker_mode);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//								UNUSED
-	/*************************************************************************/
-
-	var setPickerMode = function setPickerMode(topic, mode) {
-		if (pickers[topic])
-			pickers[topic].setPickerMode(mode);
-	};
-
-	var setColor = function setColor(topic, color) {
-		if (pickers[topic])
-			pickers[topic].setColor(color);
-	};
-
-	var getColor = function getColor(topic) {
-		if (pickers[topic])
-			return new Color(pickers[topic].color);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(callback) {
-		subscribers.indexOf(callback);
-		subscribers.splice(index, 1);
-	};
-
-	var notify = function notify(topic, value) {
-		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-			return;
-
-		var color = new Color(value);
-		for (var i in subscribers[topic])
-			subscribers[topic][i](color);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-color-picker');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new ColorPicker(elem[i]);
-	};
-
-	return {
-		init : init,
-		Color : Color,
-		RGBColor : RGBColor,
-		RGBAColor : RGBAColor,
-		HSVColor : HSVColor,
-		HSVAColor : HSVAColor,
-		HSLColor : HSLColor,
-		HSLAColor : HSLAColor,
-		setColor : setColor,
-		getColor : getColor,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPickerMode : setPickerMode
-	};
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-	ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-	/*========== Get DOM Element By ID ==========*/
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	function allowDropEvent(e) {
-		e.preventDefault();
-	}
-
-	/*========== Make an element resizable relative to it's parent ==========*/
-
-	var UIComponent = (function UIComponent() {
-
-		function makeResizable(elem, axis) {
-			var valueX = 0;
-			var valueY = 0;
-			var action = 0;
-
-			var resizeStart = function resizeStart(e) {
-				e.stopPropagation();
-				e.preventDefault();
-				if (e.button !== 0)
-					return;
-
-				valueX = e.clientX - elem.clientWidth;
-				valueY = e.clientY - elem.clientHeight;
-
-				document.body.setAttribute('data-resize', axis);
-				document.addEventListener('mousemove', mouseMove);
-				document.addEventListener('mouseup', resizeEnd);
-			};
-
-			var mouseMove = function mouseMove(e) {
-				if (action >= 0)
-					elem.style.width = e.clientX - valueX + 'px';
-				if (action <= 0)
-					elem.style.height = e.clientY - valueY + 'px';
-			};
-
-			var resizeEnd = function resizeEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.body.removeAttribute('data-resize', axis);
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('mouseup', resizeEnd);
-			};
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			if (axis === 'width') action = 1;
-			else if (axis === 'height') action = -1;
-			else axis = 'both';
-
-			handle.className = 'resize-handle';
-			handle.setAttribute('data-resize', axis);
-			handle.addEventListener('mousedown', resizeStart);
-			elem.appendChild(handle);
-		};
-
-		/*========== Make an element draggable relative to it's parent ==========*/
-
-		var makeDraggable = function makeDraggable(elem, endFunction) {
-
-			var offsetTop;
-			var offsetLeft;
-
-			elem.setAttribute('data-draggable', 'true');
-
-			var dragStart = function dragStart(e) {
-				e.preventDefault();
-				e.stopPropagation();
-
-				if (e.target.getAttribute('data-draggable') !== 'true' ||
-					e.target !== elem || e.button !== 0)
-					return;
-
-				offsetLeft = e.clientX - elem.offsetLeft;
-				offsetTop = e.clientY - elem.offsetTop;
-
-				document.addEventListener('mousemove', mouseDrag);
-				document.addEventListener('mouseup', dragEnd);
-			};
-
-			var dragEnd = function dragEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.removeEventListener('mousemove', mouseDrag);
-				document.removeEventListener('mouseup', dragEnd);
-			};
-
-			var mouseDrag = function mouseDrag(e) {
-				elem.style.left = e.clientX - offsetLeft + 'px';
-				elem.style.top = e.clientY - offsetTop + 'px';
-			};
-
-			elem.addEventListener('mousedown', dragStart, false);
-		};
-
-		return {
-			makeResizable : makeResizable,
-			makeDraggable : makeDraggable
-		};
-
-	})();
-
-	/*========== Color Class ==========*/
-
-	var Color = UIColorPicker.Color;
-	var HSLColor = UIColorPicker.HSLColor;
-
-	/**
-	 * ColorPalette
-	 */
-	var ColorPalette = (function ColorPalette() {
-
-		var samples = [];
-		var color_palette;
-		var complementary;
-
-		var hideNode = function(node) {
-			node.setAttribute('data-hidden', 'true');
-		};
-
-		var ColorSample = function ColorSample(id) {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = new Color();
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('click', this.pickColor.bind(this));
-
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-			this.color.copy(color);
-			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue < 0) hue += 360;
-			this.color.setHue(hue);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-			var saturation = color.saturation + value * steps;
-			if (saturation <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setSaturation(saturation);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-			var lightness = color.lightness + value * steps;
-			if (lightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setLightness(lightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-			var brightness = color.value + value * steps;
-			if (brightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setValue(brightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.a = parseFloat(alpha.toFixed(2));
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.pickColor = function pickColor() {
-			UIColorPicker.setColor('picker', this.color);
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'palette-samples');
-		};
-
-		var Palette = function Palette(text, size) {
-			this.samples = [];
-			this.locked = false;
-
-			var palette = document.createElement('div');
-			var title = document.createElement('div');
-			var controls = document.createElement('div');
-			var container = document.createElement('div');
-			var lock = document.createElement('div');
-
-			container.className = 'container';
-			title.className = 'title';
-			palette.className = 'palette';
-			controls.className = 'controls';
-			lock.className = 'lock';
-			title.textContent = text;
-
-			controls.appendChild(lock);
-			container.appendChild(title);
-			container.appendChild(controls);
-			container.appendChild(palette);
-
-			lock.addEventListener('click', function () {
-				this.locked = !this.locked;
-				lock.setAttribute('locked-state', this.locked);
-			}.bind(this));
-
-			for(var i = 0; i < size; i++) {
-				var sample = new ColorSample();
-				this.samples.push(sample);
-				palette.appendChild(sample.node);
-			}
-
-			this.container = container;
-			this.title = title;
-		};
-
-		var createHuePalette = function createHuePalette() {
-			var palette = new Palette('Teinte', 12);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 12; i++) {
-					palette.samples[i].updateHue(color, 30, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var createSaturationPalette = function createSaturationPalette() {
-			var palette = new Palette('Saturation', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 11; i++) {
-					palette.samples[i].updateSaturation(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		/* Brightness or Lightness - depends on the picker mode */
-		var createVLPalette = function createSaturationPalette() {
-			var palette = new Palette('Lightness', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				if(color.format === 'HSL') {
-					palette.title.textContent = 'Luminosité';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateLightness(color, -10, i);
-				}
-				else {
-					palette.title.textContent = 'Valeur';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateBrightness(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var isBlankPalette = function isBlankPalette(container, value) {
-			if (value === 0) {
-				container.setAttribute('data-collapsed', 'true');
-				return true;
-			}
-
-			container.removeAttribute('data-collapsed');
-			return false;
-		};
-
-		var createAlphaPalette = function createAlphaPalette() {
-			var palette = new Palette('Alpha', 10);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 10; i++) {
-					palette.samples[i].updateAlpha(color, -0.1, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var init = function init() {
-			color_palette = getElemById('color-palette');
-
-			createHuePalette();
-			createSaturationPalette();
-			createVLPalette();
-			createAlphaPalette();
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor
-		};
-
-	})();
-
-	/**
-	 * ColorInfo
-	 */
-	var ColorInfo = (function ColorInfo() {
-
-		var info_box;
-		var select;
-		var RGBA;
-		var HEXA;
-		var HSLA;
-
-		var updateInfo = function updateInfo(color) {
-			if (color.a | 0 === 1) {
-				RGBA.info.textContent = 'RGB';
-				HSLA.info.textContent = 'HSL';
-			}
-			else {
-				RGBA.info.textContent = 'RGBA';
-				HSLA.info.textContent = 'HSLA';
-			}
-
-			RGBA.value.value = color.getRGBA();
-			HSLA.value.value = color.getHSLA();
-			HEXA.value.value = color.getHexa();
-		};
-
-		var InfoProperty = function InfoProperty(info) {
-
-			var node = document.createElement('div');
-			var title = document.createElement('div');
-			var value = document.createElement('input');
-			var copy = document.createElement('div');
-
-			node.className = 'property';
-			title.className = 'type';
-			value.className = 'value';
-			copy.className = 'copy';
-
-			title.textContent = info;
-			value.setAttribute('type', 'text');
-
-			copy.addEventListener('click', function() {
-				value.select();
-			});
-
-			node.appendChild(title);
-			node.appendChild(value);
-			node.appendChild(copy);
-
-			this.node = node;
-			this.value = value;
-			this.info = title;
-
-			info_box.appendChild(node);
-		};
-
-		var init = function init() {
-
-			info_box = getElemById('color-info');
-
-			RGBA = new InfoProperty('RGBA');
-			HSLA = new InfoProperty('HSLA');
-			HEXA = new InfoProperty('HEXA');
-
-			UIColorPicker.subscribe('picker', updateInfo);
-
-		};
-
-		return {
-			init: init
-		};
-
-	})();
-
-	/**
-	 * ColorPicker Samples
-	 */
-	var ColorPickerSamples = (function ColorPickerSamples() {
-
-		var samples = [];
-		var nr_samples = 0;
-		var active = null;
-		var container = null;
-		var	samples_per_line = 10;
-		var trash_can = null;
-		var base_color = new HSLColor(0, 50, 100);
-		var add_btn;
-		var add_btn_pos;
-
-		var ColorSample = function ColorSample() {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.index = nr_samples++;
-			this.node = node;
-			this.color = new Color(base_color);
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('dragover' , allowDropEvent);
-			node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-			this.updatePosition(this.index);
-			this.updateBgColor();
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updatePosition = function updatePosition(index) {
-			this.index = index;
-			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-			this.node.style.top  = this.posY + 'px';
-			this.node.style.left = this.posX + 'px';
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.activate = function activate() {
-			UIColorPicker.setColor('picker', this.color);
-			this.node.setAttribute('data-active', 'true');
-		};
-
-		ColorSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'picker-samples');
-		};
-
-		ColorSample.prototype.dragDrop = function dragDrop(e) {
-			e.stopPropagation();
-			this.color = Tool.getSampleColorFrom(e);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.deleteSample = function deleteSample() {
-			container.removeChild(this.node);
-			samples[this.uid] = null;
-			nr_samples--;
-		};
-
-		var updateUI = function updateUI() {
-			updateContainerProp();
-
-			var index = 0;
-			var nr = samples.length;
-			for (var i=0; i < nr; i++)
-				if (samples[i] !== null) {
-					samples[i].updatePosition(index);
-					index++;
-				}
-
-			AddSampleButton.updatePosition(index);
-		};
-
-		var deleteSample = function deleteSample(e) {
-			trash_can.parentElement.setAttribute('drag-state', 'none');
-
-			var location = e.dataTransfer.getData('location');
-			if (location !== 'picker-samples')
-				return;
-
-			var sampleID = e.dataTransfer.getData('sampleID');
-			samples[sampleID].deleteSample();
-			console.log(samples);
-
-			updateUI();
-		};
-
-		var createDropSample = function createDropSample() {
-			var sample = document.createElement('div');
-			sample.id = 'drop-effect-sample';
-			sample.className = 'sample';
-			container.appendChild(sample);
-		};
-
-		var setActivateSample = function setActivateSample(e) {
-			if (e.target.className !== 'sample')
-				return;
-
-			unsetActiveSample(active);
-			Tool.unsetVoidSample();
-			CanvasSamples.unsetActiveSample();
-			active = samples[e.target.getAttribute('sample-id')];
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var updateContainerProp = function updateContainerProp() {
-			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-			container.style.height = height + 10 + 'px';
-		};
-
-		var AddSampleButton = (function AddSampleButton() {
-			var node;
-			var _index = 0;
-			var _posX;
-			var _posY;
-
-			var updatePosition = function updatePosition(index) {
-				_index = index;
-				_posY = 5 + ((index / samples_per_line) | 0) * 52;
-				_posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-				node.style.top  = _posY + 'px';
-				node.style.left = _posX + 'px';
-			};
-
-			var addButtonClick = function addButtonClick() {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-				updatePosition(_index + 1);
-				updateUI();
-			};
-
-			var init = function init() {
-				node = document.createElement('div');
-				var icon = document.createElement('div');
-
-				node.className = 'sample';
-				icon.id = 'add-icon';
-				node.appendChild(icon);
-				node.addEventListener('click', addButtonClick);
-
-				updatePosition(0);
-				container.appendChild(node);
-			};
-
-			return {
-				init : init,
-				updatePosition : updatePosition
-			};
-		})();
-
-		var init = function init() {
-			container = getElemById('picker-samples');
-			trash_can = getElemById('trash-can');
-
-			AddSampleButton.init();
-
-			for (var i=0; i<16; i++) {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-			}
-
-			AddSampleButton.updatePosition(samples.length);
-			updateUI();
-
-			active = samples[0];
-			active.activate();
-
-			container.addEventListener('click', setActivateSample);
-
-			trash_can.addEventListener('dragover', allowDropEvent);
-			trash_can.addEventListener('dragenter', function() {
-				this.parentElement.setAttribute('drag-state', 'enter');
-			});
-			trash_can.addEventListener('dragleave', function(e) {
-				this.parentElement.setAttribute('drag-state', 'none');
-			});
-			trash_can.addEventListener('drop', deleteSample);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)
-					active.updateColor(color);
-			});
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	/**
-	 * Canvas Samples
-	 */
-	var CanvasSamples = (function CanvasSamples() {
-
-		var active = null;
-		var canvas = null;
-		var samples = [];
-		var zindex = null;
-		var tutorial = true;
-
-		var CanvasSample = function CanvasSample(color, posX, posY) {
-
-			var node = document.createElement('div');
-			var pick = document.createElement('div');
-			var delete_btn = document.createElement('div');
-			node.className = 'sample';
-			pick.className = 'pick';
-			delete_btn.className = 'delete';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = color;
-			this.updateBgColor();
-			this.zIndex = 1;
-
-			node.style.top = posY - 50 + 'px';
-			node.style.left = posX - 50 + 'px';
-			node.setAttribute('sample-id', this.uid);
-
-			node.appendChild(pick);
-			node.appendChild(delete_btn);
-
-			var activate = function activate() {
-				setActiveSample(this);
-			}.bind(this);
-
-			node.addEventListener('dblclick', activate);
-			pick.addEventListener('click', activate);
-			delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-			UIComponent.makeDraggable(node);
-			UIComponent.makeResizable(node);
-
-			samples.push(this);
-			canvas.appendChild(node);
-			return this;
-		};
-
-		CanvasSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		CanvasSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-			this.zIndex = value;
-			this.node.style.zIndex = value;
-		};
-
-		CanvasSample.prototype.activate = function activate() {
-			this.node.setAttribute('data-active', 'true');
-			zindex.setAttribute('data-active', 'true');
-
-			UIColorPicker.setColor('picker', this.color);
-			InputSliderManager.setValue('z-index', this.zIndex);
-		};
-
-		CanvasSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-			zindex.removeAttribute('data-active');
-		};
-
-		CanvasSample.prototype.deleteSample = function deleteSample() {
-			if (active === this)
-				unsetActiveSample();
-			canvas.removeChild(this.node);
-			samples[this.uid] = null;
-		};
-
-		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-			this.node.style.top = posY - this.startY + 'px';
-			this.node.style.left = posX - this.startX + 'px';
-		};
-
-		var canvasDropEvent = function canvasDropEvent(e) {
-			var color = Tool.getSampleColorFrom(e);
-
-			if (color) {
-				var offsetX = e.pageX - canvas.offsetLeft;
-				var offsetY = e.pageY - canvas.offsetTop;
-				var sample = new CanvasSample(color, offsetX, offsetY);
-				if (tutorial) {
-					tutorial = false;
-					canvas.removeAttribute('data-tutorial');
-					var info = new CanvasSample(new Color(), 100, 100);
-					info.node.setAttribute('data-tutorial', 'dblclick');
-				}
-			}
-
-		};
-
-		var setActiveSample = function setActiveSample(sample) {
-			ColorPickerSamples.unsetActiveSample();
-			Tool.unsetVoidSample();
-			unsetActiveSample();
-			active = sample;
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var createToggleBgButton = function createToggleBgButton() {
-			var button = document.createElement('div');
-			var state = false;
-			button.className = 'toggle-bg';
-			canvas.appendChild(button);
-
-			button.addEventListener('click', function() {
-				console.log(state);
-				state = !state;
-				canvas.setAttribute('data-bg', state);
-			});
-		};
-
-		var init = function init() {
-			canvas = getElemById('canvas');
-			zindex = getElemById('zindex');
-
-			canvas.addEventListener('dragover', allowDropEvent);
-			canvas.addEventListener('drop', canvasDropEvent);
-
-			createToggleBgButton();
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)	active.updateColor(color);
-			});
-
-			InputSliderManager.subscribe('z-index', function (value) {
-				if (active)	active.updateZIndex(value);
-			});
-
-			UIComponent.makeResizable(canvas, 'height');
-		};
-
-		return {
-			init : init,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	var StateButton = function StateButton(node, state) {
-		this.state = false;
-		this.callback = null;
-
-		node.addEventListener('click', function() {
-			this.state = !this.state;
-			if (typeof this.callback === "function")
-				this.callback(this.state);
-		}.bind(this));
-	};
-
-	StateButton.prototype.set = function set() {
-		this.state = true;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.unset = function unset() {
-		this.state = false;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.subscribe = function subscribe(func) {
-		this.callback = func;
-	};
-
-
-	/**
-	 * Tool
-	 */
-	var Tool = (function Tool() {
-
-		var samples = [];
-		var controls = null;
-		var void_sw;
-
-		var createPickerModeSwitch = function createPickerModeSwitch() {
-			var parent = getElemById('controls');
-			var icon = document.createElement('div');
-			var button = document.createElement('div');
-			var hsv = document.createElement('div');
-			var hsl = document.createElement('div');
-			var active = null;
-
-			icon.className = 'icon picker-icon';
-			button.className = 'switch';
-			button.appendChild(hsv);
-			button.appendChild(hsl);
-
-			hsv.textContent = 'HSV';
-			hsl.textContent = 'HSL';
-
-			active = hsl;
-			active.setAttribute('data-active', 'true');
-
-			function switchPickingModeTo(elem) {
-				active.removeAttribute('data-active');
-				active = elem;
-				active.setAttribute('data-active', 'true');
-				UIColorPicker.setPickerMode('picker', active.textContent);
-			};
-
-			var picker_sw = new StateButton(icon);
-			picker_sw.subscribe(function() {
-				if (active === hsv)
-					switchPickingModeTo(hsl);
-				else
-					switchPickingModeTo(hsv);
-			});
-
-			hsv.addEventListener('click', function() {
-				switchPickingModeTo(hsv);
-			});
-			hsl.addEventListener('click', function() {
-				switchPickingModeTo(hsl);
-			});
-
-			parent.appendChild(icon);
-			parent.appendChild(button);
-		};
-
-		var setPickerDragAndDrop = function setPickerDragAndDrop() {
-			var preview = document.querySelector('#picker .preview-color');
-			var picking_area = document.querySelector('#picker .picking-area');
-
-			preview.setAttribute('draggable', 'true');
-			preview.addEventListener('drop', drop);
-			preview.addEventListener('dragstart', dragStart);
-			preview.addEventListener('dragover', allowDropEvent);
-
-			picking_area.addEventListener('drop', drop);
-			picking_area.addEventListener('dragover', allowDropEvent);
-
-			function drop(e) {
-				var color = getSampleColorFrom(e);
-				UIColorPicker.setColor('picker', color);
-			};
-
-			function dragStart(e) {
-				e.dataTransfer.setData('sampleID', 'picker');
-				e.dataTransfer.setData('location', 'picker');
-			};
-		};
-
-		var getSampleColorFrom = function getSampleColorFrom(e) {
-			var sampleID = e.dataTransfer.getData('sampleID');
-			var location = e.dataTransfer.getData('location');
-
-			if (location === 'picker')
-				return UIColorPicker.getColor(sampleID);
-			if (location === 'picker-samples')
-				return ColorPickerSamples.getSampleColor(sampleID);
-			if (location === 'palette-samples')
-				return ColorPalette.getSampleColor(sampleID);
-		};
-
-		var setVoidSwitch = function setVoidSwitch() {
-			var void_sample = getElemById('void-sample');
-			void_sw = new StateButton(void_sample);
-			void_sw.subscribe( function (state) {
-				void_sample.setAttribute('data-active', state);
-				if (state === true) {
-					ColorPickerSamples.unsetActiveSample();
-					CanvasSamples.unsetActiveSample();
-				}
-			});
-		};
-
-		var unsetVoidSample = function unsetVoidSample() {
-			void_sw.unset();
-		};
-
-		var init = function init() {
-			controls = getElemById('controls');
-
-			var color = new Color();
-			color.setHSL(0, 51, 51);
-			UIColorPicker.setColor('picker', color);
-
-			setPickerDragAndDrop();
-			createPickerModeSwitch();
-			setVoidSwitch();
-		};
-
-		return {
-			init : init,
-			unsetVoidSample : unsetVoidSample,
-			getSampleColorFrom : getSampleColorFrom
-		};
-
-	})();
-
-	var init = function init() {
-		UIColorPicker.init();
-		InputSliderManager.init();
-		ColorInfo.init();
-		ColorPalette.init();
-		ColorPickerSamples.init();
-		CanvasSamples.init();
-		Tool.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- - -
{{CSSRef}}
- -

Cet outil vous permet de définir des couleurs web personnalisées.

- -

L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé RGB en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé HSL en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).

- -

Chaque couleur est prédéfinie dans les 3 formats standard CSS.

- -

En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).

- -

Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).

- -

{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_animated_properties/index.html b/files/fr/web/css/css_animated_properties/index.html new file mode 100644 index 0000000000..e3927a94d8 --- /dev/null +++ b/files/fr/web/css/css_animated_properties/index.html @@ -0,0 +1,17 @@ +--- +title: Liste des propriétés CSS animées +slug: Web/CSS/Liste_propriétés_CSS_animées +tags: + - Animations + - CSS + - Reference + - Transitions +translation_of: Web/CSS/CSS_animated_properties +--- +
{{CSSRef}}
+ +

Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux animations CSS ou aux transitions CSS.

+ +

Voici la liste des propriétés qui peuvent être animées :

+ +

{{CSSAnimatedProperties}}

diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..a2cb1bd5a3 --- /dev/null +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,99 @@ +--- +title: Détecter la prise en charge des animations CSS +slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS +tags: + - Avancé + - CSS + - Obsolete +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +
{{CSSRef}}{{obsolete_header}}
+ +
+

Attention ! Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.

+
+ +

Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, basé sur ce billet de Christian Heilmann, illustre une technique pour détecter la prise en charge des animations CSS.

+ +

Détecter la prise en charge des animations CSS

+ +

Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :

+ +
var animation = false,
+  animationstring = 'animation',
+  keyframeprefix = '',
+  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+  pfx  = '',
+  elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant animation avec false. On utilise la chaîne de caractères animationstring avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable pfx qu'on définit pour le moment avec la chaîne vide.

+ +

Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable elem. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.

+ +

Si le navigateur ne prend pas en charge la version sans préfixe et que animation vaut toujours false, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de AnimationName de la même façon.

+ +

Une fois que ce code a fini son exécution, la valeur de animation sera false si les animations ne sont pas prises en charge ou true si animation est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le camelCase (ex. MozAnimation) et les tirets (-moz-x).

+ +

Appliquer des animations avec la bonne syntaxe selon le navigateur

+ +

Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :

+ +
if( animation === false ) {
+
+  // on utilise JavaScript en fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Ce code utilise la valeur d'animation : si c'est false, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.

+ +

Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/keyframes car elles n'utilisent pas la syntaxe CSS traditionnelle.

+ +

Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable keyframes qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.

+ +

Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).

+ +

S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.

+ +

Voir dans JSFiddle

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html new file mode 100644 index 0000000000..acc7ab6997 --- /dev/null +++ b/files/fr/web/css/css_animations/index.html @@ -0,0 +1,81 @@ +--- +title: Les animations CSS +slug: Web/CSS/Animations_CSS +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Animations +--- +
{{CSSRef}}
+ +

Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+
+ +

Règles @ CSS

+ +
+
    +
  • {{cssxref("@keyframes")}}
    • +
+
+ +

Guides

+ +
+
Détecter la prise en charge des animations CSS
+
Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.
+
Manipuler les animations CSS
+
Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.
+
Conseils pour les animations CSS
+
Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Propriété animation

+ + + +

{{Compat("css.properties.animation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..bb79f19722 --- /dev/null +++ b/files/fr/web/css/css_animations/tips/index.html @@ -0,0 +1,165 @@ +--- +title: Trucs et astuces pour les animations CSS +slug: Web/CSS/Animations_CSS/Conseils +tags: + - Animations CSS + - CSS + - Exemple + - Guide + - Tutoriel +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{CSSRef}}
+ +

Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.

+ +

Relancer une animation

+ +

La spécifications des animations CSS ne permet pas de relancer une animation. Il n'existe pas de méthode resetAnimation() qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur "running". Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.

+ +

CSS

+ +

Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

On a deux classes qui sont définies. La classe box qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe changing qui indique que les {{cssxref("@keyframes")}} intitulées colorchange doivent être utilisées sur une période de deux secondes afin d'animer la boîte.

+ +

Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.

+ +

HTML

+ +

Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.

+ +
<div class="box">
+</div>
+
+<div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
+ +

JavaScript

+ +

Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction play() qui est appelée lorsque l'utilisateur clique sur le bouton.

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.

+ +

Voici ce qui se produit lorsque la fonction play() est appelée :

+ +
    +
  1. On réinitialise la liste des classes CSS de la boîte avec uniquement box. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe changing en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.
    2. +
  2. Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (callback). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…
    3. +
  3. Notre fonction de rappel invoque à nouveau requestAnimationFrame() ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe changing à la boîte afin que l'animation soit lancée lors du rafraîchissement.
    4. +
+ +

Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

Résultat

+ +

{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}

+ +

Arrêter une animation

+ +

Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :

+ +
    +
  1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur  animation-direction: alternate. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.
    2. +
  2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement animationiteration se déclenche.
    3. +
+ +

Ces pistes sont utilisées dans la démonstration suivante :

+ +

CSS

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +

HTML

+ +
<h1 id="watchme">Cliquer pour arrêter</h1>
+
+ +

JavaScript

+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

Résultat

+ +

{{EmbedLiveSample("Arrêter_une_animation")}}

+ +

Voir cette démo

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/using_css_animations/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..4010492e3d --- /dev/null +++ b/files/fr/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,363 @@ +--- +title: Utiliser les animations CSS +slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS +tags: + - Avancé + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +
{{CSSRef}}
+ +

Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (keyframes) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.

+ +

Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :

+ +
    +
  1. On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.
    2. +
  2. Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le frame-skipping) afin que le résultat obtenu soit aussi fluide que possible.
    3. +
  3. En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.
    4. +
+ +

Paramétrer l'animation

+ +

Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.

+ +

Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :

+ +
+
{{cssxref("animation-delay")}}
+
Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.
+
{{cssxref("animation-direction")}}
+
Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.
+
{{cssxref("animation-duration")}}
+
Cette propriété définit la durée d'un cycle de l'animation.
+
{{cssxref("animation-fill-mode")}}
+
Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.
+
{{cssxref("animation-iteration-count")}}
+
Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.
+
{{cssxref("animation-name")}}
+
Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.
+
{{cssxref("animation-play-state")}}
+
Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
+
{{cssxref("animation-timing-function")}}
+
Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.
+
+ +

Définir les étapes composant une animation (@keyframes)

+ +

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.

+ +

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0% ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.

+ +

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.

+ +

Exemples

+ +
Note : Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « live » ne fonctionnera pas.
+ +

Utiliser une animation pour que le texte traverse la fenêtre du navigateur

+ +

Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran

+ +

On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}:hidden sur ce conteneur.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera slidein.

+ +

Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.

+ +

Les étapes (keyframes) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias from). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.

+ +

La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias to). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +
+

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

+
+ +

{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}

+ +

Ajouter une autre étape

+ +

Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ @keyframes :

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.

+ +
+

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

+
+ +

{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}

+ +

Répéter une animation

+ +

Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur infinite pour que l'animation se répète à l'infini :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Répéter_une_animation","100%","250")}}

+ +

Obtenir un effet aller-retour

+ +

On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur alternate :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}

+ +

Utiliser la propriété raccourcie animation

+ +

La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +

On peut la réécrire de façon plus concise :

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

Note : Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.

+
+ +

Utiliser plusieurs valeurs pour différentes animations

+ +

Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.

+ +

Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+ +

Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple fadeInOut a une durée de 2.5s et 2 itérations.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, fadeInOut durera 2.5s, moveLeft300px durera 5s. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : bounce aura donc une durée de 2.5s. Le nombre d'itérations sera affecté de la même façon.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Utiliser les événements liés aux animations

+ +

Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.

+ +

Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.

+ +

La feuille de style CSS

+ +

On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée slidein, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

Les gestionnaires d'événements

+ +

On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).

+ +
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+
+ +

Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur slidein sur l'élément.

+ +

Quel est l'intérêt ? En fait, l'événement animationstart est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.

+ +

Écouter les événements

+ +

Les événements sont transmis à la fonction listener() décrite ici :

+ +
function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.

+ +

Le résultat obtenu devrait ressembler à quelque chose comme :

+ + + +

On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

+ +

Le document HTML

+ +

Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :

+ +
<h1 id="watchme">Regardez-moi bouger</h1>
+<p>
+  Un exemple d'animation CSS pour déplacer
+  un élément <code>H1</code> sur une page.
+</p>
+<p>
+  Voici les événements relatifs aux animations :
+</p>
+<ul id="output">
+</ul>
+</body>
+
+ +

{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_background_and_borders/border-image_generator/index.html b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..592f9f64fd --- /dev/null +++ b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2626 @@ +--- +title: Générateur de border-image +slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

+ +
+

Générateur border-image

+ +

Contenu HTML

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Options </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">Échelle</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">Déplaçable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">Hauteur de la section</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> Autres propriétés </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> Code CSS </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..344dd64bcc --- /dev/null +++ b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1600 @@ +--- +title: Générateur de border-radius +slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

+ +
+

border-radius

+ +

Contenu HTML

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> Coins arrondis </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> Unités pour la bordure </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

Contenu CSS

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

Contenu JavaScript

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git a/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..77f236ac13 --- /dev/null +++ b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2887 @@ +--- +title: Générateur de box-shadow +slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

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.

+ +
+

box-shadow generator

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Propriétés d'ombre </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Propriétés d'ombre </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    Code CSS </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'Ombre ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..f9cce126c9 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,117 @@ +--- +title: Mettre à l'échelle des images en arrière-plan +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +tags: + - CSS + - Guide + - Intermédiaire + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +
{{CSSRef}}
+ +

La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.

+ +

Carreler une image de grande taille

+ +

Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.

+ +

+ +

On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :

+ +
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à auto.

+ +

Étirer une image

+ +

Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.

+ +
background-size: 300px 150px;
+
+ +

L'image suivante montre le résultat obtenu.

+ +

Logo de Firefox étité

+ +

Agrandir une image

+ +

On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.

+ +

Logo MDN à l'échelle

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.

+ +

Valeurs spéciales : contain et cover

+ +

En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : contain et cover. 

+ +

contain

+ +

La valeur contain spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.

+ +

Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur contain en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).

+ +
+

{{EmbedLiveSample("contain", "100%", "220")}}

+
+ +
<div class="bgSizeContain">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+ +
.bgSizeContain {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}
+ +

cover

+ +

La valeur cover assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.

+ +

{{EmbedLiveSample("cover", "100%", "220")}}

+ +

Cet exemple utilise le document HTML et la feuille de style suivants :

+ +
<div class="bgSizeCover">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+ +
.bgSizeCover {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+
+ +

Voir aussi

+ + 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/scaling_background_images/index.html deleted file mode 100644 index f9cce126c9..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Mettre à l'échelle des images en arrière-plan -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images -tags: - - CSS - - Guide - - Intermédiaire - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images ---- -
{{CSSRef}}
- -

La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.

- -

Carreler une image de grande taille

- -

Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.

- -

- -

On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-}
-
- -

On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à auto.

- -

Étirer une image

- -

Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.

- -
background-size: 300px 150px;
-
- -

L'image suivante montre le résultat obtenu.

- -

Logo de Firefox étité

- -

Agrandir une image

- -

On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.

- -

Logo MDN à l'échelle

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.

- -

Valeurs spéciales : contain et cover

- -

En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : contain et cover. 

- -

contain

- -

La valeur contain spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.

- -

Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur contain en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).

- -
-

{{EmbedLiveSample("contain", "100%", "220")}}

-
- -
<div class="bgSizeContain">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

cover

- -

La valeur cover assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.

- -

{{EmbedLiveSample("cover", "100%", "220")}}

- -

Cet exemple utilise le document HTML et la feuille de style suivants :

- -
<div class="bgSizeCover">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..fd4961c49f --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,55 @@ +--- +title: Utiliser plusieurs arrière-plans +slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +
{{CSSRef}}
+ +

Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

+ +

Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :

+ +
.maClasse {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

+ +

Exemples

+ +

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.

+ +

CSS

+ +
.exemple_multi_ar {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+}
+ +

HTML

+ +
<div class="exemple_multi_ar"></div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple','100%','400')}}

+ +

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

+ +
+

Note : Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton Tidy de la section CSS.

+
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" "b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" deleted file mode 100644 index fd4961c49f..0000000000 --- "a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Utiliser plusieurs arrière-plans -slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds ---- -
{{CSSRef}}
- -

Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

- -

Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :

- -
.maClasse {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

- -

Exemples

- -

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.

- -

CSS

- -
.exemple_multi_ar {
-  width: 100%;
-  height: 400px;
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-  background-repeat: no-repeat, no-repeat, no-repeat;
-  background-position: bottom right, left, right;
-}
- -

HTML

- -
<div class="exemple_multi_ar"></div>
- -

Résultat

- -

{{EmbedLiveSample('Exemple','100%','400')}}

- -

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

- -
-

Note : Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton Tidy de la section CSS.

-
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..69b0043c13 --- /dev/null +++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,104 @@ +--- +title: Utilisation d'URL pour la propriété cursor +slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor +tags: + - CSS + - Débutant + - Guide +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +
{{CSSRef}}
+ +

Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.

+ +

Syntaxe

+ +

La syntaxe de base (CSS 2.1) pour cette propriété est :

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
+ +

Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme auto ou pointer.

+ +

On pourra ainsi utiliser :

+ +
cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
+
+ +

En utilisant cette règle, le moteur essaiera d'abord de charger toto.cur. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de truc.gif qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur auto sera utilisé.

+ +

Le support de la syntaxe CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
+
+ +

Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:

+ +
cursor: url(toto.png) 4 12, auto;
+
+ +

Le premier nombre est la coordonnée x, le second numéro est la coordonnée y. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.

+ +

Limitations

+ +

Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.

+ +
+

Note : À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.

+
+ +

Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.

+ +

Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.

+ +

Compatibilité des navigateurs

+ +

Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété cursor. Toutefois :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimumFormatsCoordonnées x-y
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows et Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 pour la prise en charge des fichiers .cur
diff --git "a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" "b/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" deleted file mode 100644 index 69b0043c13..0000000000 --- "a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Utilisation d'URL pour la propriété cursor -slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor -tags: - - CSS - - Débutant - - Guide -translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property ---- -
{{CSSRef}}
- -

Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.

- -

Syntaxe

- -

La syntaxe de base (CSS 2.1) pour cette propriété est :

- -
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
- -

Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme auto ou pointer.

- -

On pourra ainsi utiliser :

- -
cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
-
- -

En utilisant cette règle, le moteur essaiera d'abord de charger toto.cur. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de truc.gif qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur auto sera utilisé.

- -

Le support de la syntaxe CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.

- -
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
-
- -

Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:

- -
cursor: url(toto.png) 4 12, auto;
-
- -

Le premier nombre est la coordonnée x, le second numéro est la coordonnée y. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.

- -

Limitations

- -

Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.

- -
-

Note : À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.

-
- -

Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.

- -

Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.

- -

Compatibilité des navigateurs

- -

Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété cursor. Toutefois :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion minimumFormatsCoordonnées x-y
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows et Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 pour la prise en charge des fichiers .cur
diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" deleted file mode 100644 index 45945b3040..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" +++ /dev/null @@ -1,77 +0,0 @@ ---- -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 -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -
-

Note : À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.

-
- -

align-content et justify-content

- -

La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.

- -

La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que space-between, space-around ou space-evenly est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme un seul sujet d'alignement.

- -

justify-self

- -

La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.

- -

Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.

- -

Éléments positionnés de façon absolue

- -

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

- -

align-self

- -

La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.

- -

Éléments positionnés de façon absolue

- -

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

- -

Utilisation actuelle de l'alignement pour ces dispositions

- -

À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.

- -

Avant l'apparition des boîtes flexibles (flexbox), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec auto absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :

- -
.container {
-  width: 20em;
-  margin-left: auto;
-  margin-right: auto;
-}
-
- -

Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.

- -

Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

- -

Référence

- -

Propriétés CSS

- - - -

Termes du glossaire

- - diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" deleted file mode 100644 index 36bee5640e..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: L'alignement des boîtes avec une disposition en colonnes -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.

- -
-

Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

-
- -

align-content et justify-content

- -

La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.

- -

Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.

- -

column-gap

- -

La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

- -

On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("column-gap")}}
    • -
-
- -

Termes du glossaire

- -
- -
diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" deleted file mode 100644 index 8acebc248d..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: L'alignement des boîtes avec Flexbox -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox -tags: - - CSS - - Guide - - flexbox -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Exemple simple

- -

Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par align-itemsen utilisant center comme valeur pour la propriété {{cssxref("align-self")}}.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

- -

Liens entre les axes et flex-direction

- -

Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec flex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur row, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).

- -

Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction avec la valeur column. Dans ce cas, justify-content alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :

- - - -

Alignement sur l'axe principal

- - - -

Alignement sur l'axe secondaire

- - - -

Absence de justify-self pour Flexbox

- -

Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content contrôle la répartition de cet espace. Avec justify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around, il sera placé de chaque côté.

- -

Autrement dit, justify-self n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.

- -

Pour l'axe secondaire, align-self peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.

- -

Alignement et marges automatiques

- -

justify-self pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.

- -

En utilisant {{cssxref("margin")}} avec auto sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

- -

Les propriétés gap

- - - -

Créer des gouttières fixes entre chaque objet

- -

Sur l'axe principal, la propriété column-gap permettra de créer des gouttières de taille fixe de chaque côté de l'objet.

- -

Sur l'axe secondaire, row-gap permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap vaille wrap afin que row-gap ait un effet.

- -
-

Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.

-
- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}t
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
-
- -

Termes du glossaire

- -
- -
- -

Guides

- - - -

Ressources externes

- - diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" deleted file mode 100644 index 4adf375ac4..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: L'alignement des boîtes avec une grille CSS -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille -tags: - - CSS - - CSS Grid - - Grilles CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les grilles CSS. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Exemple simple

- -

Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété justify-content. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété align-items. Le premier objet surcharge la valeur fournie par align-items en utilisant align-self avec la valeur center.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

- -

Axes de la grille

- -

La grille est une méthode de disposition sur deux dimensions.

- -

L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.

- -

- -

Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par justify- : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.

- -

L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).

- -

Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par align- : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.

- -

- -

Alignement individuel

- - - -

Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés align-items et justify-items sont appliquées au conteneur de grille et définissent align-self et justify-self pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant align-self ou justify-self sur les éléments souhaités.

- -

Les valeurs initiales pour align-self et justify-self sont stretch. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec startsur les deux axes et l'élément n'est pas déformé.

- -

Alignement du contenu

- - - -

Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

- -

Gouttières et versions préfixées des propriétés

- - - -

La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.

- -

À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe grid-) afin d'assurer une meilleure compatibilité.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}t
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("place-self")}}
    • -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
-
- -

Termes du glossaire

- -
- -
- -

Guides

- - - -

Ressources externes

- - diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html new file mode 100644 index 0000000000..45945b3040 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html @@ -0,0 +1,77 @@ +--- +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 +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +
+

Note : À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.

+
+ +

align-content et justify-content

+ +

La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.

+ +

La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que space-between, space-around ou space-evenly est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme un seul sujet d'alignement.

+ +

justify-self

+ +

La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.

+ +

Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.

+ +

Éléments positionnés de façon absolue

+ +

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

+ +

align-self

+ +

La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.

+ +

Éléments positionnés de façon absolue

+ +

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

+ +

Utilisation actuelle de l'alignement pour ces dispositions

+ +

À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.

+ +

Avant l'apparition des boîtes flexibles (flexbox), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec auto absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :

+ +
.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +

Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.

+ +

Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Référence

+ +

Propriétés CSS

+ + + +

Termes du glossaire

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html new file mode 100644 index 0000000000..8acebc248d --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -0,0 +1,119 @@ +--- +title: L'alignement des boîtes avec Flexbox +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox +tags: + - CSS + - Guide + - flexbox +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Exemple simple

+ +

Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par align-itemsen utilisant center comme valeur pour la propriété {{cssxref("align-self")}}.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

Liens entre les axes et flex-direction

+ +

Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec flex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur row, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).

+ +

Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction avec la valeur column. Dans ce cas, justify-content alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :

+ + + +

Alignement sur l'axe principal

+ + + +

Alignement sur l'axe secondaire

+ + + +

Absence de justify-self pour Flexbox

+ +

Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content contrôle la répartition de cet espace. Avec justify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around, il sera placé de chaque côté.

+ +

Autrement dit, justify-self n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.

+ +

Pour l'axe secondaire, align-self peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.

+ +

Alignement et marges automatiques

+ +

justify-self pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.

+ +

En utilisant {{cssxref("margin")}} avec auto sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

+ +

Les propriétés gap

+ + + +

Créer des gouttières fixes entre chaque objet

+ +

Sur l'axe principal, la propriété column-gap permettra de créer des gouttières de taille fixe de chaque côté de l'objet.

+ +

Sur l'axe secondaire, row-gap permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap vaille wrap afin que row-gap ait un effet.

+ +
+

Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.

+
+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}t
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Termes du glossaire

+ +
+ +
+ +

Guides

+ + + +

Ressources externes

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html new file mode 100644 index 0000000000..4adf375ac4 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html @@ -0,0 +1,119 @@ +--- +title: L'alignement des boîtes avec une grille CSS +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille +tags: + - CSS + - CSS Grid + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les grilles CSS. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Exemple simple

+ +

Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété justify-content. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété align-items. Le premier objet surcharge la valeur fournie par align-items en utilisant align-self avec la valeur center.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

Axes de la grille

+ +

La grille est une méthode de disposition sur deux dimensions.

+ +

L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.

+ +

+ +

Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par justify- : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.

+ +

L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).

+ +

Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par align- : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.

+ +

+ +

Alignement individuel

+ + + +

Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés align-items et justify-items sont appliquées au conteneur de grille et définissent align-self et justify-self pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant align-self ou justify-self sur les éléments souhaités.

+ +

Les valeurs initiales pour align-self et justify-self sont stretch. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec startsur les deux axes et l'élément n'est pas déformé.

+ +

Alignement du contenu

+ + + +

Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

+ +

Gouttières et versions préfixées des propriétés

+ + + +

La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.

+ +

À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe grid-) afin d'assurer une meilleure compatibilité.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}t
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Termes du glossaire

+ +
+ +
+ +

Guides

+ + + +

Ressources externes

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html new file mode 100644 index 0000000000..36bee5640e --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html @@ -0,0 +1,51 @@ +--- +title: L'alignement des boîtes avec une disposition en colonnes +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.

+ +
+

Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

+
+ +

align-content et justify-content

+ +

La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.

+ +

Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.

+ +

column-gap

+ +

La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

+ +

On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("column-gap")}}
    • +
+
+ +

Termes du glossaire

+ +
+ +
diff --git a/files/fr/web/css/css_box_model/index.html b/files/fr/web/css/css_box_model/index.html new file mode 100644 index 0000000000..3bc62c03f1 --- /dev/null +++ b/files/fr/web/css/css_box_model/index.html @@ -0,0 +1,115 @@ +--- +title: Modèle de boîte +slug: Web/CSS/Modèle_de_boîte_CSS +tags: + - Aperçu + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

Le modèle de boîte CSS (Basic Box Model en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (padding) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.

+ +

Référence

+ +

Propriétés

+ +

Les propriétés qui définissent le flux du contenu dans une boîte

+ +
+
    +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

Les propriétés qui définissent la taille d'une boîte

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

Les propriétés qui définissent les marges d'une boîte

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
  • {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
    • +
+
+ +

Les propriétés qui définissent le remplissage (padding) d'une boîte

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

Les autres propriétés

+ +
+
    +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("visibility")}}
    • +
+
+ +

Guides

+ +
+
Une introduction au modèle de boîte CSS
+
Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (padding) ainsi que les différentes zones qui forment une boîte.
+
Maîtriser la fusion des marges
+
Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.
+
Le modèle de mise en forme visuel
+
Cet article explique le modèle de mise en forme visuel.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
diff --git a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..3b14f121d8 --- /dev/null +++ b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,92 @@ +--- +title: Fusion des marges +slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +
Les marges haute et basse des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle la fusion des marges.
+ +

La fusion des marges se produit si on a l'un de ces trois cas :

+ +
+
Des éléments voisins adjacents
+
Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements). Ainsi : + 
 <p>La marge basse de ce paragraphe est fusionnée…</p>
+ <p>… avec la marge haute de celui-ci.</p>
+
+
+
Aucun contenu séparant le parent et ses descendants
+
S'il n'y a aucune bordure, remplissage, contenu en ligne (inline), lorsqu' un contexte de formatage de blocs est créé ou dégagement pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
+
Des blocs vides
+
S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.
+
+ +

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.

+ +

Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).

+ +

Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).

+ +

Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.

+ +

Exemples

+ +

HTML

+ +
<p>La marge basse de ce paragraphe est fusionnée…</p>
+<p>… avec la marge haute de ce paragraphe. On a donc une marge
+   de <code>1.2rem</code> entre les deux.</p>
+
+<div>Cet élément contient deux paragraphes !
+  <p>Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.</p>
+  <p>La marge basse de cet élément fusionne avec la marge basse
+     de l'élément parent. On a donc <code>2rem</code> de marge.
+</p>
+</div>
+
+<p>Bip bap bop.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','100%',250)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_charsets/index.html b/files/fr/web/css/css_charsets/index.html new file mode 100644 index 0000000000..a7c76a2c4e --- /dev/null +++ b/files/fr/web/css/css_charsets/index.html @@ -0,0 +1,50 @@ +--- +title: Jeux de caractères CSS +slug: Web/CSS/Jeux_de_caractères_CSS +tags: + - Aperçu + - CSS + - CSS Charsets + - Reference +translation_of: Web/CSS/CSS_Charsets +--- +
{{CSSRef}}
+ +

Les jeux de caractères pour CSS est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.

+ +

Référence

+ +

Règles @

+ +
+
    +
  • {{cssxref("@charset")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

Règle-@ @charset

+ + + +

{{Compat("css.at-rules.charset")}}

diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.html b/files/fr/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..df4aa4661c --- /dev/null +++ b/files/fr/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3235 @@ +--- +title: Sélecteur de couleurs CSS +slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPIcker Tool

+ +

HTML Content

+ +
 <div id="container">
+  <div id="palette" class="block">
+   <div id="color-palette"></div>
+   <div id="color-info">
+    <div class="title">Couleurs CSS </div>
+   </div>
+  </div>
+
+  <div id="picker" class="block">
+   <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+   <div id="picker-samples" sample-id="master"></div>
+   <div id="controls">
+    <div id="delete">
+     <div id="trash-can"></div>
+    </div>
+    <div id="void-sample" class="icon"></div>
+   </div>
+  </div>
+
+  <div id="canvas" data-tutorial="drop">
+   <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+    data-max="20" data-sensivity="10"></div>
+  </div>
+ </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 28%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Déposez vos couleurs ici";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: center;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "pour les comparer, les ajuster ou les modifier.";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click pour activer";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Teinte', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Luminosité';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Valeur';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ + +
{{CSSRef}}
+ +

Cet outil vous permet de définir des couleurs web personnalisées.

+ +

L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé RGB en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé HSL en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).

+ +

Chaque couleur est prédéfinie dans les 3 formats standard CSS.

+ +

En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).

+ +

Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).

+ +

{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html new file mode 100644 index 0000000000..2032e1c2c6 --- /dev/null +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -0,0 +1,92 @@ +--- +title: Concepts de base pour la disposition multi-colonnes +slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +--- +
{{CSSRef}}
+ +

La disposition sur plusieurs colonnes (« Multiple-column Layout » ou « multicol » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.

+ +

Concepts et terminologie

+ +

La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification CSS Paged Media.

+ +

Les propriétés définies dans cette spécification sont :

+ + + +

En ajoutant column-count ou column-width à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.

+ +

Definir des colonnes

+ +

Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété column-* (column-count ou column-width).

+ +

La propriété column-count

+ +

La propriété column-count définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.

+ +

Dans l'exemple qui suit, on utilise la propriété column-count afin de créer trois colonnes au sein de l'élément .container. Le contenu, y compris l'élément fils de .container est alors divisé en trois colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne fusionnent pas avec les marges du conteneur.

+ +

La propriété column-width

+ +

La propriété column-width est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour column-width, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir column-width comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.

+ +

Il existe un seul cas où la boîte de colonne peut être plus petite que column-width : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à column-width.

+ +

Dans l'exemple qui suit, on utilise la propriété column-width avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

+ +

Utiliser column-count et column-width

+ +

Si on définit les deux propriétés pour un conteneur multi-colonnes, column-count agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour column-width aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par column-count soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur column-width).

+ +

Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec column-count.

+ +

Dans l'exemple suivant, on utilise column-width avec une valeur de 200px et column-count avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

+ +

La propriété raccourcie columns

+ +

La propriété raccourcie columns peut être utilisée afin de définir à la fois column-count et column-width. Si on utilise une unité de longueur, la valeur sera utilisée pour column-width, si on utilise un entier, la valeur sera utilisée pour column-count. Les deux peuvent être définies simultanément en étant séparées d'un espace.

+ +

Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où column-count vaut 3.

+ +
.container {
+  columns: 3;
+}
+ +

Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où column-width vaut 200px.

+ +
.container {
+  columns: 200px;
+}
+ +

Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés column-count et column-width sont définies.

+ +
.container {
+  columns: 2 200px;
+}
+ +

Prochaines étapes

+ +

Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons comment mettre en forme chacune des colonnes.

diff --git a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html deleted file mode 100644 index 2032e1c2c6..0000000000 --- a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Concepts de base pour la disposition multi-colonnes -slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol ---- -
{{CSSRef}}
- -

La disposition sur plusieurs colonnes (« Multiple-column Layout » ou « multicol » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.

- -

Concepts et terminologie

- -

La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification CSS Paged Media.

- -

Les propriétés définies dans cette spécification sont :

- - - -

En ajoutant column-count ou column-width à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.

- -

Definir des colonnes

- -

Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété column-* (column-count ou column-width).

- -

La propriété column-count

- -

La propriété column-count définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.

- -

Dans l'exemple qui suit, on utilise la propriété column-count afin de créer trois colonnes au sein de l'élément .container. Le contenu, y compris l'élément fils de .container est alors divisé en trois colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

- -

Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne fusionnent pas avec les marges du conteneur.

- -

La propriété column-width

- -

La propriété column-width est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour column-width, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir column-width comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.

- -

Il existe un seul cas où la boîte de colonne peut être plus petite que column-width : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à column-width.

- -

Dans l'exemple qui suit, on utilise la propriété column-width avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

- -

Utiliser column-count et column-width

- -

Si on définit les deux propriétés pour un conteneur multi-colonnes, column-count agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour column-width aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par column-count soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur column-width).

- -

Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec column-count.

- -

Dans l'exemple suivant, on utilise column-width avec une valeur de 200px et column-count avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.

- -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

- -

La propriété raccourcie columns

- -

La propriété raccourcie columns peut être utilisée afin de définir à la fois column-count et column-width. Si on utilise une unité de longueur, la valeur sera utilisée pour column-width, si on utilise un entier, la valeur sera utilisée pour column-count. Les deux peuvent être définies simultanément en étant séparées d'un espace.

- -

Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où column-count vaut 3.

- -
.container {
-  columns: 3;
-}
- -

Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où column-width vaut 200px.

- -
.container {
-  columns: 200px;
-}
- -

Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés column-count et column-width sont définies.

- -
.container {
-  columns: 2 200px;
-}
- -

Prochaines étapes

- -

Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons comment mettre en forme chacune des colonnes.

diff --git "a/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" "b/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" deleted file mode 100644 index 7dc6078442..0000000000 --- "a/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Gestion du dépassement en multi-colonnes -slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.

- -

Le dépassement dans les boîtes des colonnes

- -

On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de column-width ou à la largeur des colonnes selon le nombre indiqué avec column-count.

- -

Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).

- -

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

- -

- -

Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et max-width: 100% pour y parvenir.

- -

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

- -

Plus de colonnes que d'espace disponible

- -

La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?

- -

Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.

- -

Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.

- -

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

- -
-

Note : On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).

-
- -

Utiliser les requêtes média verticales

- -

Lorsque les colonnes sont plus hautes que la zone d'affichage (viewport), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.

- -

Dans l'exemple qui suit, on utilise par exemple une requête média avec min-height pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

- -

Dans le dernier guide de cette série, nous verrons comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.

diff --git "a/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" "b/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" deleted file mode 100644 index 909c9bd2a5..0000000000 --- "a/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Gérer la rupture du contenu entre les colonnes -slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol ---- -
{{CSSRef}}
- -

Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification CSS Fragmentation. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.

- -

Quelques notions de bases sur la fragmentation

- -

Le module de spécification CSS Fragmentation détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.

- -

Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.

- -

Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :

- - - -

Les ruptures à l'intérieur des boîtes

- -

Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :

- - - -

Dans l'exemple qui suit, on a appliqué break-inside sur l'élément figure afin d'éviter que la légende soit séparée de l'image.

- -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}

- -

Les ruptures avant et après les boîtes

- -

Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :

- - - -

Avec l'exemple suivant, on force une rupture avant chaque élément de titre h2.

- -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}

- -

Les ruptures entre les lignes

- -

On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  orphans contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété widows contrôle le nombre de lignes qui restent au début d'un fragment.

- -

Les propriétés orphans et widows prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.

- -

Dans l'exemple ci-après, on utilise la propriété orphans pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.

- -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}

- -

Résultat non garanti

- -

Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.

- -

De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.

diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html new file mode 100644 index 0000000000..909c9bd2a5 --- /dev/null +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html @@ -0,0 +1,72 @@ +--- +title: Gérer la rupture du contenu entre les colonnes +slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +--- +
{{CSSRef}}
+ +

Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification CSS Fragmentation. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.

+ +

Quelques notions de bases sur la fragmentation

+ +

Le module de spécification CSS Fragmentation détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.

+ +

Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.

+ +

Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :

+ + + +

Les ruptures à l'intérieur des boîtes

+ +

Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :

+ + + +

Dans l'exemple qui suit, on a appliqué break-inside sur l'élément figure afin d'éviter que la légende soit séparée de l'image.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}

+ +

Les ruptures avant et après les boîtes

+ +

Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :

+ + + +

Avec l'exemple suivant, on force une rupture avant chaque élément de titre h2.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}

+ +

Les ruptures entre les lignes

+ +

On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  orphans contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété widows contrôle le nombre de lignes qui restent au début d'un fragment.

+ +

Les propriétés orphans et widows prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.

+ +

Dans l'exemple ci-après, on utilise la propriété orphans pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}

+ +

Résultat non garanti

+ +

Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.

+ +

De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.

diff --git a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html new file mode 100644 index 0000000000..7dc6078442 --- /dev/null +++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -0,0 +1,49 @@ +--- +title: Gestion du dépassement en multi-colonnes +slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.

+ +

Le dépassement dans les boîtes des colonnes

+ +

On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de column-width ou à la largeur des colonnes selon le nombre indiqué avec column-count.

+ +

Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+ +

+ +

Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et max-width: 100% pour y parvenir.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+ +

Plus de colonnes que d'espace disponible

+ +

La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?

+ +

Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.

+ +

Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+ +
+

Note : On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).

+
+ +

Utiliser les requêtes média verticales

+ +

Lorsque les colonnes sont plus hautes que la zone d'affichage (viewport), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.

+ +

Dans l'exemple qui suit, on utilise par exemple une requête média avec min-height pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+ +

Dans le dernier guide de cette série, nous verrons comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.

diff --git a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html deleted file mode 100644 index 0689060daf..0000000000 --- a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Mettre en forme les colonnes -slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes -tags: - - CSS - - CSS Multi-column Layout - - Guide -translation_of: Web/CSS/CSS_Columns/Styling_Columns ---- -
{{CSSRef}}
- -

Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.

- -

Peut-on mettre en forme les boîtes des colonnes ?

- -

Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.

- -

L'espaceement : la propriété column-gap

- -

L'espacement entre les colonnes est contrôlé par la propriété column-gap. Cette propriété était initialement définie dans le module de spécification Multi-column Layout mais est désormais définie dans le module de spécification Box Alignment (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que les grilles CSS).

- -

Dans une disposition multi-colonne, la valeur initiale de la propriété column-gap est 1em. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de column-gap est 0. Le mot-clé normal est une valeur qui permet d'obtenir un écart de 1em.

- -

Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour column-gap. Dans l'exemple qui suit, on a ainsi paramétré column-gap avec la valeur 40px.

- -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}

- -

Les valeurs autorisées pour column-gap sont de type <length-percentage>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.

- -

Créer un délimiteur entre les colonnes : column-rule

- -

La spécification définit les propriétés column-rule-width, column-rule-style and column-rule-color et fournit une propriété raccourcie column-rule. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour border-style pourra être utilisée pour column-rule-style.

- -

Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.

- -

Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est rebeccapurple, sans utiliser la propriété raccourcie.

- -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}

- -

On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.

- -

Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.

- -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}

- -

Résumé

- -

Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment propager les éléments du conteneur sur l'ensemble des colonnes.

diff --git "a/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" "b/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" deleted file mode 100644 index d1116ebd7d..0000000000 --- "a/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Répartir et équilibrer le contenu entre les colonnes -slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Spanning_Columns ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.

- -
-

Note : Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.

-
- -

Étendre sur plusieurs colonnes

- -

Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur all. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.

- -

N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.

- -

Dans l'exemple qui suit, on a column-span: all appliqué sur l'élément h2 qui s'étend ainsi sur toutes les colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}

- -

Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.

- -

{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}

- -

Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.

- -

Les limites de column-span

- -

Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour column-span : none qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et all qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.

- -

Quelques points d'attention

- -

Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}

- -

De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser column-span avec précaution pour éviter ces effets indésirables.

- -

Équilibrer et remplir les colonnes

- -

Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.

- -

La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est balance. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que les médias paginés, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.

- -

La valeur balance-all permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).

- -

Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.

- -

{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}

- -

auto est une autre valeur qui peut être utilisée avec column-fill. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié column-fill pour utiliser auto et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.

- -

{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}

- -

On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.

- -

Dans le prochain guide, nous verrons comment gérer le dépassement au sein d'un conteneur multi-colonnes, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.

diff --git a/files/fr/web/css/css_columns/spanning_columns/index.html b/files/fr/web/css/css_columns/spanning_columns/index.html new file mode 100644 index 0000000000..d1116ebd7d --- /dev/null +++ b/files/fr/web/css/css_columns/spanning_columns/index.html @@ -0,0 +1,63 @@ +--- +title: Répartir et équilibrer le contenu entre les colonnes +slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Spanning_Columns +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.

+ +
+

Note : Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.

+
+ +

Étendre sur plusieurs colonnes

+ +

Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur all. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.

+ +

N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.

+ +

Dans l'exemple qui suit, on a column-span: all appliqué sur l'élément h2 qui s'étend ainsi sur toutes les colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}

+ +

Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}

+ +

Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.

+ +

Les limites de column-span

+ +

Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour column-span : none qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et all qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.

+ +

Quelques points d'attention

+ +

Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}

+ +

De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser column-span avec précaution pour éviter ces effets indésirables.

+ +

Équilibrer et remplir les colonnes

+ +

Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.

+ +

La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est balance. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que les médias paginés, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.

+ +

La valeur balance-all permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).

+ +

Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}

+ +

auto est une autre valeur qui peut être utilisée avec column-fill. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié column-fill pour utiliser auto et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}

+ +

On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.

+ +

Dans le prochain guide, nous verrons comment gérer le dépassement au sein d'un conteneur multi-colonnes, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.

diff --git a/files/fr/web/css/css_columns/styling_columns/index.html b/files/fr/web/css/css_columns/styling_columns/index.html new file mode 100644 index 0000000000..0689060daf --- /dev/null +++ b/files/fr/web/css/css_columns/styling_columns/index.html @@ -0,0 +1,48 @@ +--- +title: Mettre en forme les colonnes +slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes +tags: + - CSS + - CSS Multi-column Layout + - Guide +translation_of: Web/CSS/CSS_Columns/Styling_Columns +--- +
{{CSSRef}}
+ +

Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.

+ +

Peut-on mettre en forme les boîtes des colonnes ?

+ +

Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.

+ +

L'espaceement : la propriété column-gap

+ +

L'espacement entre les colonnes est contrôlé par la propriété column-gap. Cette propriété était initialement définie dans le module de spécification Multi-column Layout mais est désormais définie dans le module de spécification Box Alignment (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que les grilles CSS).

+ +

Dans une disposition multi-colonne, la valeur initiale de la propriété column-gap est 1em. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de column-gap est 0. Le mot-clé normal est une valeur qui permet d'obtenir un écart de 1em.

+ +

Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour column-gap. Dans l'exemple qui suit, on a ainsi paramétré column-gap avec la valeur 40px.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}

+ +

Les valeurs autorisées pour column-gap sont de type <length-percentage>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.

+ +

Créer un délimiteur entre les colonnes : column-rule

+ +

La spécification définit les propriétés column-rule-width, column-rule-style and column-rule-color et fournit une propriété raccourcie column-rule. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour border-style pourra être utilisée pour column-rule-style.

+ +

Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.

+ +

Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est rebeccapurple, sans utiliser la propriété raccourcie.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}

+ +

On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.

+ +

Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}

+ +

Résumé

+ +

Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment propager les éléments du conteneur sur l'ensemble des colonnes.

diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.html b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..897ac5c989 --- /dev/null +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,201 @@ +--- +title: Utiliser une disposition multi-colonnes +slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +
{{CSSRef}}
+ +

La disposition multi-colonnes étend le mode de disposition en bloc et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.

+ +

Utiliser les colonnes CSS

+ +

Le nombre de colonnes et leur largeur

+ +

Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.

+ +

On utilisera la propriété column-count pour définir le nombre de colonnes qu'on souhaite avoir.

+ +

Utilisation de column-count

+ +
CSS
+ +
#col {
+  column-count: 2;
+}
+
+ +
HTML
+ +
+
<div id="col">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  </p>
+  <p>
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+  <p>
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  </p>
+  <p>
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-count','100%')}}

+ +

Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.

+ +

La propriété column-width permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété column-count n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.

+ +

Utilisation de column-width

+ +
CSS
+ +
+
#wid {
+  column-width: 100px;
+}
+
+
+ +
HTML
+ +
+
<div id="wid">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-width','100%')}}

+ +

En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.

+ +

La propriété raccourcie columns

+ +

La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.

+ +

Ainsi, la déclaration column-width:12em pourra être remplacée de la façon suivante :

+ +
CSS
+ +
+
#col_short {
+  columns: 12em;
+}
+
+
+ +
HTML
+ +
+
<div id="col_short">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}

+ +

De même, on pourra remplacer la déclaration column-count: 4 avec ce bloc :

+ +
+
#columns_4{
+  columns: 4;
+}
+
+
+ +

Enfin, pour synthétiser les instructions column-width:8em et column-count:12, on pourra utiliser les instructions suivantes :

+ +
+
#columns_12 {
+  columns: 12 8em;
+}
+
+
+ +

Équilibrage de la hauteur

+ +

La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.

+ +

Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.

+ +

L'espacement entre les colonnes

+ +

Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est 1em. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.

+ +

Utilisation de column-gap

+ +
CSS
+ +
#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}
+ +
HTML
+ +
+
<div id="column_gap">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}

+ +

Amélioration progressive

+ +

Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.

+ +

Conclusion

+ +

Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html deleted file mode 100644 index 897ac5c989..0000000000 --- a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Utiliser une disposition multi-colonnes -slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts ---- -
{{CSSRef}}
- -

La disposition multi-colonnes étend le mode de disposition en bloc et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.

- -

Utiliser les colonnes CSS

- -

Le nombre de colonnes et leur largeur

- -

Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.

- -

On utilisera la propriété column-count pour définir le nombre de colonnes qu'on souhaite avoir.

- -

Utilisation de column-count

- -
CSS
- -
#col {
-  column-count: 2;
-}
-
- -
HTML
- -
-
<div id="col">
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-    sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua.
-  </p>
-  <p>
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat.
-  </p>
-  <p>
-    Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur.
-  </p>
-  <p>
-    Excepteur sint occaecat cupidatat non proident, sunt in
-    culpa qui officia deserunt mollit anim id est laborum.
-  </p>
-</div>
-
-
- -
Résultat
- -

{{EmbedLiveSample('Utilisation_de_column-count','100%')}}

- -

Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.

- -

La propriété column-width permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété column-count n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.

- -

Utilisation de column-width

- -
CSS
- -
-
#wid {
-  column-width: 100px;
-}
-
-
- -
HTML
- -
-
<div id="wid">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
-</div>
-
-
- -
Résultat
- -

{{EmbedLiveSample('Utilisation_de_column-width','100%')}}

- -

En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.

- -

La propriété raccourcie columns

- -

La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.

- -

Ainsi, la déclaration column-width:12em pourra être remplacée de la façon suivante :

- -
CSS
- -
-
#col_short {
-  columns: 12em;
-}
-
-
- -
HTML
- -
-
<div id="col_short">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
-</div>
-
-
- -
Résultat
- -

{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}

- -

De même, on pourra remplacer la déclaration column-count: 4 avec ce bloc :

- -
-
#columns_4{
-  columns: 4;
-}
-
-
- -

Enfin, pour synthétiser les instructions column-width:8em et column-count:12, on pourra utiliser les instructions suivantes :

- -
-
#columns_12 {
-  columns: 12 8em;
-}
-
-
- -

Équilibrage de la hauteur

- -

La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.

- -

Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.

- -

L'espacement entre les colonnes

- -

Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est 1em. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.

- -

Utilisation de column-gap

- -
CSS
- -
#column_gap {
-  column-count: 5;
-  column-gap: 2em;
-}
- -
HTML
- -
-
<div id="column_gap">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
-</div>
-
-
- -
Résultat
- -

{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}

- -

Amélioration progressive

- -

Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.

- -

Conclusion

- -

Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html new file mode 100644 index 0000000000..811f5c4b22 --- /dev/null +++ b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html @@ -0,0 +1,112 @@ +--- +title: Utiliser les requêtes de fonctionnalité (feature queries) +slug: >- + Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries) +tags: + - Amélioration progressive + - CSS + - Guide +translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries +--- +
{{CSSRef}}
+ +

Les requêtes de fonctionnalité (ou feature queries) sont créées à l'aide de la règle @supports et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.

+ +

Syntaxe

+ +

Les requêtes de fonctionnalité CSS s'inscrivent dans le module de spécification CSS Conditional Rules qui décrit également le fonctionnement de la règle @media. Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.

+ +

Une requête de fonctionnalité commence par une règle @supports, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. display) mais uniquement un couple nom/valeur :

+ +
@supports (propriété: valeur) {
+  Règles CSS à appliquer
+}
+ +

Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété row-gap, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}

+ +

La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de display est particulièrement intéressant. Tous les navigateurs prennent en charge display (display: block faisait partie de CSS1) mais les valeurs display: flex et display: grid ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec @supports.

+ +

Tester l'absence de prise en charge d'une fonctionnalité

+ +

Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé not :

+ +
@supports not (propriété: valeur) {
+  Règles CSS à appliquer
+}
+ +

Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge row-gap.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}

+ +

Tester la prise en charge de plusieurs fonctionnalités

+ +

Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé and :

+ +
@supports (property1: value) and (property2: value) {
+  CSS rules to apply
+}
+ +

On peut, par exemple, vérifier que le navigateur prend en charge les formes (shapes) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra true uniquement si shape-outside: circle() et display: grid sont pris en charge par le navigateur.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}

+ +

De la même façon, on peut utiliser le mot-clé or si on souhaite tester la prise en charge d'au moins une fonctionnalité :

+ +
@supports (property1: value) or (property2: value) {
+  CSS rules to apply
+}
+ +

Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}

+ +

Limites des requêtes de fonctionnalité

+ +

Une règle @supports ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…

+ +

De plus, de telles requêtes ne permettent pas de tester une implémentation partielle. Prenons l'exemple de la propriété gap, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge gap avec les grilles CSS et seul Firefox prend en charge gap avec les boîtes flexibles (flexbox). Si on teste la propriété gap car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.

+ +

Comment utiliser @supports pour l'amélioration progressive ?

+ +

Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.

+ +

Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/@supports ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser @supports. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.

+ +

Prenons un exemple plus construit.

+ +

Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser les grilles CSS. Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}

+ +

Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur grid pour la propriété display. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir Prendre en charge les navigateurs plus anciens) et la grille écrase alors la version flottante.

+ +

Un problème persiste cependant. La propriété width, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}

+ +

Il faut une façon de retirer la largeur si display: grid est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser width avec la valeur auto si les grilles sont prises en charge.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}

+ +

Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.

+ +

Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}

+ +

De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant display: grid en display: grip (une valeur invalide et donc non prise en charge).

+ +

Résumé

+ +

Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" "b/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" deleted file mode 100644 index 811f5c4b22..0000000000 --- "a/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Utiliser les requêtes de fonctionnalité (feature queries) -slug: >- - Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries) -tags: - - Amélioration progressive - - CSS - - Guide -translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries ---- -
{{CSSRef}}
- -

Les requêtes de fonctionnalité (ou feature queries) sont créées à l'aide de la règle @supports et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.

- -

Syntaxe

- -

Les requêtes de fonctionnalité CSS s'inscrivent dans le module de spécification CSS Conditional Rules qui décrit également le fonctionnement de la règle @media. Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.

- -

Une requête de fonctionnalité commence par une règle @supports, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. display) mais uniquement un couple nom/valeur :

- -
@supports (propriété: valeur) {
-  Règles CSS à appliquer
-}
- -

Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété row-gap, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}

- -

La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de display est particulièrement intéressant. Tous les navigateurs prennent en charge display (display: block faisait partie de CSS1) mais les valeurs display: flex et display: grid ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec @supports.

- -

Tester l'absence de prise en charge d'une fonctionnalité

- -

Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé not :

- -
@supports not (propriété: valeur) {
-  Règles CSS à appliquer
-}
- -

Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge row-gap.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}

- -

Tester la prise en charge de plusieurs fonctionnalités

- -

Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé and :

- -
@supports (property1: value) and (property2: value) {
-  CSS rules to apply
-}
- -

On peut, par exemple, vérifier que le navigateur prend en charge les formes (shapes) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra true uniquement si shape-outside: circle() et display: grid sont pris en charge par le navigateur.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}

- -

De la même façon, on peut utiliser le mot-clé or si on souhaite tester la prise en charge d'au moins une fonctionnalité :

- -
@supports (property1: value) or (property2: value) {
-  CSS rules to apply
-}
- -

Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).

- -

{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}

- -

Limites des requêtes de fonctionnalité

- -

Une règle @supports ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…

- -

De plus, de telles requêtes ne permettent pas de tester une implémentation partielle. Prenons l'exemple de la propriété gap, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge gap avec les grilles CSS et seul Firefox prend en charge gap avec les boîtes flexibles (flexbox). Si on teste la propriété gap car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.

- -

Comment utiliser @supports pour l'amélioration progressive ?

- -

Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.

- -

Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/@supports ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser @supports. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.

- -

Prenons un exemple plus construit.

- -

Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser les grilles CSS. Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).

- -

{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}

- -

Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur grid pour la propriété display. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir Prendre en charge les navigateurs plus anciens) et la grille écrase alors la version flottante.

- -

Un problème persiste cependant. La propriété width, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).

- -

{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}

- -

Il faut une façon de retirer la largeur si display: grid est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser width avec la valeur auto si les grilles sont prises en charge.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}

- -

Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.

- -

Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}

- -

De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant display: grid en display: grip (une valeur invalide et donc non prise en charge).

- -

Résumé

- -

Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_containment/index.html b/files/fr/web/css/css_containment/index.html new file mode 100644 index 0000000000..34af6f3274 --- /dev/null +++ b/files/fr/web/css/css_containment/index.html @@ -0,0 +1,123 @@ +--- +title: Compartimentation CSS (CSS Containment) +slug: Web/CSS/Compartimentation_CSS +tags: + - CSS + - CSS Containment +translation_of: Web/CSS/CSS_Containment +--- +

{{CSSRef}}
+ L'objectif du module de spécification CSS Containment (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.

+ +

Exemple simple

+ +

De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.

+ +
<h1>Mon blog</h1>
+<article>
+  <h2>Titre d'un article sympa</h2>
+  <p>Un peu de contenu.</p>
+</article>
+<article>
+  <h2>Un autre titre pour un autre article</h2>
+  <p>Un peu plus de contenu ici.</p>
+</article>
+ +

Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur content.

+ +
article {
+  contain: content;
+}
+ +

Chaque article est indépendant des autres articles de la page et on fournit contain: content afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).

+ +

Si on fournit contain: content pour chaque <article>, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si <article> est mis en forme de telle façon que sa forme dépend de son contenu (ex. height: auto), le navigateur devra prendre en compte le redimensionnement.

+ +

La valeur content est une valeur synthétique pour contain: layout paint. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.

+ +

Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.

+ +

Concepts et terminologie

+ +

Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.

+ +

Compartimentation de la disposition

+ +
article {
+  contain: layout;
+}
+ +

La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec contain: layout, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.

+ +

De plus :

+ + + +

Compartimentation pour la peinture

+ +
article {
+  contain: paint;
+}
+ +

La compartimentation avec paint limite/rogne la boîte jusqu'à la limite de la zone de remplissage (padding) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec layout (voir ci-avant).

+ +

De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).

+ +

Compartimentation pour le dimensionnement

+ +
article {
+  contain: size;
+}
+ +

La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.

+ +

Si on active contain: size, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.

+ +

Compartimentation pour le style

+ +
article {
+  contain: style;
+}
+ +

Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un Shadow DOM. Cette valeur sert principlament pour les compteurs CSS qui pourraient changer sur un élément et affecter le reste de l'arborescence.

+ +

En utilisant contain: style, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.

+ +
+

Note : La valeur style est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).

+
+ +

Valeurs spéciales

+ +

La propriété contain possède deux valeurs spéciales :

+ + + +

La première (vue dans le premier exemple) est un synonyme pour la conjonction de layout et paint. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (size) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.

+ +

Pour obtenir la compartimentation la plus forte, on utilisera contain: strict qui est synonyme de contain: size layout paint voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :

+ +
contain: strict;
+contain: strict style;
+ +

Référence

+ +

Propriétés CSS

+ + + +

Ressources externes

+ + diff --git "a/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" "b/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" deleted file mode 100644 index 2321587479..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Aligner des éléments dans un conteneur flexible -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible -tags: - - CSS - - Flex - - Guide - - Web - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container ---- -

{{CSSRef}}

- -

Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.

- -

Afin de centrer notre boîte, nous allons utiliser la propriété align-items afin d'aligner l'objet sur l'axe secondaire (cross axis en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété justify-content est quant à elle utilisée pour aligner l'objet sur l'axe principal (main axis en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).

- -

Un élément contenant une autre boîte centrée à l'intérieur

- -

 

- -

Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

- -

Les propriétés responsables de l'alignement

- -

Voici les propriétés que nous étudierons dans ce guide :

- - - -

Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.

- -
-

Note : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : CSS Box Alignment Level 3. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.

-
- -

L'axe secondaire (cross axis)

- -

Les propriétés align-items et align-self permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.

- -

Prenons un exemple simple : nous ajoutons display: flex à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.

- -

Trois objets dont un avec un texte plus long qui le rend plus grand que les autres

- -

Trois objets étirés pour mesurer 200 pixels de haut

- -

Les éléments obtiennent la même hauteur à cause de la valeur initiale de align-items qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est stretch (qui indique que les objets du conteneur doivent être étirés sur l'axe).

- -

Voici les valeurs disponibles pour aligner les objets :

- - - -

Dans l'exemple qui suit, la valeur d'align-items est stretch. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

- -

Aligner un objet avec align-self

- -

La propriété align-items définit la valeur de la propriété align-self pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété align-self de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété align-self prend en charge les mêmes valeurs que align-items ainsi qu'un mot-clé auto qui reprendra la valeur définie sur le conteneur flexible.

- -

Dans le prochain exemple, le conteneur flexible a align-items: flex-start, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur first-child afin de cibler le premier élément fils pour lequel on indique align-self: stretch ; un autre élément a été sélectionné via la classe selected et est paramétré avec align-self: center. Vous pouvez modifier la valeur de align-items ou changer les valeurs d'align-self sur les éléments afin d'observer le fonctionnement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

- -

Changer d'axe principal

- -

Jusqu'à présent, les exemples fonctionnaient avec flex-direction valant row et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.

- -

Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical..

- -

Si on passe flex-direction à column, align-items et align-self aligneront les éléments à gauche et à droite.

- -

Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal.

- -

Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que flex-direction vaut ici column.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

- -

Aligner le contenu sur l'axe secondaire : align-content

- -

Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété align-content afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme le groupement des lignes flexibles.

- -

Afin qu'align-content puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.

- -

La propriété align-content prend les valeurs suivantes :

- - - -

Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. align-content vaut space-between ce qui signifie que l'espace disponible sera réparti entre les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.

- -

Vous pouvez modifier la valeur de align-content afin d'observer comment cette propriété fonctionne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

- -

Là encore, on peut passer avec flex-direction: column afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

- -
-

Note : La valeur space-evenly n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.

-
- -

Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.

- -

Aligner le contenu sur l'axe principal

- -

Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : justify-content. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, justify-content on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.

- -

Dans l'exemple initial avec display: flex appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de justify-content qui est flex-start. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.

- -

Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments.

- -

La propriété justify-content prend en charge les mêmes valeurs que align-content.

- - - -

Dans le prochain exemple, justify-content vaut space-between. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

- -

Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car flex-direction est paramétré avec la valeur column, justify-content distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

- -

L'alignement et les modes d'écriture

- -

Rappelons ici qu'avec ces méthodes d'alignement, flex-start et flex-end respectent le mode d'écriture utilisé. Si on utilise justify-content avec la valeur start pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.

- -

Trois éléments alignés sur la gauche

- -

Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.

- -

Trois éléments alignés sur la droite

- -

Dans l'exemple qui suit, on indique explicitement la valeur rtl pour la propriété display afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de justify-content afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

- -

L'alignement et la propriété flex-direction

- -

La ligne de début sera également modifiée si on change la valeur de la propriété flex-direction, par exemple en utilisant row-reverse à la place de row.

- -

Dans le prochain exemple, on utilise flex-direction: row-reverse et justify-content: flex-end. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de flex-direction: row-reverse à flex-direction: row. Vous verrez que les éléments sont désormais groupés à droite.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

- -

Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. flex-start correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.

- -

Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite

- -

On peut changer l'axe avec flex-direction: column. Dans ce cas, flex-start correspondra à l'emplacement du début du premier paragraphe d'un texte.

- -

Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas

- -

Si on utilise flex-direction avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). flex-start correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.

- -

Un diagramme illustrant la ligne de début à droite et celle de fin à gauche

- -

Un diagramme illustrant la ligne de début en bas et celle de fin en haut

- -

Utiliser les marges automatiques pour aligner sur l'axe principal

- -

Il n'existe pas de propriété justify-items ou justify-self qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.

- -

Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme justify-self… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier justify-self sur l'élément d, cela changerait également l'alignement de l'élément e qui suit, ce qui pourrait ou non être voulu.

- -

Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite.

- -

Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant margin-left: auto. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.

- -

Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe push possède la déclaration margin-left: auto. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

- -

Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles

- -

Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur space-evenly pour les propriétés align-content et justify-content.

- -

Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés column-gap et row-gap décrites dans le module de grille CSS (CSS Grid). L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés gap pour les dispositions flexibles.

- -

Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (CSS Grid Layout). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille grâce à cet article. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : Box Alignment Cheatsheet.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..2321587479 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,218 @@ +--- +title: Aligner des éléments dans un conteneur flexible +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible +tags: + - CSS + - Flex + - Guide + - Web + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.

+ +

Afin de centrer notre boîte, nous allons utiliser la propriété align-items afin d'aligner l'objet sur l'axe secondaire (cross axis en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété justify-content est quant à elle utilisée pour aligner l'objet sur l'axe principal (main axis en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).

+ +

Un élément contenant une autre boîte centrée à l'intérieur

+ +

 

+ +

Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Les propriétés responsables de l'alignement

+ +

Voici les propriétés que nous étudierons dans ce guide :

+ + + +

Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.

+ +
+

Note : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : CSS Box Alignment Level 3. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.

+
+ +

L'axe secondaire (cross axis)

+ +

Les propriétés align-items et align-self permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.

+ +

Prenons un exemple simple : nous ajoutons display: flex à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.

+ +

Trois objets dont un avec un texte plus long qui le rend plus grand que les autres

+ +

Trois objets étirés pour mesurer 200 pixels de haut

+ +

Les éléments obtiennent la même hauteur à cause de la valeur initiale de align-items qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est stretch (qui indique que les objets du conteneur doivent être étirés sur l'axe).

+ +

Voici les valeurs disponibles pour aligner les objets :

+ + + +

Dans l'exemple qui suit, la valeur d'align-items est stretch. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

Aligner un objet avec align-self

+ +

La propriété align-items définit la valeur de la propriété align-self pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété align-self de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété align-self prend en charge les mêmes valeurs que align-items ainsi qu'un mot-clé auto qui reprendra la valeur définie sur le conteneur flexible.

+ +

Dans le prochain exemple, le conteneur flexible a align-items: flex-start, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur first-child afin de cibler le premier élément fils pour lequel on indique align-self: stretch ; un autre élément a été sélectionné via la classe selected et est paramétré avec align-self: center. Vous pouvez modifier la valeur de align-items ou changer les valeurs d'align-self sur les éléments afin d'observer le fonctionnement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Changer d'axe principal

+ +

Jusqu'à présent, les exemples fonctionnaient avec flex-direction valant row et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.

+ +

Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical..

+ +

Si on passe flex-direction à column, align-items et align-self aligneront les éléments à gauche et à droite.

+ +

Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal.

+ +

Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que flex-direction vaut ici column.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

+ +

Aligner le contenu sur l'axe secondaire : align-content

+ +

Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété align-content afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme le groupement des lignes flexibles.

+ +

Afin qu'align-content puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.

+ +

La propriété align-content prend les valeurs suivantes :

+ + + +

Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. align-content vaut space-between ce qui signifie que l'espace disponible sera réparti entre les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.

+ +

Vous pouvez modifier la valeur de align-content afin d'observer comment cette propriété fonctionne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Là encore, on peut passer avec flex-direction: column afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Note : La valeur space-evenly n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.

+
+ +

Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.

+ +

Aligner le contenu sur l'axe principal

+ +

Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : justify-content. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, justify-content on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.

+ +

Dans l'exemple initial avec display: flex appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de justify-content qui est flex-start. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.

+ +

Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments.

+ +

La propriété justify-content prend en charge les mêmes valeurs que align-content.

+ + + +

Dans le prochain exemple, justify-content vaut space-between. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+ +

Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car flex-direction est paramétré avec la valeur column, justify-content distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

+ +

L'alignement et les modes d'écriture

+ +

Rappelons ici qu'avec ces méthodes d'alignement, flex-start et flex-end respectent le mode d'écriture utilisé. Si on utilise justify-content avec la valeur start pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.

+ +

Trois éléments alignés sur la gauche

+ +

Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.

+ +

Trois éléments alignés sur la droite

+ +

Dans l'exemple qui suit, on indique explicitement la valeur rtl pour la propriété display afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de justify-content afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

L'alignement et la propriété flex-direction

+ +

La ligne de début sera également modifiée si on change la valeur de la propriété flex-direction, par exemple en utilisant row-reverse à la place de row.

+ +

Dans le prochain exemple, on utilise flex-direction: row-reverse et justify-content: flex-end. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de flex-direction: row-reverse à flex-direction: row. Vous verrez que les éléments sont désormais groupés à droite.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. flex-start correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.

+ +

Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite

+ +

On peut changer l'axe avec flex-direction: column. Dans ce cas, flex-start correspondra à l'emplacement du début du premier paragraphe d'un texte.

+ +

Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas

+ +

Si on utilise flex-direction avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). flex-start correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.

+ +

Un diagramme illustrant la ligne de début à droite et celle de fin à gauche

+ +

Un diagramme illustrant la ligne de début en bas et celle de fin en haut

+ +

Utiliser les marges automatiques pour aligner sur l'axe principal

+ +

Il n'existe pas de propriété justify-items ou justify-self qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.

+ +

Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme justify-self… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier justify-self sur l'élément d, cela changerait également l'alignement de l'élément e qui suit, ce qui pourrait ou non être voulu.

+ +

Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite.

+ +

Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant margin-left: auto. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.

+ +

Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe push possède la déclaration margin-left: auto. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles

+ +

Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur space-evenly pour les propriétés align-content et justify-content.

+ +

Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés column-gap et row-gap décrites dans le module de grille CSS (CSS Grid). L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés gap pour les dispositions flexibles.

+ +

Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (CSS Grid Layout). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille grâce à cet article. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : Box Alignment Cheatsheet.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..652541e0c1 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,369 @@ +--- +title: Mises en page avancées avec les boîtes flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - Reference + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +
{{CSSRef}}
+ +

Voici un ensemble de mixins pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.

+ +

Dans ces mixins, on utilisera :

+ + + +

Ces mixins ont été inspirés par : https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

+ +

Et les articles suivants ont été d'une aide précieuse :

+ + + +
+

Note : Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.

+
+ +

Les conteneurs flexibles

+ +

En utilisant la valeur flex pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur inline-flex permet quant à elle de générer un conteneur flexible en ligne (inline).

+ + + +
+
@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+// Exemple d'utilisation
+%flexbox { @include flexbox; }
+
+ +
+
@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+ +

Direction des boîtes flexibles

+ +

La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.

+ + + +
+
@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Version plus courte :
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+ +

flex-wrap

+ +

La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).

+ + + +
+
@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+ +

flex-flow

+ +

La propriété {{cssxref("flex-flow")}} est une propriété raccourcie pour définir flex-direction et flex-wrap qui permettent respectivement de définir l'axe principal et l'axe secondaire.

+ + + +
+
@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+ +

order

+ +

La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.

+ + + +
+
@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+ +

flex-grow

+ +

La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.

+ + + +
+
@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}
+
+ +

flex-shrink

+ +

La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.

+ + + +
+
@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}
+
+ +

flex-basis

+ +

La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.

+ + + +
+
@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+ +

flex

+ +

La propriété raccourcie {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (flex-grow), le facteur de réduction (flex-shrink) et la longueur de base (flex-basis). Lorsqu'un élément est un élément flexible, c'est flex qui sera utilisée (plutôt que width ou height) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, flex n'aura aucun effet.

+ + + +
+
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Définir une variable pour l'utiliser
+  // avec les propriétés box-flex
+  $fg-boxflex: $fg;
+
+  // Box-Flex ne prend qu'une valeur, on prend donc
+  // la première valeur de la liste et on la renvoie.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+ +

justify-content

+ +

La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.

+ +
+

Note : Les valeurs de la forme space-* ne sont pas prises en charge avec les anciennes syntaxes.

+
+ + + +
+
@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Version plus courte :
+  @mixin flex-just($args...) { @include justify-content($args...); }
+
+ +

align-items

+ +

Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour justify-content mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. align-self permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, align-self correspondra toujours à align-items).

+ + + +
+
@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+ +

align-self

+ + + +
+
@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+ +

align-content

+ +

La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.

+ + + +
+
@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
diff --git a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..dadea30a48 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,235 @@ +--- +title: Les concepts de base pour flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox +tags: + - Beginner + - CSS + - Débutant + - Guide + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

+ +

Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes.

+ +

Les deux axes des boîtes flexibles

+ +

Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.

+ +

L'axe principal

+ +

L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs :

+ + + +

Si on choisit la valeur row ou row-reverse, l'axe principal sera aligné avec la direction « en ligne » (inline direction) (c'est la direction logique qui suit le sens d'écriture du document).

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Si on choisit la valeur column ou column-reverse, l'axe principal suivra la direction de bloc (block direction) et progressera le long de l'axe perpendiculaire au sens d'écriture.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

L'axe secondaire (cross axis)

+ +

L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si flex-direction vaut row ou row-reverse, l'axe secondaire suivra l'axe des colonnes.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Si l'axe principale est column ou column-reverse, l'axe secondaire suivra celui des lignes (horizontales).

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.

+ +

Les lignes de début et de fin

+ +

Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.

+ +

Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.

+ +

Si flex-direction vaut row et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.

+ +

Working in English the start edge is on the left.

+ +

Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.

+ +

The start edge in a RTL language is on the right.

+ +

Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.

+ +

Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.

+ +

Le conteneur flexible

+ +

La zone d'un document sujette au modèle de disposition flexbox est appelée un conteneur flexible. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit flex ou inline-flex. Dès que c'est le cas, les éléments « enfants » directs deviennent des éléments flexibles (flex items). Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :

+ + + +

Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.

+ +

Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} 

+ +

Modifier flex-direction

+ +

En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant flex-direction: row-reverse, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.

+ +

Si on utilise column comme valeur de flex-direction, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise column-reverse, les lignes de début et de fin seront également inversées.

+ +

Dans l'exemple suivant, on utilise flex-direction avec la valeur row-reverse. Vous pouvez utiliser d'autres valeurs — row, column et column-reverse — afin de voir le résultat produit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Créer un conteneur flexible sur plusieurs lignes avec flex-wrap

+ +

Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.

+ +

Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur wrap. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec flex-wrap qui vaut wrap, les éléments passent à la ligne. Si on modifie la valeur avec nowrap (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise nowrap et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Pour approfondir ces notions, vous pouvez consulter l'article Maîtriser le passage à la ligne des éléments flexibles.

+ +

La propriété raccourcie flex-flow

+ +

Il est possible de synthétiser les propriétés flex-direction et flex-wrap avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour flex-direction et la seconde pour flex-wrap.

+ +

Dans l'exemple qui suit, vous pouvez changer les valeurs de flex-direction en utilisant row, row-reverse, column ou column-reverse pour la première et wrap ou nowrap pour la seconde.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Les propriétés appliquées aux éléments flexibles

+ +

Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :

+ + + +

Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +

Avant de revenir à ces propriétés, il nous faut définir le concept d'espace disponible. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.

+ +

Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.

+ +

This flex container has available space after laying out the items.

+ +

Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés flex- qui s'appliquent aux éléments.

+ +

La propriété flex-basis

+ +

La propriété flex-basis définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est auto — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour flex-basis.

+ +

Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré display: flex sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).

+ +

La propriété flex-grow

+ +

La propriété flex-grow est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de flex-basis. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.

+ +

Si on utiliseflex-grow: 1 pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.

+ +

La propriété flex-grow permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique flex-grow avec une valeur de 2 et, pour les autres éléments, flex-grow avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).

+ +

La propriété flex-shrink

+ +

La propriété flex-grow permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété flex-shrink permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que flex-shrink est un entier positif, l'élément peut alors devenir plus petit que la taille définie par flex-basis. De façon analogue à flex-grow, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de flex-shrink sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de flex-shrink plus faibles).

+ +

La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que flex-shrink peut être moins cohérent que flex-grow selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.

+ +
+

Note : Les valeurs de flex-grow et flex-shrink sont des proportions. Autrement dit, si tous les éléments ont flex: 1 1 200px et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait flex: 2 1 200px pour cet élément. Mais avoir flex: 10 1 200px d'une part et flex: 20 1 200px d'autre part fonctionnerait exactement de la même façon.

+
+ +

La propriété raccourcie flex et les valeurs synthétiques

+ +

On voit rarement flex-grow, flex-shrink et flex-basis utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie flex permet de définir les valeurs de cette propriété dans cet ordre : flex-grow, flex-shrink, flex-basis.

+ +

L'exemple suit vous permet de tester différentes valeurs pour flex. La première valeur est flex-grow et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est flex-shrink et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à flex-basis qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

+ +

Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :

+ + + +

Avec flex: initial, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que flex: 0 1 auto. Ici, flex-grow vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille flex-basis. flex-shrink vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. flex-basis vaut auto et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.

+ +

Avec flex: auto, on obtient le même comportement que flex: 1 1 auto, la seule différence avec flex:initial est que les éléments peuvent s'étirer si besoin.

+ +

Avec flex: none, les éléments ne seront pas flexibles. Cette valeur est synonyme de flex: 0 0 auto. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec flex-basis: auto.

+ +

On voit aussi souvent des valeurs comme flex: 1 ou flex: 2, etc. Cela correspond à flex: 1 1 0. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.

+ +

Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alignement, justification et distribution de l'espace disponible entre les éléments

+ +

Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.

+ +

align-items

+ +

La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.

+ +

La valeur initiale de cette propriété est stretch, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).

+ +

On peut également utiliser la valeur flex-start afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur flex-end afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien center pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par flex-direction. La valeur initiale est flex-start qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur flex-end permet de les placer vers la fin et la valeur center permet de les centrer le long de l'axe principal.

+ +

On peut également utiliser la valeur space-between afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur space-around (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur space-evenly.

+ +

Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

Dans l'article Aligner des éléments dans un conteneur flexible, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.

+ +

Prochaines étapes

+ +

Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux flexbox. Dans le prochain article, nous verrons comment cette spécification s'articule avec les autres modules CSS.

diff --git "a/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" "b/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" deleted file mode 100644 index f91090e0dc..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_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 ---- -
{{CSSRef}}
- -

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, le positionnement absolu et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :

- - - -

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 au guide plus générique sur la manipulation des boîtes flexibles en CSS.

- -

Les bases

- -

Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur flex puis définir {{cssxref("flex-flow")}} avec la valeur row (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur column (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é wrap.

- -

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 :

- - - -

Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.

- -

Centrer un élément

- -

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.

- -

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;
-}
-
- -

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

Resultat

- -

{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}

- -

Répartir des conteneurs verticalement

- -

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 auto pour le contenu et la valeur none pour l'en-tête et le pied de page.

- -

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;
-}
-
- -

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

JavaScript

- -
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");
-}
- -

Résultat

- -

{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}

- -

Créer un conteneur horizontal qui se replie

- -

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 wrap sur la propriété {{cssxref("flex-flow")}}.

- -

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;
-}
-
- -

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

JavaScript

- -
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");
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}

- -

Voir aussi

- - 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/cas_utilisation_flexbox/index.html deleted file mode 100644 index 26a4738980..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Cas d'utilisation classiques de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox -tags: - - CSS - - Guide - - Intermediate - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox ---- -

{{CSSRef}}

- -

Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.

- -

Pourquoi choisir les boîtes flexibles ?

- -

Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec l'article sur les relations entre flexbox et les autres méthodes de disposition où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.

- -

Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.

- -

La navigation

- -

Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.

- -

Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.

- -

L'espace distribué en dehors des éléments

- -

Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide Aligner des objets dans un conteneur flexible, qui décrit comment aligner des objets sur l'axe principal.

- -

Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit justify-content: space-between afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur space-around ou, lorsqu'elle est prise en charge, la valeur space-evenly. On peut également utiliser flex-start afin de placer l'espace après les éléments ou encore flex-end pour placer l'espace avant les éléments voire center afin de centrer les éléments.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

- -

L'espace distribué au sein des éléments

- -

On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -

Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera flex: auto qui correspond à la notation raccourcie de flex: 1 1 auto — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.

- -

Dans l'exemple qui suit, vous pouvez modifier flex: auto pour utiliser flex: 1 qui correspond à la notation raccourcie de flex: 1 1 0 et qui permet d'avoir la même largeur pour chaque élément, car la base (flex-basis) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

- -

La navigation séparée

- -

Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.

- -

Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans Utiliser les marges automatiques pour l'alignement sur l'axe principal. Les éléments sont alignés le long de l'axe principal avec flex-start, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.

- -

Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés gap de la spécification sur l'alignement des boîtes (Box Alignment) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

- -

Centrer des éléments

- -

Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.

- -

Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec flex-start ou à la fin avec flex-end.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

- -

À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété align-items sur l'élément parent ou bien on cible l'élément voulu avec align-self.

- -

Une disposition en cartes avec un pied ajustable

- -

Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.

- -

Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas.

- -

On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}: column. Ensuite, on affecte un coefficient flex: 1 à la zone du contenu (ce qui correspond à la notation raccourcie flex: 1 1 0) : l'élément pourra s'étirer ou se rétrécir avec une base 0. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété flex, on peut voir le pied remonter pour être inscrit directement après le contenu.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

- -

Les objets média

- -

Un objet média est un motif classique en design web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.

- -

On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.

- -

Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec flex-start puis on définit .content avec flex: 1. Comme vu dans l'exemple précédent, flex: 1 signifie que cette partie de la carte peut grandir.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

- -

Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.

- -

Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera auto comme valeur pour flex-basis. Toute largeur {{cssxref("width")}} ou max-width appliquée à l'image sera utilisée comme mesure pour flex-basis.

- -
.image img {
-  max-width: 100px;
-}
-
- -

On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec flex: 1, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser flex: auto et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser flex: 1 pour le côté avec l'image et flex: 3 pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base flex-basis  0 et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de flex-grow. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

Inverser la position de l'objet média

- -

Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété flex-direction avec la valeur row-reverse. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe flipped (en plus de la classe existante .media). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

Les contrôles de formulaire

- -

Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).

- -

Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <button> et l'élément <input> dans un conteneur auquel on ajoute une bordure et pour lequel on a display: flex. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <input> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

- -

On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

- -

De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.

- -

Conclusion

- -

En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.

- -

Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.

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/concepts_de_base_flexbox/index.html deleted file mode 100644 index dadea30a48..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: Les concepts de base pour flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox -tags: - - Beginner - - CSS - - Débutant - - Guide - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

- -

Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes.

- -

Les deux axes des boîtes flexibles

- -

Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.

- -

L'axe principal

- -

L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs :

- - - -

Si on choisit la valeur row ou row-reverse, l'axe principal sera aligné avec la direction « en ligne » (inline direction) (c'est la direction logique qui suit le sens d'écriture du document).

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Si on choisit la valeur column ou column-reverse, l'axe principal suivra la direction de bloc (block direction) et progressera le long de l'axe perpendiculaire au sens d'écriture.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

L'axe secondaire (cross axis)

- -

L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si flex-direction vaut row ou row-reverse, l'axe secondaire suivra l'axe des colonnes.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Si l'axe principale est column ou column-reverse, l'axe secondaire suivra celui des lignes (horizontales).

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.

- -

Les lignes de début et de fin

- -

Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.

- -

Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.

- -

Si flex-direction vaut row et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.

- -

Working in English the start edge is on the left.

- -

Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.

- -

The start edge in a RTL language is on the right.

- -

Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.

- -

Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.

- -

Le conteneur flexible

- -

La zone d'un document sujette au modèle de disposition flexbox est appelée un conteneur flexible. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit flex ou inline-flex. Dès que c'est le cas, les éléments « enfants » directs deviennent des éléments flexibles (flex items). Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :

- - - -

Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.

- -

Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} 

- -

Modifier flex-direction

- -

En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant flex-direction: row-reverse, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.

- -

Si on utilise column comme valeur de flex-direction, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise column-reverse, les lignes de début et de fin seront également inversées.

- -

Dans l'exemple suivant, on utilise flex-direction avec la valeur row-reverse. Vous pouvez utiliser d'autres valeurs — row, column et column-reverse — afin de voir le résultat produit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Créer un conteneur flexible sur plusieurs lignes avec flex-wrap

- -

Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.

- -

Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur wrap. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec flex-wrap qui vaut wrap, les éléments passent à la ligne. Si on modifie la valeur avec nowrap (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise nowrap et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Pour approfondir ces notions, vous pouvez consulter l'article Maîtriser le passage à la ligne des éléments flexibles.

- -

La propriété raccourcie flex-flow

- -

Il est possible de synthétiser les propriétés flex-direction et flex-wrap avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour flex-direction et la seconde pour flex-wrap.

- -

Dans l'exemple qui suit, vous pouvez changer les valeurs de flex-direction en utilisant row, row-reverse, column ou column-reverse pour la première et wrap ou nowrap pour la seconde.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Les propriétés appliquées aux éléments flexibles

- -

Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :

- - - -

Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -

Avant de revenir à ces propriétés, il nous faut définir le concept d'espace disponible. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.

- -

Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.

- -

This flex container has available space after laying out the items.

- -

Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés flex- qui s'appliquent aux éléments.

- -

La propriété flex-basis

- -

La propriété flex-basis définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est auto — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour flex-basis.

- -

Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré display: flex sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).

- -

La propriété flex-grow

- -

La propriété flex-grow est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de flex-basis. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.

- -

Si on utiliseflex-grow: 1 pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.

- -

La propriété flex-grow permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique flex-grow avec une valeur de 2 et, pour les autres éléments, flex-grow avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).

- -

La propriété flex-shrink

- -

La propriété flex-grow permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété flex-shrink permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que flex-shrink est un entier positif, l'élément peut alors devenir plus petit que la taille définie par flex-basis. De façon analogue à flex-grow, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de flex-shrink sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de flex-shrink plus faibles).

- -

La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que flex-shrink peut être moins cohérent que flex-grow selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.

- -
-

Note : Les valeurs de flex-grow et flex-shrink sont des proportions. Autrement dit, si tous les éléments ont flex: 1 1 200px et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait flex: 2 1 200px pour cet élément. Mais avoir flex: 10 1 200px d'une part et flex: 20 1 200px d'autre part fonctionnerait exactement de la même façon.

-
- -

La propriété raccourcie flex et les valeurs synthétiques

- -

On voit rarement flex-grow, flex-shrink et flex-basis utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie flex permet de définir les valeurs de cette propriété dans cet ordre : flex-grow, flex-shrink, flex-basis.

- -

L'exemple suit vous permet de tester différentes valeurs pour flex. La première valeur est flex-grow et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est flex-shrink et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à flex-basis qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

- -

Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :

- - - -

Avec flex: initial, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que flex: 0 1 auto. Ici, flex-grow vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille flex-basis. flex-shrink vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. flex-basis vaut auto et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.

- -

Avec flex: auto, on obtient le même comportement que flex: 1 1 auto, la seule différence avec flex:initial est que les éléments peuvent s'étirer si besoin.

- -

Avec flex: none, les éléments ne seront pas flexibles. Cette valeur est synonyme de flex: 0 0 auto. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec flex-basis: auto.

- -

On voit aussi souvent des valeurs comme flex: 1 ou flex: 2, etc. Cela correspond à flex: 1 1 0. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.

- -

Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

Alignement, justification et distribution de l'espace disponible entre les éléments

- -

Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.

- -

align-items

- -

La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.

- -

La valeur initiale de cette propriété est stretch, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).

- -

On peut également utiliser la valeur flex-start afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur flex-end afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien center pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par flex-direction. La valeur initiale est flex-start qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur flex-end permet de les placer vers la fin et la valeur center permet de les centrer le long de l'axe principal.

- -

On peut également utiliser la valeur space-between afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur space-around (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur space-evenly.

- -

Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

Dans l'article Aligner des éléments dans un conteneur flexible, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.

- -

Prochaines étapes

- -

Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux flexbox. Dans le prochain article, nous verrons comment cette spécification s'articule avec les autres modules CSS.

diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html new file mode 100644 index 0000000000..a05bdb1ca2 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -0,0 +1,200 @@ +--- +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 +tags: + - Boîtes flexibles + - CSS + - Flex + - Guide + - Intermediate + - flexbox +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.

+ +

Un premier aperçu

+ +

Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :

+ + + +

Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira flex-grow avec la valeur 2, flex-shrink avec la valeur 1 et flex-basis avec la valeur auto.

+ +
.item {
+  flex: 2 1 auto;
+}
+
+ +

Dans l'article sur les concepts de base relatifs aux boîtes flexibles, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.

+ +

Les concepts majeurs relatifs à l'axe principal

+ +

Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille naturelle des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.

+ +

Le dimensionnement des objets flexibles

+ +

Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?

+ +

CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque et ces valeurs peuvent être utilisées comme unité de longueurs.

+ +

Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est min-content. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur min-content correspond à la taille du plus grand mot du paragraphe.

+ +

Dans le second paragraphe, on utilise la valeur max-content et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

+ +

Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :

+ +

Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse.

+ +

Pour la suite de cet article, gardez à l'esprit l'impact de min-content et max-content lorsque nous verrons les propriétés flex-grow et flex-shrink.

+ +

Espace libre positif et négatif

+ +

Pour étudier ces propriétés, nous devons définir le concept d'espace libre positif et négatif. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut row et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.

+ +

Une image illustrant l'espace restant après que les éléments aient été affichés.

+ +

L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.

+ +

Les objets dépassent du conteneur.

+ +

C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.

+ +

Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur row, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser flex-direction: column (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).

+ +

La propriété flex-basis

+ +

La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est auto. Si  flex-basis vaut auto, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour flex-basis (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour flex-basis pour cet élément).

+ +

Si la taille initiale de l'élément n'est pas définie de façon absolue, auto correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de min- et max-content, car la boîte flexible utilisera max-content comme valeur pour flex-basis. Dans l'exemple suivant, nous verrons comment en tirer parti.

+ +

Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur 0 pour flex-grow et flex-shrink. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une flex-basis de 150px tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

+ +

En plus du mot-clé auto, on peut également utiliser le mot-clé content comme valeur pour flex-basis. Ainsi, flex-basis sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé auto et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.

+ +

Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser flex-basis avec la valeur 0. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons flex-grow.

+ +

La propriété flex-grow

+ +

La propriété {{cssxref("flex-grow")}} définit le coefficient d'agrandissement flexible, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.

+ +

Si tous les objets possèdent la même valeur pour le coefficient flex-grow, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur 1. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur 88, 100 ou 1.2 — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.

+ +

Combiner flex-grow et flex-basis

+ +

Les choses se compliquent lorsque flex-grow et flex-basis interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :

+ +

flex: 1 1 auto;

+ +

Dans ce cas, flex-basis vaut auto et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille max-content des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :

+ +

Une image illustrant l'espace libre positif avec une zone hachurée.

+ +

On utilise ici une valeur flex-basis égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :

+ +

L'espace positif est réparti entre les éléments.

+ +

Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :

+ +

flex: 1 1 0;

+ +

Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut 0 — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient flex-grow, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.

+ +

Vous pouvez modifier le coefficient flex-grow pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

+ +

Affecter différents coefficients flex-grow aux éléments

+ +

Notre compréhension du fonctionnement de flex-grow avec flex-basis nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients flex-grow. Si on conserve la valeur 0 pour flex-basis afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de flex-grow afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :

+ + + +

On utilise flex-basis avec la valeur 0 ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs flex-grow puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

+ +

Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement .25, .25 et .50 — vous obtiendrez alors le même résultat.

+ +

La propriété flex-shrink

+ +

La propriété {{cssxref("flex-shrink")}} définit le coefficient de rétrécissement flexible qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.

+ +

Cette propriété est utilisée lorsque le navigateur calcule les valeurs flex-basis des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que flex-shrink possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.

+ +

Ainsi, si flex-grow gère la façon dont on peut ajouter de l'espace disponible, flex-shrink gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.

+ +

Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si flex-shrink vaut 0, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

+ +

En passant la valeur de flex-shrink à 1, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.

+ +

Combiner flex-shrink et flex-basis

+ +

On pourrait dire et penser que flex-shrink fonctionne de la même façon que flex-grow. Toutefois, deux arguments viennent contrecarrer cette analogie.

+ +

Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre flex-shrink et l'espace libre négatif et celui de flex-grow avec l'espace libre positif :

+ +
+

“Note : Le coefficient flex-shrink est multiplié par la taille de base (flex-basis) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”

+
+ +

Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  min-content — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.

+ +

On peut observer ce seuil avec min-content dans l'exemple qui suit où flex-basis est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que min-content. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

+ +

En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.

+ +

Utiliser différents coefficients flex-shrink pour différents éléments

+ +

Comme avec flex-grow, on peut utiliser différents coefficients flex-shrink. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).

+ +

Dans l'exemple suivant, le premier objet possède un coefficient flex-shrink égal à 1, le deuxième a un coefficient égal à 0 (il ne rétrécira pas du tout) et le troisième est paramétré avec 4. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec flex-grow, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

+ +

Maîtriser le dimensionnement des objets flexibles

+ +

Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :

+ +

Quelle est la taille de base de l'objet ?

+ +
    +
  1. Si  flex-basis vaut auto et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.
    2. +
  2. Si  flex-basis vaut auto ou content (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément
    3. +
  3. Si flex-basis est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.
    4. +
  4. Si  flex-basis vaut 0, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.
    5. +
+ +

De l'espace est-il disponible ?

+ +

Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.

+ +
    +
  1. Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété flex-grow qui entrera en jeu.
    2. +
  2. Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété flex-shrink qui sera utilisée.
    3. +
+ +

Les autres façons de distribuer l'espace

+ +

Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans le guide sur l'alignement. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.

+ +

Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.

diff --git "a/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" "b/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" deleted file mode 100644 index a05bdb1ca2..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" +++ /dev/null @@ -1,200 +0,0 @@ ---- -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 -tags: - - Boîtes flexibles - - CSS - - Flex - - Guide - - Intermediate - - flexbox -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.

- -

Un premier aperçu

- -

Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :

- - - -

Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira flex-grow avec la valeur 2, flex-shrink avec la valeur 1 et flex-basis avec la valeur auto.

- -
.item {
-  flex: 2 1 auto;
-}
-
- -

Dans l'article sur les concepts de base relatifs aux boîtes flexibles, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.

- -

Les concepts majeurs relatifs à l'axe principal

- -

Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille naturelle des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.

- -

Le dimensionnement des objets flexibles

- -

Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?

- -

CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque et ces valeurs peuvent être utilisées comme unité de longueurs.

- -

Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est min-content. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur min-content correspond à la taille du plus grand mot du paragraphe.

- -

Dans le second paragraphe, on utilise la valeur max-content et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

- -

Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :

- -

Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse.

- -

Pour la suite de cet article, gardez à l'esprit l'impact de min-content et max-content lorsque nous verrons les propriétés flex-grow et flex-shrink.

- -

Espace libre positif et négatif

- -

Pour étudier ces propriétés, nous devons définir le concept d'espace libre positif et négatif. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut row et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.

- -

Une image illustrant l'espace restant après que les éléments aient été affichés.

- -

L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.

- -

Les objets dépassent du conteneur.

- -

C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.

- -

Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur row, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser flex-direction: column (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).

- -

La propriété flex-basis

- -

La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est auto. Si  flex-basis vaut auto, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour flex-basis (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour flex-basis pour cet élément).

- -

Si la taille initiale de l'élément n'est pas définie de façon absolue, auto correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de min- et max-content, car la boîte flexible utilisera max-content comme valeur pour flex-basis. Dans l'exemple suivant, nous verrons comment en tirer parti.

- -

Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur 0 pour flex-grow et flex-shrink. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une flex-basis de 150px tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

- -

En plus du mot-clé auto, on peut également utiliser le mot-clé content comme valeur pour flex-basis. Ainsi, flex-basis sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé auto et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.

- -

Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser flex-basis avec la valeur 0. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons flex-grow.

- -

La propriété flex-grow

- -

La propriété {{cssxref("flex-grow")}} définit le coefficient d'agrandissement flexible, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.

- -

Si tous les objets possèdent la même valeur pour le coefficient flex-grow, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur 1. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur 88, 100 ou 1.2 — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.

- -

Combiner flex-grow et flex-basis

- -

Les choses se compliquent lorsque flex-grow et flex-basis interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :

- -

flex: 1 1 auto;

- -

Dans ce cas, flex-basis vaut auto et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille max-content des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :

- -

Une image illustrant l'espace libre positif avec une zone hachurée.

- -

On utilise ici une valeur flex-basis égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :

- -

L'espace positif est réparti entre les éléments.

- -

Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :

- -

flex: 1 1 0;

- -

Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut 0 — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient flex-grow, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.

- -

Vous pouvez modifier le coefficient flex-grow pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

- -

Affecter différents coefficients flex-grow aux éléments

- -

Notre compréhension du fonctionnement de flex-grow avec flex-basis nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients flex-grow. Si on conserve la valeur 0 pour flex-basis afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de flex-grow afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :

- - - -

On utilise flex-basis avec la valeur 0 ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs flex-grow puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

- -

Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement .25, .25 et .50 — vous obtiendrez alors le même résultat.

- -

La propriété flex-shrink

- -

La propriété {{cssxref("flex-shrink")}} définit le coefficient de rétrécissement flexible qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.

- -

Cette propriété est utilisée lorsque le navigateur calcule les valeurs flex-basis des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que flex-shrink possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.

- -

Ainsi, si flex-grow gère la façon dont on peut ajouter de l'espace disponible, flex-shrink gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.

- -

Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si flex-shrink vaut 0, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

- -

En passant la valeur de flex-shrink à 1, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.

- -

Combiner flex-shrink et flex-basis

- -

On pourrait dire et penser que flex-shrink fonctionne de la même façon que flex-grow. Toutefois, deux arguments viennent contrecarrer cette analogie.

- -

Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre flex-shrink et l'espace libre négatif et celui de flex-grow avec l'espace libre positif :

- -
-

“Note : Le coefficient flex-shrink est multiplié par la taille de base (flex-basis) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”

-
- -

Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  min-content — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.

- -

On peut observer ce seuil avec min-content dans l'exemple qui suit où flex-basis est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que min-content. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

- -

En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.

- -

Utiliser différents coefficients flex-shrink pour différents éléments

- -

Comme avec flex-grow, on peut utiliser différents coefficients flex-shrink. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).

- -

Dans l'exemple suivant, le premier objet possède un coefficient flex-shrink égal à 1, le deuxième a un coefficient égal à 0 (il ne rétrécira pas du tout) et le troisième est paramétré avec 4. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec flex-grow, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

- -

Maîtriser le dimensionnement des objets flexibles

- -

Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :

- -

Quelle est la taille de base de l'objet ?

- -
    -
  1. Si  flex-basis vaut auto et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.
    2. -
  2. Si  flex-basis vaut auto ou content (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément
    3. -
  3. Si flex-basis est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.
    4. -
  4. Si  flex-basis vaut 0, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.
    5. -
- -

De l'espace est-il disponible ?

- -

Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.

- -
    -
  1. Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété flex-grow qui entrera en jeu.
    2. -
  2. Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété flex-shrink qui sera utilisée.
    3. -
- -

Les autres façons de distribuer l'espace

- -

Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans le guide sur l'alignement. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.

- -

Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.

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/liens_entre_flexbox_et_les_autres_dispositions/index.html deleted file mode 100644 index c6e9691ae5..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -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 -tags: - - CSS - - Guide - - display - - flexbox - - grid -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods ---- -
{{CSSRef}}
- -

Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.

- -
-

Note : Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.

-
- -

Le module d'alignement des boîtes (Box Alignment)

- -

La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.

- -

Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de la spécification sur l'alignement des boîtes (Box Alignment). Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.

- -

Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de flexbox et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification flexbox, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :

- -
-

« Note : Bien que les propriétés d'alignement soient définies dans le module CSS Box Alignment CSS-ALIGN-3, le module Flexible Box Layout reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que CSS Box Alignment Level 3 soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module Box Alignment s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module Box Alignment, lorsqu'il sera complet, remplacera les définitions énoncées ici. »

-
- -

Dans un prochain article de ce guide (Aligner les éléments d'un conteneur flexibles), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.

- -

Les propriétés d'espacement (gap)

- -

Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées grid-row-gap, grid-column-gap et grid-gap. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés gap, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.

- -

Les modes d'écritures (Writing Modes)

- -

Dans l'article sur les concepts de bases relatifs aux flexbox, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS Writing Modes qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions de bloc et en ligne qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.

- -

On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez consulter cet article pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.

- -

Les différents modes d'écritures

- -

La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

- -

Actuellement, seul Firefox prend en charge sideways-rl et sideways-lr. Il existe également certains problèmes relatifs à writing-mode et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter les informations de compatibilité pour la propriété writing-mode. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !

- -

On notera que la propriété writing-mode CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut dir et lang sur l'élément html afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.

- -

Les boîtes flexibles et les autres méthodes de disposition

- -

La spécification sur les boîtes flexibles contient une définition de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.

- -

Un élément avec display: flex se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et les marges des conteneurs ne fusionneront pas.

- -

Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (cleared) et qu'il devient flexible car son élément parent reçoit display: flex, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec inline-block ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.

- -

Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit display: flex. Si vous retirez display: flex, vous pouvez voir que l'élément .box s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant display: flex, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

- -

Les boîtes flexibles et la disposition en grille

- -

La disposition en grille (CSS Grid) et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés flex qui auraient pu être affectées aux éléments enfants seront ignorées.

- -

Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.

- -

Flexbox / grille : quelle différence ?

- -

On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?

- -

La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

- -

Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

- -

Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.

- -

Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.

- -

De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.

- -

Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter cet article à propos des relations entre la grille CSS et les autres méthodes de disposition. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.

- -

Les boîtes flexibles et display: contents

- -

La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :

- -
-

« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »

-
- -

La valeur de la propriété display contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.

- -

Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils directs du conteneur flexible.

- -

En ajoutant display: contents à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec display: contents afin que l'élément parent « revienne ».

- -

On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.

- -
-

Attention ! Utiliser display: contents entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé display: none). La valeur contents doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).

-
- -

En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire display: contents dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

- -

La prise en charge de display:contents est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge display: contents et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.

diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html new file mode 100644 index 0000000000..6b78cba48f --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -0,0 +1,101 @@ +--- +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 +tags: + - CSS + - Grille + - Guide + - Intermediate + - flexbox + - grid + - wrapping +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +--- +

{{CSSRef}}

+ +

Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut row ou de nouvelles colonnes si flex-direction vaut column. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser une disposition en grille (CSS Grid).

+ +

Créer des passages à la ligne

+ +

La valeur initiale de la propriété {{cssxref("flex-wrap")}} est nowrap. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété flex-wrap avec la valeur wrap, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs row wrap ou column wrap.

+ +

Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels flex-basis vaut 160px et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

+ +

On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

+ +

Le retour à la ligne et flex-direction

+ +

Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule flex-direction. Si flex-direction vaut row-reverse, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

+ +

On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.

+ +

Des explications sur cette disposition unidimensionnelle

+ +

Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.

+ +

Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.

+ +

Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

+ +

C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.

+ +

Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?

+ +

La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (floats). Si on affecte des largeurs en pourcentage aux éléments flexibles (via flex-basis ou avec une largeur sur l'élément et avec flex-basis en auto) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.

+ +

Dans cet exemple, on a flex-grow et flex-shrink qui valent 0 afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

+ +

Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.

+ +

Créer des gouttières entre les éléments

+ +

Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour le module d'alignement des boîtes et pour Flexbox. À l'avenir, nous pourrons utiliser row-gap et column-gap pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.

+ +

On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.

+ +

Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

+ +

L'impact de visibility: collapse

+ +

La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique visibility: collapse (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :

+ +
+

“Indiquer visibility:collapse sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de visibility:collapse sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - Éléments repliés

+
+ +

Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.

+ +

Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec visibility: collapse et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire visibility: collapse ou qu'on modifie la valeur de visible, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.

+ +
+

Note : Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent collapse comme équivalent à hidden.

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

+ +

Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.

+ +

Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.

+ +

Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

+ +

Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.

+ +

La différence entre visibility: collapse et display: none

+ +

Lorsqu'on utilise display: none sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. visibility: hidden permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.

diff --git "a/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" "b/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" deleted file mode 100644 index 6b78cba48f..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -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 -tags: - - CSS - - Grille - - Guide - - Intermediate - - flexbox - - grid - - wrapping -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items ---- -

{{CSSRef}}

- -

Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut row ou de nouvelles colonnes si flex-direction vaut column. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser une disposition en grille (CSS Grid).

- -

Créer des passages à la ligne

- -

La valeur initiale de la propriété {{cssxref("flex-wrap")}} est nowrap. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété flex-wrap avec la valeur wrap, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs row wrap ou column wrap.

- -

Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels flex-basis vaut 160px et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

- -

On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

- -

Le retour à la ligne et flex-direction

- -

Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule flex-direction. Si flex-direction vaut row-reverse, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

- -

On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.

- -

Des explications sur cette disposition unidimensionnelle

- -

Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.

- -

Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.

- -

Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

- -

C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.

- -

Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?

- -

La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (floats). Si on affecte des largeurs en pourcentage aux éléments flexibles (via flex-basis ou avec une largeur sur l'élément et avec flex-basis en auto) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.

- -

Dans cet exemple, on a flex-grow et flex-shrink qui valent 0 afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

- -

Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.

- -

Créer des gouttières entre les éléments

- -

Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour le module d'alignement des boîtes et pour Flexbox. À l'avenir, nous pourrons utiliser row-gap et column-gap pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.

- -

On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.

- -

Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

- -

L'impact de visibility: collapse

- -

La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique visibility: collapse (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :

- -
-

“Indiquer visibility:collapse sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de visibility:collapse sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - Éléments repliés

-
- -

Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.

- -

Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec visibility: collapse et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire visibility: collapse ou qu'on modifie la valeur de visible, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.

- -
-

Note : Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent collapse comme équivalent à hidden.

-
- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

- -

Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.

- -

Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.

- -

Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

- -

Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.

- -

La différence entre visibility: collapse et display: none

- -

Lorsqu'on utilise display: none sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. visibility: hidden permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.

diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/mixins/index.html deleted file mode 100644 index 652541e0c1..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/mixins/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: Mises en page avancées avec les boîtes flexibles -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -tags: - - CSS - - Reference - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -
{{CSSRef}}
- -

Voici un ensemble de mixins pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.

- -

Dans ces mixins, on utilisera :

- - - -

Ces mixins ont été inspirés par : https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

- -

Et les articles suivants ont été d'une aide précieuse :

- - - -
-

Note : Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.

-
- -

Les conteneurs flexibles

- -

En utilisant la valeur flex pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur inline-flex permet quant à elle de générer un conteneur flexible en ligne (inline).

- - - -
-
@mixin flexbox {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-// Exemple d'utilisation
-%flexbox { @include flexbox; }
-
- -
-
@mixin inline-flex {
-  display: -webkit-inline-box;
-  display: -moz-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-%inline-flex { @include inline-flex; }
-
- -

Direction des boîtes flexibles

- -

La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.

- - - -
-
@mixin flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-    -moz-box-direction: reverse;
-    -moz-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: normal;
-    -moz-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: reverse;
-    -moz-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-    -moz-box-direction: normal;
-    -moz-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-// Version plus courte :
-@mixin flex-dir($args...) { @include flex-direction($args...); }
-
- -

flex-wrap

- -

La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).

- - - -
-
@mixin flex-wrap($value: nowrap) {
-  // No Webkit/FF Box fallback.
-  -webkit-flex-wrap: $value;
-  @if $value == nowrap {
-    -ms-flex-wrap: none;
-  } @else {
-    -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}
-
- -

flex-flow

- -

La propriété {{cssxref("flex-flow")}} est une propriété raccourcie pour définir flex-direction et flex-wrap qui permettent respectivement de définir l'axe principal et l'axe secondaire.

- - - -
-
@mixin flex-flow($values: (row nowrap)) {
-  // No Webkit/FF Box fallback.
-  -webkit-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}
-
- -

order

- -

La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.

- - - -
-
@mixin order($int: 0) {
-  -webkit-box-ordinal-group: $int + 1;
-  -moz-box-ordinal-group: $int + 1;
-  -webkit-order: $int;
-  -ms-flex-order: $int;
-  order: $int;
-}
-
- -

flex-grow

- -

La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.

- - - -
-
@mixin flex-grow($int: 1) {
-  -webkit-box-flex: $int;
-  -moz-box-flex: $int;
-  -webkit-flex-grow: $int;
-  -ms-flex: $int;
-  flex-grow: $int;
-}
-
- -

flex-shrink

- -

La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.

- - - -
-
@mixin flex-shrink($int: 0) {
-  -webkit-flex-shrink: $int;
-  -moz-flex-shrink: $int;
-  -ms-flex: $int;
-  flex-shrink: $int;
-}
-
- -

flex-basis

- -

La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.

- - - -
-
@mixin flex-basis($value: auto) {
-  -webkit-flex-basis: $value;
-  flex-basis: $value;
-}
-
- -

flex

- -

La propriété raccourcie {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (flex-grow), le facteur de réduction (flex-shrink) et la longueur de base (flex-basis). Lorsqu'un élément est un élément flexible, c'est flex qui sera utilisée (plutôt que width ou height) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, flex n'aura aucun effet.

- - - -
-
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
-
-  // Définir une variable pour l'utiliser
-  // avec les propriétés box-flex
-  $fg-boxflex: $fg;
-
-  // Box-Flex ne prend qu'une valeur, on prend donc
-  // la première valeur de la liste et on la renvoie.
-  @if type-of($fg) == 'list' {
-    $fg-boxflex: nth($fg, 1);
-  }
-
-  -webkit-box: $fg-boxflex;
-  -moz-box: $fg-boxflex;
-  -webkit-flex: $fg $fs $fb;
-  -ms-flex: $fg $fs $fb;
-  flex: $fg $fs $fb;
-}
-
- -

justify-content

- -

La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.

- -
-

Note : Les valeurs de la forme space-* ne sont pas prises en charge avec les anciennes syntaxes.

-
- - - -
-
@mixin justify-content($value: flex-start) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -moz-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -moz-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -moz-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else if $value == space-around {
-    -ms-flex-pack: distribute;
-  } @else {
-    -webkit-box-pack: $value;
-    -moz-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  justify-content: $value;
-}
-  // Version plus courte :
-  @mixin flex-just($args...) { @include justify-content($args...); }
-
- -

align-items

- -

Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour justify-content mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. align-self permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, align-self correspondra toujours à align-items).

- - - -
-
@mixin align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -moz-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -moz-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -moz-box-align: $value;
-    -ms-flex-align: $value;
-  }
-  -webkit-align-items: $value;
-  align-items: $value;
-}
-
- -

align-self

- - - -
-
@mixin align-self($value: auto) {
-  // No Webkit Box Fallback.
-  -webkit-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}
-
- -

align-content

- -

La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.

- - - -
-
@mixin align-content($value: stretch) {
-  // No Webkit Box Fallback.
-  -webkit-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}
-
diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html new file mode 100644 index 0000000000..acd32e0de0 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -0,0 +1,139 @@ +--- +title: Ordonner les éléments flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles +tags: + - Accessibilité + - Boîtes flexibles + - CSS + - Guide + - Intermediate + - a11y + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +

{{CSSRef}}

+ +

Les nouvelles méthodes de disposition telles que les boîtes flexibles (flexbox) et la grille CSS (CSS Grid) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.

+ +

Inverser l'affichage des éléments

+ +

La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :

+ + + +

Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.

+ +

Les objets sont affichés sur une ligne horizontale qui commence à gauche.

+ +

Les objets sont affichés sur une colonne qui commence en haut.

+ +

Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.

+ +

Les éléments sont affichés dans l'ordre inverse et commencent à droite.

+ +

Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas.

+ +

Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment row et row-reverse fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), row correspondrait au côté droit et  row-reverse au côté gauche.

+ +

Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse.

+ +

Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'affichage est inversé. Sur ce sujet, la spécification explique :

+ +
+

“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - Ordre et Orientation

+
+ +

Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.

+ +

Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :

+ +
+

“Les auteurs ne doivent pas utiliser order ou les valeurs -reverse de flex-flow/flex-direction comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.”

+
+ +
+

Note : Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.

+
+ +

Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de flex-direction, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+ +

De la même façon, changer la valeur de flex-direction ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.

+ +

La propriété order

+ +

En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.

+ +

La propriété order permet de disposer les éléments au sein de groupes ordinaux. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.

+ +

Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs order comme suit :

+ + + +

Les éléments seront affichés sur la page dans l'ordre suivant :

+ + + +

Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé.

+ +

Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de flex-direction pour utiliser row-reverse — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+ +

Par défaut, la valeur de la propriété order est 0 pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour order.

+ +

On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre -1 au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.

+ +

Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe active dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+ +

Les éléments sont affichés dans ce que la spécification intitule un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"). La valeur de la propriété order est prise en compte avant que les éléments soient affichés.

+ +

L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels order est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.

+ +

La propriété order et l'accessibilité

+ +

La propriété order aura exactement les mêmes conséquences qu'une modification de flex-direction sur l'accessibilité. Utiliser order modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.

+ +

En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :

+ + + +

Cas d'utilisation pour order

+ +

Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété order à bon escient permet d'implémenter certains motifs récurrents.

+ +

Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un design comme celui-ci.

+ +

Un composant avec une date, un titre puis un contenu.

+ +

Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété order.

+ +

Dans cet exemple, la carte sera le conteneur flexible et flex-direction aura la valeur column. Pour la date, on affectera un ordre avec la propriété order qui vaut -1 qui permettra de la placer au-dessus du titre.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+ +

Ces légères adaptations sont caractéristiques des cas où la propriété order se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. order peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.

diff --git "a/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" "b/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" deleted file mode 100644 index acd32e0de0..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Ordonner les éléments flexibles -slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles -tags: - - Accessibilité - - Boîtes flexibles - - CSS - - Guide - - Intermediate - - a11y - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items ---- -

{{CSSRef}}

- -

Les nouvelles méthodes de disposition telles que les boîtes flexibles (flexbox) et la grille CSS (CSS Grid) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.

- -

Inverser l'affichage des éléments

- -

La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :

- - - -

Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.

- -

Les objets sont affichés sur une ligne horizontale qui commence à gauche.

- -

Les objets sont affichés sur une colonne qui commence en haut.

- -

Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.

- -

Les éléments sont affichés dans l'ordre inverse et commencent à droite.

- -

Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas.

- -

Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment row et row-reverse fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), row correspondrait au côté droit et  row-reverse au côté gauche.

- -

Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse.

- -

Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'affichage est inversé. Sur ce sujet, la spécification explique :

- -
-

“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - Ordre et Orientation

-
- -

Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.

- -

Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :

- -
-

“Les auteurs ne doivent pas utiliser order ou les valeurs -reverse de flex-flow/flex-direction comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.”

-
- -
-

Note : Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.

-
- -

Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de flex-direction, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

- -

De la même façon, changer la valeur de flex-direction ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.

- -

La propriété order

- -

En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.

- -

La propriété order permet de disposer les éléments au sein de groupes ordinaux. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.

- -

Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs order comme suit :

- - - -

Les éléments seront affichés sur la page dans l'ordre suivant :

- - - -

Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé.

- -

Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de flex-direction pour utiliser row-reverse — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

- -

Par défaut, la valeur de la propriété order est 0 pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour order.

- -

On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre -1 au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.

- -

Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe active dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

- -

Les éléments sont affichés dans ce que la spécification intitule un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"). La valeur de la propriété order est prise en compte avant que les éléments soient affichés.

- -

L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels order est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.

- -

La propriété order et l'accessibilité

- -

La propriété order aura exactement les mêmes conséquences qu'une modification de flex-direction sur l'accessibilité. Utiliser order modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.

- -

En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :

- - - -

Cas d'utilisation pour order

- -

Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété order à bon escient permet d'implémenter certains motifs récurrents.

- -

Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un design comme celui-ci.

- -

Un composant avec une date, un titre puis un contenu.

- -

Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété order.

- -

Dans cet exemple, la carte sera le conteneur flexible et flex-direction aura la valeur column. Pour la date, on affectera un ordre avec la propriété order qui vaut -1 qui permettra de la placer au-dessus du titre.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

- -

Ces légères adaptations sont caractéristiques des cas où la propriété order se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. order peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.

diff --git a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html new file mode 100644 index 0000000000..c6e9691ae5 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -0,0 +1,125 @@ +--- +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 +tags: + - CSS + - Guide + - display + - flexbox + - grid +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +--- +
{{CSSRef}}
+ +

Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.

+ +
+

Note : Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.

+
+ +

Le module d'alignement des boîtes (Box Alignment)

+ +

La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.

+ +

Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de la spécification sur l'alignement des boîtes (Box Alignment). Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.

+ +

Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de flexbox et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification flexbox, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :

+ +
+

« Note : Bien que les propriétés d'alignement soient définies dans le module CSS Box Alignment CSS-ALIGN-3, le module Flexible Box Layout reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que CSS Box Alignment Level 3 soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module Box Alignment s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module Box Alignment, lorsqu'il sera complet, remplacera les définitions énoncées ici. »

+
+ +

Dans un prochain article de ce guide (Aligner les éléments d'un conteneur flexibles), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.

+ +

Les propriétés d'espacement (gap)

+ +

Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées grid-row-gap, grid-column-gap et grid-gap. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés gap, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.

+ +

Les modes d'écritures (Writing Modes)

+ +

Dans l'article sur les concepts de bases relatifs aux flexbox, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS Writing Modes qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions de bloc et en ligne qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.

+ +

On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez consulter cet article pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.

+ +

Les différents modes d'écritures

+ +

La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+ +

Actuellement, seul Firefox prend en charge sideways-rl et sideways-lr. Il existe également certains problèmes relatifs à writing-mode et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter les informations de compatibilité pour la propriété writing-mode. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !

+ +

On notera que la propriété writing-mode CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut dir et lang sur l'élément html afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.

+ +

Les boîtes flexibles et les autres méthodes de disposition

+ +

La spécification sur les boîtes flexibles contient une définition de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.

+ +

Un élément avec display: flex se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et les marges des conteneurs ne fusionneront pas.

+ +

Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (cleared) et qu'il devient flexible car son élément parent reçoit display: flex, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec inline-block ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.

+ +

Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit display: flex. Si vous retirez display: flex, vous pouvez voir que l'élément .box s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant display: flex, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+ +

Les boîtes flexibles et la disposition en grille

+ +

La disposition en grille (CSS Grid) et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés flex qui auraient pu être affectées aux éléments enfants seront ignorées.

+ +

Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.

+ +

Flexbox / grille : quelle différence ?

+ +

On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?

+ +

La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+ +

Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+ +

Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.

+ +

Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.

+ +

De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.

+ +

Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter cet article à propos des relations entre la grille CSS et les autres méthodes de disposition. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.

+ +

Les boîtes flexibles et display: contents

+ +

La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :

+ +
+

« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »

+
+ +

La valeur de la propriété display contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.

+ +

Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils directs du conteneur flexible.

+ +

En ajoutant display: contents à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec display: contents afin que l'élément parent « revienne ».

+ +

On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.

+ +
+

Attention ! Utiliser display: contents entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé display: none). La valeur contents doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).

+
+ +

En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire display: contents dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+ +

La prise en charge de display:contents est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge display: contents et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.

diff --git "a/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" "b/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" deleted file mode 100644 index b36e1eb0f4..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_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 ---- -
{{CSSRef}}
- -

Les boîtes flexibles (flexbox) 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.

- -

Il était une fois flexbox…

- -

Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de Candidate Recommendation 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é.

- -

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.

- -

En 2009, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser display: box et on disposait ensuite de différentes propriétés box-* qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.

- -

Vint ensuite une mise à jour de la spécification pour mettre à jour la syntaxe : display: flexbox — là encore, ces valeurs étaient préfixées.

- -

Enfin, la spécification a été mise à jour pour définir display: flex 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.

- -

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 display: box ou display: flexbox, vous pouvez en déduire qu'il s'agit d'informations obsolètes.

- -

État de la compatibilité des navigateurs

- -

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 :

- - - -

On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec display: flex mais que de nombreux bugs sont présents dans cette implémentation.

- -

Problèmes fréquents

- -

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

- -

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.

- -
.wrapper {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
- -

Autoprefixer Online 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 Can I Use 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.

- -

Techniques de recours

- -

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.

- -

Éléments flottants

- -
-

“float et clear ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - 3. Conteneurs flexibles

-
- -

Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite display: flex 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.

- -

Pour tester le comportement alternatif, vous pouvez retirer display: flex du conteneur englobant.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

- -

display: inline-block

- -

Lorsqu'un élément disposé avec inline-block devient un élément flexible, cet élément devient analogue à un bloc et le comportement de display: inline-block qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.

- -

Vous pouvez retirer la règle avec display: flex 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 display: inline-block.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

- -

display: table-

- -

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.

- -

Si vous utilisez display: table-cell 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.

- -

Si vous déclarez ensuite display: flex 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.

- -
-

“Note : certaines valeurs de display 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 display: table-cell deviendront deux éléments flexibles distincts avec display: block plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - 4. Éléments flexibles

-
- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

- -

La propriété vertical-align

- -

L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode display: inline-block. Les deux modes display: table-cell et display: inline-block permettent d'utiliser cette propriété. La propriété vertical-align 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 display: table-cell ou display: inline-block comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

- -

Requêtes de fonctionnalités et flexbox

- -

Il est possible d'utiliser les requêtes de fonctionnalité (feature queries) afin de détecter la prise en charge des boîtes flexibles :

- -
@supports (display: flex) {
-  // code utilisé pour les navigateurs qui
-  // prennent en charge cette fonctionnalité
-}
- -

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

- -
@supports (display: flex) or (display: -webkit-box) {
-  // code pour les navigateurs qui
-  // prennent en charge cette fonctionnalité
-}
- -

Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire Using Feature Queries in CSS (en anglais) sur le blog Hacks de Mozilla.

- -

Conclusion

- -

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.

diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..26a4738980 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,140 @@ +--- +title: Cas d'utilisation classiques de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox +tags: + - CSS + - Guide + - Intermediate + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.

+ +

Pourquoi choisir les boîtes flexibles ?

+ +

Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec l'article sur les relations entre flexbox et les autres méthodes de disposition où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.

+ +

Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.

+ +

La navigation

+ +

Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.

+ +

Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.

+ +

L'espace distribué en dehors des éléments

+ +

Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide Aligner des objets dans un conteneur flexible, qui décrit comment aligner des objets sur l'axe principal.

+ +

Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit justify-content: space-between afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur space-around ou, lorsqu'elle est prise en charge, la valeur space-evenly. On peut également utiliser flex-start afin de placer l'espace après les éléments ou encore flex-end pour placer l'espace avant les éléments voire center afin de centrer les éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

L'espace distribué au sein des éléments

+ +

On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +

Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera flex: auto qui correspond à la notation raccourcie de flex: 1 1 auto — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.

+ +

Dans l'exemple qui suit, vous pouvez modifier flex: auto pour utiliser flex: 1 qui correspond à la notation raccourcie de flex: 1 1 0 et qui permet d'avoir la même largeur pour chaque élément, car la base (flex-basis) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

La navigation séparée

+ +

Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.

+ +

Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans Utiliser les marges automatiques pour l'alignement sur l'axe principal. Les éléments sont alignés le long de l'axe principal avec flex-start, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.

+ +

Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés gap de la spécification sur l'alignement des boîtes (Box Alignment) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrer des éléments

+ +

Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.

+ +

Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec flex-start ou à la fin avec flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété align-items sur l'élément parent ou bien on cible l'élément voulu avec align-self.

+ +

Une disposition en cartes avec un pied ajustable

+ +

Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.

+ +

Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas.

+ +

On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}: column. Ensuite, on affecte un coefficient flex: 1 à la zone du contenu (ce qui correspond à la notation raccourcie flex: 1 1 0) : l'élément pourra s'étirer ou se rétrécir avec une base 0. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété flex, on peut voir le pied remonter pour être inscrit directement après le contenu.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Les objets média

+ +

Un objet média est un motif classique en design web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.

+ +

On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.

+ +

Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec flex-start puis on définit .content avec flex: 1. Comme vu dans l'exemple précédent, flex: 1 signifie que cette partie de la carte peut grandir.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.

+ +

Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera auto comme valeur pour flex-basis. Toute largeur {{cssxref("width")}} ou max-width appliquée à l'image sera utilisée comme mesure pour flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec flex: 1, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser flex: auto et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser flex: 1 pour le côté avec l'image et flex: 3 pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base flex-basis  0 et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de flex-grow. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Inverser la position de l'objet média

+ +

Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété flex-direction avec la valeur row-reverse. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe flipped (en plus de la classe existante .media). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Les contrôles de formulaire

+ +

Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).

+ +

Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <button> et l'élément <input> dans un conteneur auquel on ajoute une bordure et pour lequel on a display: flex. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <input> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.

+ +

Conclusion

+ +

En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.

+ +

Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.

diff --git a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html new file mode 100644 index 0000000000..8566b8accd --- /dev/null +++ b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -0,0 +1,128 @@ +--- +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 +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.

+ +

Le flux normal est défini par la spécification CSS 2.1 qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (block) ou en ligne (inline) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.

+ +

Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :

+ +
+

« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.
+
+ Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1

+
+ +

Quant aux éléments du contexte de formatage en ligne :

+ +
+

« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (padding) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2

+
+ +

On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.

+ +

Les éléments qui participent à un contexte de formatage de bloc

+ +

Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.

+ +

+ +

Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.

+ +

+ +

Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.

+ +

Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

La fusion des marges

+ +

La spécification indique que les marges verticales entre chaque éléments de bloc fusionnent. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.

+ +

Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de 40px car la plus petite est « fusionnée » avec la plus grande.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

Pour en savoir plus à propos de la fusion des marges, vous pouvez lire l'article dédié à la fusion des marges.

+ +
+

Note : Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.

+ +

+
+ +

Les éléments qui participent à un contexte de formatage en ligne

+ +

Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).

+ +

Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

Les boîtes autour des mots, avant et après l'élément {{HTMLElement("<strong>")}} sont qualifiées de boîtes anonymes. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.

+ +

La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("<strong>")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter le guide sur le modèle de formatage visuel.

+ +

La propriété display et la disposition de flux

+ +

En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété display définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification CSS Display Model Level 3, on en apprend plus sur la façon dont la propriété display modifie comportement des boîtes et des boîtes qu'elles génèrent.

+ +

Le type d'affichage d'un élément définit deux choses :

+ + + +

Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué display: flex. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut block.

+ +

Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a display: flex. Aussi, le type d'affichage intérieur vaut flex et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est flow et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.

+ +

Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (display: flex) ou les grilles CSS (display: grid) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est block.

+ +

Modifier le contexte de formatage auquel un élément participe

+ +

Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.

+ +

Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle display: block en ciblant les éléments <strong>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

Résumé

+ +

Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.

+ +

Voir aussi

+ + 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/dans_le_flux_ou_en_dehors/index.html deleted file mode 100644 index 663f0a9c8a..0000000000 --- a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Être ou ne pas être dans le flux -slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow ---- -
{{CSSRef}}
- -

Dans le précédent guide, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.

- -

Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément strong. Le titre et les paragraphes sont des éléments de blocs et l'élément strong est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type display externe qui vaut block.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

- -

Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.

- -

Retirer un élément du flux

- -

Tous les éléments d'un document sont dans le flux à l'exception :

- - - -

Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou Block Formatting Context (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.

- -

Les éléments flottants

- -

Dans cet exemple, on a un élément div puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément div. L'élément div est désormais en dehors du flux.

- -

Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

- -

On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.

- -

Le positionnement absolu

- -

En utilisant position: absolute ou position: fixed sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec position absolute et décalé avec les valeurs top: 30px et right: 30px. Cet élément est retiré du flux du document.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

- -

Utiliser position: fixed retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (viewport) plutôt que par rapport au bloc englobant.

- -

Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.

- -

Le positionnement relatif et le flux

- -

Si on fournit un positionnement relatif en appliquant position: relative à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

- -

Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant position: absolute n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.

- -

Résumé

- -

Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de contexte de formatage de bloc dans Explications relatives aux contextes de formatage.

- -

Voir aussi

- - 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/disposition_de_bloc_en_ligne_avec_flux_normal/index.html deleted file mode 100644 index 8566b8accd..0000000000 --- a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -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 -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.

- -

Le flux normal est défini par la spécification CSS 2.1 qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (block) ou en ligne (inline) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.

- -

Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :

- -
-

« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.
-
- Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1

-
- -

Quant aux éléments du contexte de formatage en ligne :

- -
-

« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (padding) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2

-
- -

On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.

- -

Les éléments qui participent à un contexte de formatage de bloc

- -

Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.

- -

- -

Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.

- -

- -

Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.

- -

Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

- -

Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

- -

Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

- -

La fusion des marges

- -

La spécification indique que les marges verticales entre chaque éléments de bloc fusionnent. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.

- -

Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de 40px car la plus petite est « fusionnée » avec la plus grande.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

- -

Pour en savoir plus à propos de la fusion des marges, vous pouvez lire l'article dédié à la fusion des marges.

- -
-

Note : Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.

- -

-
- -

Les éléments qui participent à un contexte de formatage en ligne

- -

Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).

- -

Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

- -

Les boîtes autour des mots, avant et après l'élément {{HTMLElement("<strong>")}} sont qualifiées de boîtes anonymes. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.

- -

La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("<strong>")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

- -

Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter le guide sur le modèle de formatage visuel.

- -

La propriété display et la disposition de flux

- -

En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété display définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification CSS Display Model Level 3, on en apprend plus sur la façon dont la propriété display modifie comportement des boîtes et des boîtes qu'elles génèrent.

- -

Le type d'affichage d'un élément définit deux choses :

- - - -

Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué display: flex. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut block.

- -

Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a display: flex. Aussi, le type d'affichage intérieur vaut flex et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

- -

On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est flow et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.

- -

Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (display: flex) ou les grilles CSS (display: grid) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est block.

- -

Modifier le contexte de formatage auquel un élément participe

- -

Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.

- -

Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle display: block en ciblant les éléments <strong>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

- -

Résumé

- -

Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.

- -

Voir aussi

- - diff --git "a/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" "b/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" deleted file mode 100644 index 703af33bee..0000000000 --- "a/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: La disposition en flux et le dépassement -slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
- -

Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.

- -

Qu'est-ce que le dépassement ?

- -

Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

- -

Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété overflow. La valeur initiale de cette propriété est visible et c'est pour cela qu'on voit le contenu dépasser.

- -

Contrôler le dépassement

- -

La propriété overflow possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur hidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

- -

Avec la valeur scroll, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

- -

Avec la valeur auto, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que overflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur auto, seules les barres de défilement nécessaires sont ajoutées.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

- -

Comme nous l'avons vu plus tôt, toute valeur qui est différente de visible créera un nouveau contexte de formatage de bloc.

- -
-

Note : Dans le brouillon du module de spécification Overflow de niveau 3, une valeur est ajoutée : overflow: clip. Cette valeur agira comme overflow: hidden mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.

-
- -

Pour être tout à fait précis, la propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour overflow-x et la seconde pour overflow-y. Dans l'exemple qui suit, seule overflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

- -

Les propriétés relatives

- -

Dans le guide sur les modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentes block-size et inline-size qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : overflow-block et overflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques » overflow-x et overflow-y où la correspondance varie en fonction du mode d'écriture du document.

- -

À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.

- -

Gérer le dépassement

- -

Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.

- -

Dépassement sur l'axe en ligne

- -

La propriété text-overflow indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur clip qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur ellipsis permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

- -

Dépassement sur l'axe de bloc

- -

Il existe également une proposition pour une propriété block-overflow. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.

- -

Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.

- -

Résumé

- -

Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.

diff --git "a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" "b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" deleted file mode 100644 index 2ecf299ce2..0000000000 --- "a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Disposition de flux et modes d'écriture -slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture -tags: - - CSS - - Guide - - Mode d'écriture -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes ---- -

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. Les propriétés liées à la disposition 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.

- -

Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux ressources externes ainsi qu'à la section Voir aussi en fin de page.

- -

La spécification des modes d'écriture

- -

Le module de spécification CSS Writing Modes de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction de la spécification quant aux modes d'écriture :

- -
-

« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (inline) et selon sa direction de bloc. »

-
- -

La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.

- -

La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété writing-mode contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction vertical-lr, on pourra utiliser writing-mode: vertical-lr sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.

- -

Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

- -

La propriété writing-mode et le flux de bloc

- -

La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs horizontal-tb, vertical-rl et vertical-lr. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est horizontal-tb ce qui signifie que l'axe de bloc est dirigé de haut en bas (tb pour top to bottom qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes horizontal-tb.

- -

Voici un exemple avec horizontal-tb.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

- -

La valeur vertical-rl permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

- -

Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour writing-mode : vertical-lr. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

- -

Les boîtes utilisant un mode d'écriture différent de leur parent

- -

Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait display: inline-block.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

- -

Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut flow, le type d'affichage calculé sera flow-root. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec horizontal-tb contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

- -

Les éléments remplacés

- -

Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété writing-mode. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

- -

Les propriétés et valeurs logiques

- -

Lorsqu'on travaille avec des modes d'écriture autres que horizontal-tb, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec horizontal-tb cette largeur sera selon la direction en ligne. Mais avec le mode vertical-lr cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

- -

C'est pour cela que des propriétés logiques ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit inline-size: 100px sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, inline-size correspondra à la direction en ligne quoi qu'il arrive.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

- -

Le module de spécification CSS sur les propriétés et valeurs logiques contient des versions logiques des propriétés contrôlant les marges, le remplissage (padding) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions physiques.

- -

Résumé

- -

Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.

- -

Voir aussi

- - - -

Ressources externes

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html deleted file mode 100644 index 88ed84ff16..0000000000 --- a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Explications quant aux contextes de formatage -slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts ---- -
{{CSSRef}}
- -

Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.

- -

Sur une page web, tout s'inscrit dans un contexte de formatage, une zone qui a été définie pour être organisée d'une certaine façon. Un contexte de formatage en bloc (ou block formatting context (BFC)) organisera ses éléments fils selon une disposition en bloc, un contexte de formatage flexible organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.

- -

Le contexte de formatage de bloc

- -

L'élément html définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <html></html> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (Block formatting context ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (padding) d'un élément interagissent avec les autres blocs du même contexte.

- -

Créer un nouveau contexte de formatage de bloc

- -

L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne fusionneront que pour des éléments d'un même contexte formatage.

- -

Au delà de l'élément racine du document (ici l'élément html), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :

- - - -

Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.

- -

Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <div> où une bordure est appliquée. Le contenu de cet élément div flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du div passe sur le contenu flottant. Comme expliqué dans le guide sur les éléments appartenant ou non au flux, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du div ne contienne que le contenu et pas l'élément flottant.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

- -

En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer overflow: auto ou à utiliser d'autres valeurs que overflow: visible.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

- -

En utilisant overflow: auto, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément div devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.

- -

Toutefois, utiliser overflow pour créer un nouveau contexte de formatage peut poser problème car la propriété overflow est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.

- -

Créer un contexte de formatage de bloc explicite : utiliser display: flow-root

- -

Une valeur plus récente de display permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant display: flow-root sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

- -

Ainsi, en utilisant display: flow-root; sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.

- -

Le nom de cette valeur, flow-root, prend son sens lorsqu'on voit que l'élément agit comme une racine (root) pour le nouveau contexte qui est créé.

- -

Un contexte de formatage en ligne

- -

Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.

- -

Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (padding), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

- -

Les autres contexte de formatage

- -

Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.

- -

Résumé

- -

Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons les interactions entre le flux normal et les différents modes d'écriture.

- -

Voir aussi

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html new file mode 100644 index 0000000000..703af33bee --- /dev/null +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -0,0 +1,70 @@ +--- +title: La disposition en flux et le dépassement +slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
+ +

Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.

+ +

Qu'est-ce que le dépassement ?

+ +

Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

+ +

Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété overflow. La valeur initiale de cette propriété est visible et c'est pour cela qu'on voit le contenu dépasser.

+ +

Contrôler le dépassement

+ +

La propriété overflow possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur hidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

+ +

Avec la valeur scroll, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

+ +

Avec la valeur auto, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que overflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur auto, seules les barres de défilement nécessaires sont ajoutées.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

+ +

Comme nous l'avons vu plus tôt, toute valeur qui est différente de visible créera un nouveau contexte de formatage de bloc.

+ +
+

Note : Dans le brouillon du module de spécification Overflow de niveau 3, une valeur est ajoutée : overflow: clip. Cette valeur agira comme overflow: hidden mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.

+
+ +

Pour être tout à fait précis, la propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour overflow-x et la seconde pour overflow-y. Dans l'exemple qui suit, seule overflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

+ +

Les propriétés relatives

+ +

Dans le guide sur les modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentes block-size et inline-size qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : overflow-block et overflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques » overflow-x et overflow-y où la correspondance varie en fonction du mode d'écriture du document.

+ +

À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.

+ +

Gérer le dépassement

+ +

Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.

+ +

Dépassement sur l'axe en ligne

+ +

La propriété text-overflow indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur clip qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur ellipsis permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

+ +

Dépassement sur l'axe de bloc

+ +

Il existe également une proposition pour une propriété block-overflow. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.

+ +

Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.

+ +

Résumé

+ +

Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.

diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html new file mode 100644 index 0000000000..2ecf299ce2 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -0,0 +1,90 @@ +--- +title: Disposition de flux et modes d'écriture +slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture +tags: + - CSS + - Guide + - Mode d'écriture +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +--- +

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. Les propriétés liées à la disposition 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.

+ +

Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux ressources externes ainsi qu'à la section Voir aussi en fin de page.

+ +

La spécification des modes d'écriture

+ +

Le module de spécification CSS Writing Modes de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction de la spécification quant aux modes d'écriture :

+ +
+

« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (inline) et selon sa direction de bloc. »

+
+ +

La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.

+ +

La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété writing-mode contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction vertical-lr, on pourra utiliser writing-mode: vertical-lr sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.

+ +

Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

+ +

La propriété writing-mode et le flux de bloc

+ +

La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs horizontal-tb, vertical-rl et vertical-lr. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est horizontal-tb ce qui signifie que l'axe de bloc est dirigé de haut en bas (tb pour top to bottom qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes horizontal-tb.

+ +

Voici un exemple avec horizontal-tb.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

+ +

La valeur vertical-rl permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

+ +

Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour writing-mode : vertical-lr. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

+ +

Les boîtes utilisant un mode d'écriture différent de leur parent

+ +

Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait display: inline-block.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

+ +

Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut flow, le type d'affichage calculé sera flow-root. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec horizontal-tb contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

+ +

Les éléments remplacés

+ +

Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété writing-mode. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

+ +

Les propriétés et valeurs logiques

+ +

Lorsqu'on travaille avec des modes d'écriture autres que horizontal-tb, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec horizontal-tb cette largeur sera selon la direction en ligne. Mais avec le mode vertical-lr cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

+ +

C'est pour cela que des propriétés logiques ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit inline-size: 100px sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, inline-size correspondra à la direction en ligne quoi qu'il arrive.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

+ +

Le module de spécification CSS sur les propriétés et valeurs logiques contient des versions logiques des propriétés contrôlant les marges, le remplissage (padding) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions physiques.

+ +

Résumé

+ +

Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.

+ +

Voir aussi

+ + + +

Ressources externes

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html new file mode 100644 index 0000000000..663f0a9c8a --- /dev/null +++ b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -0,0 +1,68 @@ +--- +title: Être ou ne pas être dans le flux +slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +--- +
{{CSSRef}}
+ +

Dans le précédent guide, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.

+ +

Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément strong. Le titre et les paragraphes sont des éléments de blocs et l'élément strong est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type display externe qui vaut block.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

+ +

Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.

+ +

Retirer un élément du flux

+ +

Tous les éléments d'un document sont dans le flux à l'exception :

+ + + +

Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou Block Formatting Context (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.

+ +

Les éléments flottants

+ +

Dans cet exemple, on a un élément div puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément div. L'élément div est désormais en dehors du flux.

+ +

Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

+ +

On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.

+ +

Le positionnement absolu

+ +

En utilisant position: absolute ou position: fixed sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec position absolute et décalé avec les valeurs top: 30px et right: 30px. Cet élément est retiré du flux du document.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

+ +

Utiliser position: fixed retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (viewport) plutôt que par rapport au bloc englobant.

+ +

Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.

+ +

Le positionnement relatif et le flux

+ +

Si on fournit un positionnement relatif en appliquant position: relative à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

+ +

Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant position: absolute n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.

+ +

Résumé

+ +

Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de contexte de formatage de bloc dans Explications relatives aux contextes de formatage.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html new file mode 100644 index 0000000000..88ed84ff16 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -0,0 +1,89 @@ +--- +title: Explications quant aux contextes de formatage +slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +
{{CSSRef}}
+ +

Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.

+ +

Sur une page web, tout s'inscrit dans un contexte de formatage, une zone qui a été définie pour être organisée d'une certaine façon. Un contexte de formatage en bloc (ou block formatting context (BFC)) organisera ses éléments fils selon une disposition en bloc, un contexte de formatage flexible organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.

+ +

Le contexte de formatage de bloc

+ +

L'élément html définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <html></html> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (Block formatting context ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (padding) d'un élément interagissent avec les autres blocs du même contexte.

+ +

Créer un nouveau contexte de formatage de bloc

+ +

L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne fusionneront que pour des éléments d'un même contexte formatage.

+ +

Au delà de l'élément racine du document (ici l'élément html), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :

+ + + +

Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.

+ +

Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <div> où une bordure est appliquée. Le contenu de cet élément div flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du div passe sur le contenu flottant. Comme expliqué dans le guide sur les éléments appartenant ou non au flux, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du div ne contienne que le contenu et pas l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer overflow: auto ou à utiliser d'autres valeurs que overflow: visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

+ +

En utilisant overflow: auto, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément div devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.

+ +

Toutefois, utiliser overflow pour créer un nouveau contexte de formatage peut poser problème car la propriété overflow est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.

+ +

Créer un contexte de formatage de bloc explicite : utiliser display: flow-root

+ +

Une valeur plus récente de display permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant display: flow-root sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

+ +

Ainsi, en utilisant display: flow-root; sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.

+ +

Le nom de cette valeur, flow-root, prend son sens lorsqu'on voit que l'élément agit comme une racine (root) pour le nouveau contexte qui est créé.

+ +

Un contexte de formatage en ligne

+ +

Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.

+ +

Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (padding), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

+ +

Les autres contexte de formatage

+ +

Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.

+ +

Résumé

+ +

Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons les interactions entre le flux normal et les différents modes d'écriture.

+ +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git "a/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" "b/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" deleted file mode 100644 index 6980ff4d78..0000000000 --- "a/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Guide des caractéristiques de police OpenType -slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType -tags: - - CSS - - Fonts - - Guide - - Polices -translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide ---- -
{{CSSRef}}
- -

Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (kerning en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.

- -

Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.

- -

En plus des caractéristiques communément utilisées telles que les ligatures ou les chiffres elzéviriens, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.

- -
-

Attention ! Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise font-feature-settings pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.

-
- -

Découvrir la disponibilité des caractéristiques pour certaines polices

- -

Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter wakamaifondue.com, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site Axis-praxis.org fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.

- -

Pourquoi utiliser les caractéristiques d'une police ?

- -

Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :

- - - -

Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné

- -
-

Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. Tim Brown, Directeur de la typographie chez Adobe.

-
- -

Au-delà du style : le contenu même

- -

Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.

- -

Les caractéristiques

- -

Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.

- -
-

Note : Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).

-
- -

Le crénage (kerning) ({{cssxref("font-kerning")}})

- -

Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
- -

Les formes alternatives ({{cssxref("font-variant-alternates")}})

- -

Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
- -
 
- -
Dans ce cas, @stylistic(alternates) affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  @styleset(alt-a), seule l'apparence de la lettre a minuscule changera.
- -

Vous pouvez modifier :

- -
font-variant-alternates: styleset(alt-a);
- -

en :

- -
font-variant-alternates: styleset(alt-g);
-
- -

et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.

- -

En savoir plus sur les formes alternatives

- - - -

Les ligatures ({{cssxref("font-variant-ligatures")}})

- -

Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).

- -

Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
- -

Les positions ({{cssxref("font-variant-position")}})

- -

Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
- -

Les capitales ({{cssxref("font-variant-caps")}})

- -

Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » petites capitales qui sont généralement utilisées pour les acronymes et les abréviations.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
- -

Les chiffres ({{cssxref("font-variant-numeric")}})

- -

Il existe généralement différents types de chiffre dans les polices :

- - - -

On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).

- -

Deux types de fractions peuvent être prises en charge avec cette propriété :

- - - -

Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.

- -

Chiffres classiques et chiffres elzéviriens

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
- -

Fractions, nombres ordinaux et zéro barré

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
- -

Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})

- -

Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
- -
-

Note : Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.

-
- -

Propriété raccourcie ({{Cssxref("font-variant")}})

- -

La propriété raccourcie font-variant permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur normal, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant none,  font-variant-ligatures vaudra none et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque none est fourni).

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
- -

Utiliser font-feature-settings

- -

La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser des propriétés CSS personnalisées afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.

- -

Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.

- -

La syntaxe générale suivra cette structure :

- -
.small-caps {
-  font-feature-settings: "smcp", "c2sc";
-}
-
- -

Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :

- -
.no-ligatures {
-  font-feature-settings: "liga" 0, "dlig" 0;
-}
- -

En savoir plus sur les codes des caractéristiques font-feature-settings

- - - -

Utiliser la détection de fonctionnalités CSS

- -

Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.

- -

Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec font-feature-settings et une seule valeur pour {{cssxref("font-variant-caps")}}.

- -
.small-caps {
-   font-feature-settings: "smcp", "c2sc";
-}
-
-@supports (font-variant-caps: all-small-caps) {
-   .small-caps {
-       font-feature-settings: normal;
-       font-variant-caps: all-small-caps;
-   }
-}
-
- -

Voir aussi

- -

Démonstrations de caractéristiques OpenType en CSS

- - - -

Outils web d'analyse de polices

- - - -

Spécifications W3C

- - - -

Autres ressources

- - diff --git a/files/fr/web/css/css_fonts/guide_polices_variables/index.html b/files/fr/web/css/css_fonts/guide_polices_variables/index.html deleted file mode 100644 index 043902094e..0000000000 --- a/files/fr/web/css/css_fonts/guide_polices_variables/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: Guide des polices variables -slug: Web/CSS/CSS_Fonts/Guide_polices_variables -tags: - - CSS - - Fonts - - Guide - - Polices -translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide ---- -
{{CSSRef}}
- -

Les polices variables sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.

- -
-

Attention !  Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.

-
- -

Qu'est-ce qu'une police variable ?

- -

Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.

- -

Les polices standard ou polices statiques

- -

Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.

- -

Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).

- -

Les polices variables

- -

Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.

- -

Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.

- -

Quelques notes à propos des familles de polices, des corps et des variantes

- -

On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.

- -

Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.

- -

L'axe de variation

- -

Le concept clé des polices variables est celui d'axe de variation qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).

- -

Comme indiqué dans la spécification, deux types d'axe existent : les axes enregistrés et les axes spécifiques (custom axes) :

- - - -

Les axes enregistrés et les attributs CSS existants

- -

Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).

- -

Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, font-variation-settings doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.

- -

Notes

- -
    -
  1. -

    Les noms d'axes utilisés avec font-variation-settings sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :

    - - 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    - -

    wght correspondra à l'axe enregistré du même nom et GRAD à un axe spécifique.

    -
    2. -
  2. -

    Si on a défini des valeurs avec font-variation-settings et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant des propriétés CSS personnalisées pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).

    -
    3. -
- -

La graisse (weight)

- -

La graisse (représenté par l'étiquette wght) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que normal ou bold qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.

- -

On notera qu'il n'est pas possible d'utiliser la déclaration @font-face afin qu'un point donné sur cet axe corresponde au mot-clé bold (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :

- -
font-weight: 375;
-
-font-variation-settings: 'wght' 375;
- -

Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
- -

La largeur (width)

- -

La largeur (indiquée par l'étiquette wdth) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.

- -
-

Note : Lorsqu'on utilise la notation « bas niveau » avec font-variation-settings, on n'écrit pas le caractère %.

-
- -
font-stretch: 115%;
-
-font-variation-settings: 'wdth' 115;
-
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
- -

L'italique

- -

L'axe italique (ital) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.

- -

En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété font-synthesis: none; qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).

- -
font-style: italic;
-
-font-variation-settings: 'ital' 1;
-
-font-synthesis: none;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
- -

La pente (slant)

- -

La pente (indiquée par l'étiquette slnt), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur font-style qui peut être utilisé pour cet axe.

- -
-

Note : Le mot-clé deg ne doit pas être utilisé comme unité pour la notation avec font-variation-settings.

-
- -
font-style: oblique 14deg;
-
-font-variation-settings: 'slnt' 14;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
- -

La taille optique

- - - - - -

La taille optique, indiquée par l'étiquette opsz, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.

- -

Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.

- -

La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de font-size mais on peut tout à fait les manipuler avec la syntaxe de bas niveau font-variation-settings.

- -

Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur font-optical-sizing permet uniquement d'utiliser les valeurs auto ou none et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec font-variation-settings: 'opsz' <num>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour font-size et pour opsz. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.

- -
font-optical-sizing: auto;
-
-font-variation-settings: 'opsz' 36;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
- -

Les axes spécifiques

- -

Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.

- -

Le grade

- -

Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.

- -
font-variation-settings: 'GRAD' 88;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
- -

Utiliser une police variable : les changements pour @font-face

- -

Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.

- -

La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs font-weight et font-stretch.

- -

Exemple d'une police standard réale droite :

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: normal;
-}
-
- -

Exemple d'une police avec une forme droite et une forme italique :

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: oblique 0deg 20deg;
-}
- -
-

Note : Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à font-style indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.

-
- -

Exemple d'une police qui ne contient que des italiques et aucun caractère droit :

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: italic;
-}
- -

Exemple d'une police avec un axe de pente :

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: oblique 0deg 12deg;
-}
- -
-

Note : La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple woff2 à la place de woff2-variations), mais mieux vaut utiliser la syntaxe la plus précise si possible.

-
- -
-

Note : Fournir des valeurs d'intervalle pour font-weight, font-stretch et font-style empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs font-weight ou font-stretch. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec font-variation-settings !

-
- -

Amélioration progressive et anciens navigateurs

- -

La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.

- -
h1 {
- font-family: some-non-variable-font-family;
-}
-
-@supports (font-variation-settings: 'wdth' 115) {
- h1 {
-    font-family: some-variable-font-family;
- }
-}
- -

Pages d'exemples

- -

Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à font-variation-settings et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (hover) sur l'élément h2 qui ne joue que sur l'axe de grade.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html new file mode 100644 index 0000000000..6980ff4d78 --- /dev/null +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html @@ -0,0 +1,229 @@ +--- +title: Guide des caractéristiques de police OpenType +slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType +tags: + - CSS + - Fonts + - Guide + - Polices +translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +--- +
{{CSSRef}}
+ +

Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (kerning en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.

+ +

Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.

+ +

En plus des caractéristiques communément utilisées telles que les ligatures ou les chiffres elzéviriens, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.

+ +
+

Attention ! Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise font-feature-settings pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.

+
+ +

Découvrir la disponibilité des caractéristiques pour certaines polices

+ +

Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter wakamaifondue.com, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site Axis-praxis.org fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.

+ +

Pourquoi utiliser les caractéristiques d'une police ?

+ +

Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :

+ + + +

Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné

+ +
+

Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. Tim Brown, Directeur de la typographie chez Adobe.

+
+ +

Au-delà du style : le contenu même

+ +

Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.

+ +

Les caractéristiques

+ +

Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.

+ +
+

Note : Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).

+
+ +

Le crénage (kerning) ({{cssxref("font-kerning")}})

+ +

Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
+ +

Les formes alternatives ({{cssxref("font-variant-alternates")}})

+ +

Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
+ +
 
+ +
Dans ce cas, @stylistic(alternates) affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  @styleset(alt-a), seule l'apparence de la lettre a minuscule changera.
+ +

Vous pouvez modifier :

+ +
font-variant-alternates: styleset(alt-a);
+ +

en :

+ +
font-variant-alternates: styleset(alt-g);
+
+ +

et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.

+ +

En savoir plus sur les formes alternatives

+ + + +

Les ligatures ({{cssxref("font-variant-ligatures")}})

+ +

Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).

+ +

Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
+ +

Les positions ({{cssxref("font-variant-position")}})

+ +

Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
+ +

Les capitales ({{cssxref("font-variant-caps")}})

+ +

Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » petites capitales qui sont généralement utilisées pour les acronymes et les abréviations.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
+ +

Les chiffres ({{cssxref("font-variant-numeric")}})

+ +

Il existe généralement différents types de chiffre dans les polices :

+ + + +

On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).

+ +

Deux types de fractions peuvent être prises en charge avec cette propriété :

+ + + +

Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.

+ +

Chiffres classiques et chiffres elzéviriens

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
+ +

Fractions, nombres ordinaux et zéro barré

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
+ +

Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})

+ +

Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
+ +
+

Note : Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.

+
+ +

Propriété raccourcie ({{Cssxref("font-variant")}})

+ +

La propriété raccourcie font-variant permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur normal, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant none,  font-variant-ligatures vaudra none et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque none est fourni).

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
+ +

Utiliser font-feature-settings

+ +

La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser des propriétés CSS personnalisées afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.

+ +

Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.

+ +

La syntaxe générale suivra cette structure :

+ +
.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+
+ +

Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :

+ +
.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}
+ +

En savoir plus sur les codes des caractéristiques font-feature-settings

+ + + +

Utiliser la détection de fonctionnalités CSS

+ +

Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.

+ +

Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec font-feature-settings et une seule valeur pour {{cssxref("font-variant-caps")}}.

+ +
.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+
+ +

Voir aussi

+ +

Démonstrations de caractéristiques OpenType en CSS

+ + + +

Outils web d'analyse de polices

+ + + +

Spécifications W3C

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.html b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html new file mode 100644 index 0000000000..043902094e --- /dev/null +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html @@ -0,0 +1,265 @@ +--- +title: Guide des polices variables +slug: Web/CSS/CSS_Fonts/Guide_polices_variables +tags: + - CSS + - Fonts + - Guide + - Polices +translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +--- +
{{CSSRef}}
+ +

Les polices variables sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.

+ +
+

Attention !  Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.

+
+ +

Qu'est-ce qu'une police variable ?

+ +

Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.

+ +

Les polices standard ou polices statiques

+ +

Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.

+ +

Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).

+ +

Les polices variables

+ +

Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.

+ +

Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.

+ +

Quelques notes à propos des familles de polices, des corps et des variantes

+ +

On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.

+ +

Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.

+ +

L'axe de variation

+ +

Le concept clé des polices variables est celui d'axe de variation qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).

+ +

Comme indiqué dans la spécification, deux types d'axe existent : les axes enregistrés et les axes spécifiques (custom axes) :

+ + + +

Les axes enregistrés et les attributs CSS existants

+ +

Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).

+ +

Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, font-variation-settings doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.

+ +

Notes

+ +
    +
  1. +

    Les noms d'axes utilisés avec font-variation-settings sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :

    + + 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    + +

    wght correspondra à l'axe enregistré du même nom et GRAD à un axe spécifique.

    +
    2. +
  2. +

    Si on a défini des valeurs avec font-variation-settings et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant des propriétés CSS personnalisées pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).

    +
    3. +
+ +

La graisse (weight)

+ +

La graisse (représenté par l'étiquette wght) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que normal ou bold qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.

+ +

On notera qu'il n'est pas possible d'utiliser la déclaration @font-face afin qu'un point donné sur cet axe corresponde au mot-clé bold (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :

+ +
font-weight: 375;
+
+font-variation-settings: 'wght' 375;
+ +

Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

La largeur (width)

+ +

La largeur (indiquée par l'étiquette wdth) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.

+ +
+

Note : Lorsqu'on utilise la notation « bas niveau » avec font-variation-settings, on n'écrit pas le caractère %.

+
+ +
font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
+ +

L'italique

+ +

L'axe italique (ital) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.

+ +

En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété font-synthesis: none; qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).

+ +
font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
+ +

La pente (slant)

+ +

La pente (indiquée par l'étiquette slnt), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur font-style qui peut être utilisé pour cet axe.

+ +
+

Note : Le mot-clé deg ne doit pas être utilisé comme unité pour la notation avec font-variation-settings.

+
+ +
font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

La taille optique

+ + + + + +

La taille optique, indiquée par l'étiquette opsz, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.

+ +

Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.

+ +

La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de font-size mais on peut tout à fait les manipuler avec la syntaxe de bas niveau font-variation-settings.

+ +

Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur font-optical-sizing permet uniquement d'utiliser les valeurs auto ou none et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec font-variation-settings: 'opsz' <num>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour font-size et pour opsz. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.

+ +
font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
+ +

Les axes spécifiques

+ +

Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.

+ +

Le grade

+ +

Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.

+ +
font-variation-settings: 'GRAD' 88;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
+ +

Utiliser une police variable : les changements pour @font-face

+ +

Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.

+ +

La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs font-weight et font-stretch.

+ +

Exemple d'une police standard réale droite :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+
+ +

Exemple d'une police avec une forme droite et une forme italique :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 20deg;
+}
+ +
+

Note : Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à font-style indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.

+
+ +

Exemple d'une police qui ne contient que des italiques et aucun caractère droit :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}
+ +

Exemple d'une police avec un axe de pente :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 12deg;
+}
+ +
+

Note : La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple woff2 à la place de woff2-variations), mais mieux vaut utiliser la syntaxe la plus précise si possible.

+
+ +
+

Note : Fournir des valeurs d'intervalle pour font-weight, font-stretch et font-style empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs font-weight ou font-stretch. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec font-variation-settings !

+
+ +

Amélioration progressive et anciens navigateurs

+ +

La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.

+ +
h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}
+ +

Pages d'exemples

+ +

Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à font-variation-settings et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (hover) sur l'élément h2 qui ne joue que sur l'axe de grade.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" "b/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" deleted file mode 100644 index 8353f2c29e..0000000000 --- "a/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" +++ /dev/null @@ -1,661 +0,0 @@ ---- -title: L'alignement des boîtes avec les grilles CSS -slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS -tags: - - CSS - - CSS Grid - - Grille CSS - - Guides - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

- -

Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.

- -

Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.

- -

Les deux axes d'une grille

- -

Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (block layout). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.

- -

- -

L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.

- -

- -

Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.

- -

Aligner des objets sur l'axe de bloc (block axis)

- -

Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.

- -

Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :

- - - -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-  grid-template-areas:
-    "a a a a b b b b"
-    "a a a a b b b b"
-    "c c c c d d d d"
-    "c c c c d d d d";
-  align-items: start;
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_1', '500', '450')}}

-
- -

Lorsqu'on utilise align-self: start, la hauteur de chaque <div> sera déterminée par le contenu du <div>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <div> sera étiré afin de remplir la zone de la grille.

- -

La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant align-self pour les objets.

- -

Dans le prochain exemple, on utilise la propriété align-self afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour align-self : l'objet est étiré. Le deuxième objet utilise la valeur start, le troisième utilise end et le quatrième utilise center.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-  grid-template-areas:
-    "a a a a b b b b"
-    "a a a a b b b b"
-    "c c c c d d d d"
-    "c c c c d d d d";
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-  align-self: start;
-}
-.item3 {
-  grid-area: c;
-  align-self: end;
-}
-.item4 {
-  grid-area: d;
-  align-self: center;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_2', '500', '450')}}

-
- -

Gestion des objets avec un ratio intrinsèque

- -

La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur start. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.

- -

Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs start pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.

- -

Justifier les objets sur l'axe en ligne (inline axis)

- -

{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour align-self :

- - - -

Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.

- -

Là encore, la valeur par défaut stretch pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-  grid-template-areas:
-    "a a a a b b b b"
-    "a a a a b b b b"
-    "c c c c d d d d"
-    "c c c c d d d d";
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-  justify-self: start;
-}
-.item3 {
-  grid-area: c;
-  justify-self: end;
-}
-.item4 {
-  grid-area: d;
-  justify-self: center;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_3', '500', '450')}}

-
- -

Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.

- -

Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.

- -

Propriétés raccourcies

- -

La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.

- -

Centrer un objet sur une zone

- -

En combinant les propriétés align-* et justify-*, on peut facilement centrer un objet sur sa zone de grille.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 200px;
-  grid-template-areas:
-    ". a a ."
-    ". a a .";
-}
-.item1 {
-  grid-area: a;
-  align-self: center;
-  justify-self: center;
-}
-
- -
<div class="wrapper">
- <div class="item1">Objet 1</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_4', '500', '480')}}

-
- -

Aligner les pistes d'une grille sur l'axe de bloc

- -

Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.

- -

La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

- -

Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :

- - - -

Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.

- -

La propriété align-content s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est start : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_5', '500', '520')}}

-
- -

Si on ajoute align-content avec la valeur end sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-  align-content: end;
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_6', '500', '520')}}

-
- -

Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : space-between, space-around et space-evenly qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec space-between pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-  align-content: space-between;
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_7', '500', '1570')}}

-
- -

On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.

- -

Dans l'image qui suit, on a a placé une grille en utilisant align-content: start et une autre grille qui utilise align-content: space-between. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.

- -

- -

Justifier les pistes sur l'axe des lignes

- -

Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.

- -

Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur space-around. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-  align-content: space-between;
-  justify-content: space-around;
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_8', '500', '500')}}

-
- -

Alignement et marges automatiques

- -

Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser auto pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant auto pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.

- -

Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec auto. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-}
-.item1 {
-  grid-area: a;
-  margin-left: auto;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_9', '500', '500')}}

-
- -

On peut voir comment l'objet est aligné grâce à l'outil de mise en évidence des grilles dans Firefox.

- -

- -

L'alignement et les modes d'écriture

- -

Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions physiques.

- -

Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut justify-content: start placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec margin-right ou margin-left ou si on utilise le positionnement absolu avec les valeurs top, right, bottom et left, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..980b03ea62 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,569 @@ +--- +title: Le placement automatique sur une grille CSS +slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +

{{EmbedLiveSample('placement_1', '500', '230')}}

+
+ +

Définir des règles pour le placement automatique

+ +

Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec grid-template-rows, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.

+ +

Dimensionner les lignes de la grille implicite

+ +

Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.

+ +

Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété grid-auto-rows. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+ +

{{EmbedLiveSample('placement_2', '500', '330')}}

+
+ +

On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre
+    <br>Cette cellule
+    <br>a du contenu
+    <br>supplémentaire
+    <br>et max vaut auto
+    <br>afin que la ligne
+    <br>se développe.
+  </div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ +

{{EmbedLiveSample('placement_3', '500', '330')}}

+
+ +

On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200px. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.

+ +
+ + +
<div class="wrapper">
+   <div>Un</div>
+   <div>Deux</div>
+   <div>Trois</div>
+   <div>Quatre</div>
+   <div>Cinq</div>
+   <div>Six</div>
+   <div>Sept</div>
+   <div>Huit</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+
+ +

{{EmbedLiveSample('placement_4', '500', '330')}}

+
+ +

Utiliser le placement automatique pour les colonnes

+ +

On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur column. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.

+ +

Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-rows: repeat(3, 200px);
+  grid-gap: 10px;
+  grid-auto-flow: column;
+  grid-auto-columns: 300px 100px;
+}
+
+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+</div>
+
+ +

{{EmbedLiveSample('placement_5', '500', '640')}}

+
+ +

L'ordre des éléments placés automatiquement

+ +

Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement l'algorithme de placement des objets sur la grille, mais voyons ici les quelques règles simples qu'il faut principalement retenir.

+ +

Modification de l'ordre du document

+ +

Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  “order modified document order”. Cela signifie que si on utilise uniquement la propriété order, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.

+ +

Les éléments avec des propriétés de placement

+ +

La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+
+ +

{{EmbedLiveSample('placement_6', '500', '450')}}

+
+ +

Gérer les éléments qui s'étalent sur plusieurs pistes

+ +

On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur span 2. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.

+ +

On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+
+ +

{{EmbedLiveSample('placement_7', '500', '770')}}

+
+ +

Combler les espaces

+ +

En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.

+ +

Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur dense. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec column. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : grid-auto-flow: column dense.

+ +

Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (tab order) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans un article sur l'accessibilité.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+
+ +

{{EmbedLiveSample('placement_8', '500', '730')}}

+
+ +

Les éléments anonymes de la grille

+ +

Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des div et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.

+ +
<div class="grid">
+  Je suis une chaîne de caractères et je serai placé
+  automatiquement.
+  <div>Un élément de la grille</div>
+  <div>Un élément de la grille</div>
+</div>
+
+ +

Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.

+ +

Les cas d'utilisation pour le placement automatique

+ +

Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe landscape l'élément s'étend sur deux colonnes). On utilise ensuite grid-auto-flow: dense afin de créer une grille dense.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+  list-style: none;
+  margin: 1em auto;
+  padding: 0;
+  max-width: 800px;
+}
+.wrapper li {
+  border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+  grid-column-end: span 2;
+}
+.wrapper li img {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+ +
<ul class="wrapper">
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+</ul>
+
+ +

{{EmbedLiveSample('placement_9', '500', '1300')}}

+
+ +

Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément dt démarre sur la première ligne et que l'élément  dd sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.

+ +
+ + +
<div class="wrapper">
+  <dl>
+    <dt>Mammals</dt>
+    <dd>Cat</dd>
+    <dd>Dog</dd>
+    <dd>Mouse</dd>
+    <dt>Fish</dt>
+    <dd>Guppy</dd>
+    <dt>Birds</dt>
+    <dd>Pied Wagtail</dd>
+    <dd>Owl</dd>
+  <dl>
+</div>
+
+ +
dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+  grid-column: 2;
+}
+
+ +

{{EmbedLiveSample('placement_10', '500', '230')}}

+ +
+

Note : Voir cet article de SitePoint à propos de la disposition en briques pour d'autres cas d'utilisation.

+
+
+ +

Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?

+ +

Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée n » (pour que certaines lignes soient sautées). Cette question est décrite sur le dépôt GitHub du CSSWG, n'hésitez pas à ajouter vos exemples de scénarios.

+ +

Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les issues existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..c6395dbee9 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,625 @@ +--- +title: Les concepts de base des grilles CSS +slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Le module CSS Grid Layout ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.

+ +

Qu'est-ce qu'une grille ?

+ +

Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :

+ +

Pistes à taille fixe ou variable

+ +

On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité fr créée à cet effet.

+ +

Placement des éléments

+ +

Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.

+ +

Création de pistes supplémentaires pour du contenu

+ +

Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».

+ +

Contrôle de l'alignement

+ +

On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.

+ +

Contrôle des contenus qui se chevauchent

+ +

Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.

+ +

La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que flexbox. Le point de départ est le conteneur.

+ +

Le conteneur

+ +

À partir du moment où on crée un conteneur en déclarant la propriété display: grid ou display: inline-grid sur un élément, tous les enfants directs de cet élément deviennet des éléments de grille.

+ +

Cet exemple montre une div avec une classe .wrapper, avec cinq éléments enfants.

+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +

On transforme .wrapper en conteneur.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('Le_conteneur', '200', '330') }}

+ +

Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un inspecteur de grille dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur grid. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.

+ +

Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.

+ +

Les pistes

+ +

Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.

+ +

+ +

On peut ajouter la propriété grid-template-columns à notre exemple précédent, pour définir la taille des colonnes.

+ +

Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.

+ +
+
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

L'unité fr

+ +

Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.

+ +
+
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

+
+ +

L'exemple suivant crée une grille avec une colonne de 2fr, et deux colonnes de 1fr. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative fr.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Utiliser la notation repeat() pour définir les pistes

+ +

Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation repeat() pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

peut également s'écrire :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

Grille implicite et grille explicite

+ +

Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.

+ +

On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.

+ +

Dans l'exemple ci-après nous utilisons grid-auto-rows pour que les rangées de la grille implicite fassent 200 pixels de haut.

+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}

+ +

Dimensionner une piste avec minmax

+ +

Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.

+ +

La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons minmax() comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s'adaptera à la hauteur du contenu.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+   <div>Un</div>
+   <div>Deux
+     <p>Davantage de contenu.</p>
+     <p>On dépasse les 100 pixels.</p>
+   </div>
+   <div>Trois</div>
+   <div>Quatre</div>
+   <div>Cinq</div>
+</div>
+
+ +

{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}

+ +

Lignes de grille

+ +

Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.

+ +

Grid Lines

+ +

Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.

+ +

Positionnement des éléments sur les lignes

+ +

Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.

+ +

Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.

+ +

Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.

+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+  <div class="box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}

+ +

Pensez à utiliser l'Inspecteur de grille dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.

+ +

Les cellules

+ +

Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.

+ +

The first cell of the grid highlighted

+ +

Les zones

+ +

Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une zone. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.

+ +

A grid area

+ +

Les gouttières

+ +

Les gouttières entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+}
+
+ +
+

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

+ +

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

+
+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Les_gouttières') }}

+ +

L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité fr. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.

+ +

Grilles imbriquées

+ +

Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.

+ +
+
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +

Nested grid in flow

+ +

En définissant la propriété display:grid sur l'élément box1, il devient lui-même une grille et ses enfants se positionnent sur cette grille.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('nesting', '600', '340') }}

+ +

Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.

+ +

Sous-grille

+ +

Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée sous-grille qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer. Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer display: grid par display: subgrid, et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.

+ +

Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer grid-template-columns: repeat(3, 1fr) en grid-template-columns: subgrid. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+ +

Superposer les éléments avec z-index

+ +

Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.

+ +
+
<div class="wrapper">
+  <div class="box box1">Un</div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

L'élément box2 est maintenant superposé avec box1, et comme il arrive après dans le code source il s'affiche par-dessus.

+ +

Contrôler l’ordre de superposition

+ +

On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété z-index. Si nous donnons à box2 un z-index inférieur à celui de box1, l'élément box2 s'affichera sous box1 dans la pile.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}

+ +

La suite

+ +

Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.

+ +

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..8353f2c29e --- /dev/null +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,661 @@ +--- +title: L'alignement des boîtes avec les grilles CSS +slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS +tags: + - CSS + - CSS Grid + - Grille CSS + - Guides + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

+ +

Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.

+ +

Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.

+ +

Les deux axes d'une grille

+ +

Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (block layout). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.

+ +

+ +

L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.

+ +

+ +

Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.

+ +

Aligner des objets sur l'axe de bloc (block axis)

+ +

Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.

+ +

Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :

+ + + +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_1', '500', '450')}}

+
+ +

Lorsqu'on utilise align-self: start, la hauteur de chaque <div> sera déterminée par le contenu du <div>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <div> sera étiré afin de remplir la zone de la grille.

+ +

La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant align-self pour les objets.

+ +

Dans le prochain exemple, on utilise la propriété align-self afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour align-self : l'objet est étiré. Le deuxième objet utilise la valeur start, le troisième utilise end et le quatrième utilise center.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_2', '500', '450')}}

+
+ +

Gestion des objets avec un ratio intrinsèque

+ +

La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur start. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.

+ +

Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs start pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.

+ +

Justifier les objets sur l'axe en ligne (inline axis)

+ +

{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour align-self :

+ + + +

Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.

+ +

Là encore, la valeur par défaut stretch pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_3', '500', '450')}}

+
+ +

Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.

+ +

Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.

+ +

Propriétés raccourcies

+ +

La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.

+ +

Centrer un objet sur une zone

+ +

En combinant les propriétés align-* et justify-*, on peut facilement centrer un objet sur sa zone de grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+ <div class="item1">Objet 1</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_4', '500', '480')}}

+
+ +

Aligner les pistes d'une grille sur l'axe de bloc

+ +

Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.

+ +

La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

+ +

Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :

+ + + +

Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.

+ +

La propriété align-content s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est start : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_5', '500', '520')}}

+
+ +

Si on ajoute align-content avec la valeur end sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_6', '500', '520')}}

+
+ +

Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : space-between, space-around et space-evenly qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec space-between pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_7', '500', '1570')}}

+
+ +

On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.

+ +

Dans l'image qui suit, on a a placé une grille en utilisant align-content: start et une autre grille qui utilise align-content: space-between. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.

+ +

+ +

Justifier les pistes sur l'axe des lignes

+ +

Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.

+ +

Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur space-around. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_8', '500', '500')}}

+
+ +

Alignement et marges automatiques

+ +

Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser auto pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant auto pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.

+ +

Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec auto. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_9', '500', '500')}}

+
+ +

On peut voir comment l'objet est aligné grâce à l'outil de mise en évidence des grilles dans Firefox.

+ +

+ +

L'alignement et les modes d'écriture

+ +

Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions physiques.

+ +

Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut justify-content: start placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec margin-right ou margin-left ou si on utilise le positionnement absolu avec les valeurs top, right, bottom et left, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

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/construire_des_dispositions_courantes_avec_des_grilles_css/index.html deleted file mode 100644 index 44e85dda1f..0000000000 --- a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html +++ /dev/null @@ -1,560 +0,0 @@ ---- -title: Construire des dispositions courantes avec des grilles CSS -slug: >- - Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

- -

Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.

- -

Une disposition adaptative avec une à trois colonnes en utilisant grid-template-areas

- -

De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit responsive, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.

- -

Image of the three different layouts created by redefining our grid at two breakpoints.

- -

Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.

- -

Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.

- -
- - -
<div class="wrapper">
-  <header class="main-head">L'en-tête</header>
-  <nav class="main-nav">
-    <ul>
-      <li><a href="">Nav 1</a></li>
-      <li><a href="">Nav 2</a></li>
-      <li><a href="">Nav 3</a></li>
-    </ul>
-  </nav>
-  <article class="content">
-    <h1>L'article principal</h1>
-    <p>
-       Dans cette disposition, on affiche les zones dans le même
-       ordre que dans le document pour les écrans dont la largeur
-       est inférieure à 500 pixels. On passe à une disposition sur
-       deux colonnes ou trois colonnes en redéfinissant la grille
-       et le placement des objets sur la grille.
-    </p>
-  </article>
-  <aside class="side">Barre latérale</aside>
-  <div class="ad">Publicité</div>
-  <footer class="main-footer">Le pied de page</footer>
-</div>
-
- -

On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes media queries. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.

- -
.main-head {
-  grid-area: header;
-}
-.content {
-  grid-area: content;
-}
-.main-nav {
-  grid-area: nav;
-}
-.side {
-  grid-area: sidebar;
-}
-.ad {
-  grid-area: ad;
-}
-.main-footer {
-  grid-area: footer;
-}
-
- -

Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. le guide sur les grilles CSS et l'accessibilité). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.

- -
.wrapper {
-  display: grid;
-  grid-gap: 20px;
-  grid-template-areas:
-    "header"
-    "nav"
-    "content"
-    "sidebar"
-    "ad"
-    "footer";
-}
-
- -

Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :

- -
@media (min-width: 500px) {
-  .wrapper {
-    grid-template-columns: 1fr 3fr;
-    grid-template-areas:
-      "header  header"
-      "nav     nav"
-      "sidebar content"
-      "ad      footer";
-  }
-  nav ul {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
- -

On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête header s'étale sur deux colonnes et le bloc nav également. Sur la troisième ligne, on a la barre latérale (sidebar) à côté du contenu (content). Sur la quatrième ligne, on a le bloc pour la publicité (ad) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.

- -

Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :

- -
@media (min-width: 700px) {
-  .wrapper {
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-areas:
-      "header header  header"
-      "nav    content sidebar"
-      "nav    content ad"
-      "footer footer  footer"
-   }
-   nav ul {
-     flex-direction: column;
-   }
-}
-
- -

Cette disposition en trois colonnes possède une première colonne qui s'étend sur 1fr, une colonne centrale qui s'étend sur 4fr et une dernière colonne qui mesure également 1fr. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.

- -

Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.

- -

{{EmbedLiveSample('layout_1', '800', '430')}}

-
- -

Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc ad dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.

- -

Une disposition flexible avec 12 colonnes

- -

Si vous travaillez avec un framework ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure 1fr-unit et commence par une ligne intitulée col-start. Autrement dit, on aura 12 colonnes intitulées col-start.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-  grid-gap: 20px;
-}
-
- -

Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :

- -
<div class="wrapper">
-  <div class="item1">Début à la première colonne, s'étend sur 3 colonnes.</div>
-  <div class="item2">Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.</div>
-  <div class="item3">Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.</div>
-  <div class="item4">Début à la colonne 3, s'étend jusqu'à la fin de la grille.</div>
-</div>
-
- -

Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé span :

- -
.item1 {
-  grid-column: col-start / span 3;
-}
-.item2 {
-  grid-column: col-start 6 / span 4 ;
-  grid-row: 1 / 3;
-}
-.item3 {
-  grid-column: col-start 2 / span 2;
-  grid-row: 2;
-}
-.item4 {
-  grid-column: col-start 3 / -1;
-  grid-row: 3;
-}
-
- -

{{EmbedLiveSample('layout_2', '800', '330')}}

-
- -

Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.

- -

Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé span pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé l'inspecteur de grille de Firefox qui indique de façon claire comment les objets sont placés.

- -

Showing the items placed on the grid with grid tracks highlighted.

- -

Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant stricte, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.

- -

Construire une disposition avec ce système à 12 colonnes

- -

Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :

- -
- - -
<div class="wrapper">
-  <header class="main-head">L'en-tête</header>
-  <nav class="main-nav">
-    <ul>
-      <li><a href="">Nav 1</a></li>
-      <li><a href="">Nav 2</a></li>
-      <li><a href="">Nav 3</a></li>
-    </ul>
-  </nav>
-  <article class="content">
-    <h1>L'article principal</h1>
-    <p>
-       Dans cette disposition, on affiche les zones dans le même
-       ordre que dans le document pour les écrans dont la largeur
-       est inférieure à 500 pixels. On passe à une disposition sur
-       deux colonnes ou trois colonnes en redéfinissant la grille
-       et le placement des objets sur la grille.
-    </p>
-  </article>
-  <aside class="side">Barre latérale</aside>
-  <div class="ad">Publicité</div>
-  <footer class="main-footer">Le pied de page</footer>
-</div>
-
- -

On initialise la grille avec nos 12 colonnes :

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-  grid-gap: 20px;
-}
-
- -

Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.

- -

Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.

- -
.wrapper > * {
-  grid-column: col-start / span 12;
-}
-
- -

Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée col-start et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).

- -

Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.

- -
@media (min-width: 500px) {
-  .side {
-    grid-column: col-start / span 3;
-    grid-row: 3;
-  }
-  .ad {
-    grid-column: col-start / span 3;
-    grid-row: 4;
-  }
-  .content, .main-footer {
-    grid-column: col-start 4 / span 9;
-  }
-  nav ul {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
- -

Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.

- -
@media (min-width: 700px) {
-  .main-nav {
-    grid-column: col-start / span 2;
-    grid-row: 2 / 4;
-  }
-  .content {
-    grid-column: col-start 3 / span 8;
-    grid-row: 2 / 4;
-  }
-  .side {
-    grid-column: col-start 11 / span 2;
-    grid-row: 2;
-  }
-  .ad {
-    grid-column: col-start 11 / span 2;
-    grid-row: 3;
-  }
-  .main-footer {
-    grid-column: col-start / span 12;
-  }
-  nav ul {
-    flex-direction: column;
-  }
-}
-
- -

{{EmbedLiveSample('layout_3', '800', '430')}}

-
- -

On peut à nouveau profiter de l'inspecteur de grille pour voir comment se compose effectivement notre disposition :

- -

Showing the layout with grid tracks highlighted by the grid inspector.

- -

On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..

- -

Une liste produit utilisant le placement automatique

- -

De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.

- -

Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.

- -
-
<ul class="listing">
-  <li>
-    <h2>Produit n°1</h2>
-    <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-    <div class="cta"><a href="">Faire quelque chose !</a></div>
-  </li>
-   <li>
-     <h2>Produit n°2</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-   </li>
-   <li class="wide">
-     <h2>Produit n°3</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p>
-     <p>Ce produit possède un descriptif beaucoup plus long.</p>
-     <p>Vraiment plus long</p>
-     <p>Peut-être faudrait-il le gérer différemment ?</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
-    <li>
-     <h2>Produit n°4</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
-     <li>
-     <h2>Produit n°5</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-      <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
-</ul>
-
- - - -

Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction minmax() avec la notation repeat pour la propriété grid-template-columns qui permet de dimensionner les pistes.

- -
.listing {
-  list-style: none;
-  margin: 2em;
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
-}
-
- -

Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.

- -

On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise display: flex et flex-direction avec la valeur column. On ajoute une marge automatique pour la classe .cta afin que cette barre soit placée en bas de la boîte.

- -
.listing li {
-  border: 1px solid #ffe066;
-  border-radius: 5px;
-  display: flex;
-  flex-direction: column;
-}
-.listing .cta {
-  margin-top: auto;
-  border-top: 1px solid #ffe066;
-  padding: 10px;
-  text-align: center;
-}
-.listing .body {
-  padding: 10px;
-}
-
- -

Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.

- -

{{EmbedLiveSample('layout_4', '800', '900')}}

-
- -

Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe wide sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur span 2. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :

- -

The layout has gaps as there is not space to layout a two track item.

- -

Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}: dense sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (tab order) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.

- -
- - -
.listing {
-  list-style: none;
-  margin: 2em;
-  display: grid;
-  grid-gap: 20px;
-  grid-auto-flow: dense;
-  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
-}
-.listing .wide {
-  grid-column-end: span 2;
-}
-
- -

{{EmbedLiveSample('layout_5', '800', '900')}}

- -

Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.

-
- -

Aller plus loin

- -

La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un framework ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.

- - - -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html new file mode 100644 index 0000000000..8a5122de2f --- /dev/null +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -0,0 +1,420 @@ +--- +title: Les grilles CSS et l'amélioration progressive +slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

+ +

Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (CSS Grid). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.

+ +

Les navigateurs qui prennent en charge les grilles CSS

+ +

En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.

+ +

La situation pour Internet Explorer et Edge

+ +

La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.

+ +

La version implémentée pour IE/Edge (≤15) est préfixée avec -ms et les propriétés ont les noms suivants :

+ + + +

La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : -ms-grid-column-span et -ms-grid-row-span. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par -ms. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.

+ +

L'utilisation d'autoprefixer pour la prise en charge de la grille

+ +

L'outil autoprefixer a été mis à jour afin de prendre en charge les versions préfixées par -ms- lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option grid: autoplace.

+ +
autoprefixer({ grid: 'autoplace' })
+ +

Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées

+ +

Puis-je utiliser les grilles CSS sans danger ?

+ +

Comme pour les autres technologies front-end, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.

+ +

Commencer à utiliser les grilles CSS en production

+ +

On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.

+ +

Effectuer la transition depuis une disposition flottante

+ +

Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé des dispositions flottantes. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.

+ +

Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.

+ +
+
* {box-sizing: border-box;}
+img {
+  max-width: 100%;
+  display: block;
+}
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+.media::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.media .image {
+  float: left;
+  width: 150px;
+  margin-right: 20px;
+}
+.media .text {
+  padding: 10px;
+  align-self: end;
+}
+
+ +
<div class="media">
+  <div class="image">
+    <img src="http://placehold.it/150x150" alt="placeholder">
+  </div>
+  <div class="text">
+    Voici un exemple avec un média. On utilise le flottement
+    pour les anciens navigateurs et une grille pour les
+    nouveaux.
+  </div>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_1', '500', '180')}}

+
+ +

Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.

+ +

A simple example of overriding a floated layout using grid.

+ +

Utiliser les requêtes de fonctionnalité (feature queries)

+ +

L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.

+ +

Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.

+ +
+ + +
.wrapper ul {
+  overflow: hidden;
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+.wrapper li {
+  float: left;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_2', '550', '400')}}

+
+ +

Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.

+ +

A floated cards layout demonstrating the problem caused by uneven content height.

+ +

Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…

+ +

Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.

+ +

After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.

+ +

Si on réinitialise la largeur avec auto, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce aux requêtes de fonctionnalité CSS, on peut le faire directement en CSS.

+ +

Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.

+ +
@supports (display: grid) {
+  .wrapper {
+    // ajouter les règles qu'on souhaite
+    // pour les navigateurs qui prennent
+    // en charge les grilles
+  }
+}
+
+ +

La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.

+ +

On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.

+ +
+ + +
.wrapper ul {
+    overflow: hidden;
+    margin: 0 -10px;
+    padding: 0;
+    list-style: none;
+}
+.wrapper li {
+    float: left;
+    width: calc(33.333333% - 20px);
+    margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    min-height: auto;
+    margin: 0;
+  }
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_3', '550', '480')}}

+
+ +

Surcharger les autres valeurs pour display

+ +

Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple display: inline-block.

+ +

Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger display: inline-block. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par inline-block, ils deviendront des objets de la grille et inline-block ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété vertical-align sur les éléments lorsqu'on utilise le mode inline-block, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.

+ +
+ + +
.wrapper ul {
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+
+.wrapper li {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    margin: 0;
+  }
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_4', '500', '480')}}

+
+ +

Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé grid-gap plutôt que des marges et des marges négatives pour créer les « gouttières ».

+ +

Comment la spécification gère-t-elle cette surcharge ?

+ +

La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :

+ + + +

Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.

+ +

Les autres valeurs de display

+ +

Lorsqu'un élément possède un parent pour lequel display: grid, cet élément devient un bloc (cf. la specification). C'est pour cela que, pour l'élément qui utilisait inline-block, display: inline-block ne s'appliquait plus.

+ +

Si la disposition historique utilise display: table, un élément avec display: table-cell génèrera des boîtes anonymes. Aussi, si on utilise display: table-cell sans élément parent avec display-table, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un div ou autre pour lequel on aurait défini display: table). Si on a un objet pour lequel display: table-cell et que, dans une requête de fonctionnalité, on utilise display: grid pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger display: table sans avoir ces boîtes anonymes supplémentaires.

+ +

Les éléments flottants

+ +

Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement float: none sur les éléments.

+ +

L'alignement vertical

+ +

La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent display: inline-block ou display: table, la propriété vertical-align était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.

+ +

La disposition sur plusieurs colonnes

+ +

Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés column-* ne s'appliquent pas sur un conteneur de grille.

+ +

Approfondir la question

+ + + +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html new file mode 100644 index 0000000000..6e2751382d --- /dev/null +++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -0,0 +1,124 @@ +--- +title: Les grilles CSS et l'accessibilité +slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité +tags: + - Accessibilité + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

+ +

Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.

+ +

Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que CSS Zen Garden montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.

+ +

Les grilles CSS n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?

+ +

Réordonner le contenu dans une grille CSS

+ +

Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser grid-auto-flow: dense pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.

+ +

La spécification contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.

+ +
+

La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. tabindex).

+
+ +

Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.

+ +

La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.

+ +
+

Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.

+
+ +

Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?

+ +

Un ré-ordonnancement visuel et non logique

+ +

La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement visuelle. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.

+ +

Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="box box1"><a href="">Un</a></div>
+  <div class="box box2"><a href="">Deux</a></div>
+  <div class="box box3"><a href="">Trois</a></div>
+  <div class="box box4"><a href="">Quatre</a></div>
+  <div class="box box5"><a href="">Cinq</a></div>
+</div>
+
+ +

{{EmbedLiveSample('accessibility_1', '500', '330')}}

+
+ +

Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.

+ +

Comment prendre en compte l'accessibilité avec une disposition en grille ?

+ +

On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?

+ +
+
Démarrer avec un document structuré et accessible
+
Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.
+
Créer une grille adaptative correcte
+
Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des requêtes de média afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?
+
Revenir à la source
+
Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.
+
+ +

Les grilles et le risque d'aplatir le document à outrance

+ +

On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est cet ul qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.

+ +

Si la valeur subgrid est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que sous-grille. Actuellement, la seule solution à notre disposition est d'utiliser display: contents afin que la boîte générée par l'élément ul disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter l'article sur les liens entre les grilles et les autres méthodes de disposition et notamment la section sur display: contents.

+ +

Étant donné que la prise en charge de display: contents pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec ul, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a display: grid. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.

+ +

Approfondir la question

+ +

Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).

+ +

Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans WCAG Techniques for Success Criteria – Technique C27 (en anglais).

+ +

Pour construire votre réflexion sur ce sujet, je vous invite à lire Flexbox & the Keyboard Navigation Disconnect écrit par Léonie Watson. La vidéo de la présentation de Léonie à ffconf est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié un article sur l'ordre de la navigation au clavier dans les différents navigateurs bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html new file mode 100644 index 0000000000..cbc0501498 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -0,0 +1,452 @@ +--- +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 +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guides + - Intermédiaire +translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.

+ +

Les propriétés logiques, les propriétés physiques et les valeurs

+ +

CSS possède de nombreux mots-clés qui permettent de positionner physiquement les éléments : left, right, top, bottom… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.

+ +
.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+
+ +
<div class="container">
+  <div class="item">Item</div>
+</div>
+
+ +

On rencontre également ces mots-clés physiques avec text-align: right afin d'aligner le texte à droite. Il existe aussi des propriétés physiques en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.

+ +

On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.

+ +

Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise text-align avec left et on ajoute dir="rtl" sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec text-align value: left, l'alignement reste à gauche.

+ +

A simple example of text direction.

+ +

Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.

+ +

Les propriétés et valeurs logiques

+ +

Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé start lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, start correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, start ne correspond pas à une position physique.

+ +

L'axe de bloc et l'axe en ligne

+ +

Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (block axis en anglais) et l'axe en ligne (inline axis). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes logiques sont très utiles et on comprend mieux leurs rôles sur la grille.

+ +

An image showing the default direction of the Block and Inline Axes.

+ +

Les modes d'écriture CSS

+ +

Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (CSS Writing Modes). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article CSS Writing Modes (en anglais) écrit par Jen Simmons.

+ +

writing-mode

+ +

Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété writing-mode nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :

+ + + +

Sur le Web, c'est la valeur horizontal-tb qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut horizontal-tb et le second utilise la valeur vertical-rl. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (inline) est donc l'axe vertical.

+ +
+ + +
<div class="wrapper">
+  <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p>
+  <p style="writing-mode: vertical-rl">Moi je suis écrit avec <code>vertical-rl</code></p>
+</div>
+
+ +

{{EmbedLiveSample('writing_1', '500', '420')}}

+
+ +

La gestion des modes d'écriture avec une grille

+ +

Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.

+ +

Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+  <div class="item5">Objet 5</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_2', '500', '330')}}

+
+ +

Si on ajoute writing-mode: vertical-lr au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+  <div class="item5">Objet 5</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_3', '500', '330')}}

+
+ +

A image showing the direction of Block and Inline when writing-mode is vertical-lr

+ +

L'utilisation de valeurs logiques pour l'alignement

+ +

Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.

+ +

Dans le prochain exemple, on aligne des objets dans une grille pour laquelle writing-mode: vertical-lr. Les valeurs start et end fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+  grid-column: 1 / 4;
+  align-self: start;
+}
+
+.item2 {
+  grid-column: 1 / 3;
+  grid-row: 2 / 4;
+  align-self: start;
+}
+
+.item3 {
+  grid-column: 3;
+  grid-row: 2 / 4;
+  align-self: end;
+  justify-self: end;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_4', '500', '330')}}

+
+ +

Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de vertical-lr à vertical-rl pour changer de mode d'écriture.

+ +

Le placement automatique et les modes d'écriture

+ +

On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.

+ +

Le placement sur les lignes et les modes d'écriture

+ +

Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.

+ +

Dans l'exemple suivant, on a une grille avec la direction ltr et on positionne trois objets en utilisant le placement sur les lignes.

+ + + +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_5', '500', '330')}}

+
+ +

Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur rtl pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.

+ +
+ + +
.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_6', '500', '330')}}

+
+ +

On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.

+ +

L'étrange ordre des valeurs pour grid-area

+ +

La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).

+ +

Pour les valeurs de grid-area, l'ordre est le suivant :

+ + + +

Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :

+ + + +

Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété grid-area comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !

+ +

Utiliser des modes d'écriture hybrides et les grilles CSS

+ +

Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 1fr auto;
+  font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+  writing-mode: vertical-lr;
+}
+.wrapper ul {
+  list-style: none;
+  margin: 0;
+  padding: 1em;
+  display: flex;
+  justify-content: space-between;
+}
+.wrapper a {
+  text-decoration: none;
+}
+
+ +
<div class="wrapper">
+  <div class="content">
+    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
+    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
+  </div>
+  <nav>
+    <ul>
+      <li><a href="">Lien 1</a></li>
+      <li><a href="">Lien 2</a></li>
+      <li><a href="">Lien 3</a></li>
+    </ul>
+  </nav>
+</div>
+
+ +

{{EmbedLiveSample('writing_7', '500', '330')}}

+
+ +

Les valeurs physiques et les grilles CSS

+ +

On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.

+ +

Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode ltr à un mode rtl.

+ +

Utiliser les propriétés logiques partout

+ +

Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.

+ +

La spécification sur les propriétés logiques en CSS vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des équivalents logiques pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" "b/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" deleted file mode 100644 index be9c0122a7..0000000000 --- "a/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" +++ /dev/null @@ -1,482 +0,0 @@ ---- -title: Définir des zones sur une grille -slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide -translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

- -

Dans le guide précédent, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des zones de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !

- -

Donner un nom à une zone de grille

- -

On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :

- -
.box1 {
-   grid-area: 1 / 1 / 4 / 2;
-}
-
- -

Ici, on définit les quatre lignes qui entourent la zone en question :

- -

The Grid Area defined by lines

- -

On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :

- - - -

An image showing a simple two column layout with header and footer

- -

Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :

- -
-
.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-
- -

Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-    "hd hd hd hd   hd   hd   hd   hd   hd"
-    "sd sd sd main main main main main main"
-    "ft ft ft ft   ft   ft   ft   ft   ft";
-}
-
- - - -
<div class="wrapper">
-  <div class="header">En-tête</div>
-  <div class="sidebar">Barre latérale</div>
-  <div class="content">Contenu</div>
-  <div class="footer">Pied de page</div>
-</div>
- -

{{EmbedLiveSample('Grid_Area_1', '300', '330')}}

-
- -

Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.

- -

Laisser une cellule vide

- -

Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.

- -
.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-
- - - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-      "hd hd hd hd   hd   hd   hd   hd   hd"
-      "sd sd sd main main main main main main"
-      ".  .  .  ft   ft   ft   ft   ft   ft";
-}
-
- -
<div class="wrapper">
-  <div class="header">En-tête</div>
-  <div class="sidebar">Barre latérale</div>
-  <div class="content">Contenu</div>
-  <div class="footer">Pied de page</div>
-</div>
- -

{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}

- -

Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.

- -

Occuper plusieurs cellules

- -

Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que hd et ft soient alignés avec main).

- -

La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par sd.

- -
.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-
- - - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-    "hd hd hd hd   hd   hd   hd   hd   hd"
-    "sd sd sd main main main main main main"
-    "sd sd sd  ft  ft   ft   ft   ft   ft";
-}
-
- - - -

{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}

- -

La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.

- -

Redéfinir une grille à avec des media queries

- -

Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.

- -

Pour ce faire, on définit les noms des zones en dehors de toute media query afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.

- -

Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :

- - - -
.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-
-.wrapper {
-  display: grid;
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-columns: 1fr;
-  grid-template-areas:
-    "hd"
-    "main"
-    "sd"
-    "ft";
-}
-
- -

On peut ensuite redéfinir la disposition à l'intérieur des différentes media queries utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec grid-template-areas.

- -
@media (min-width: 500px) {
-  .wrapper {
-    grid-template-columns: repeat(9, 1fr);
-    grid-template-areas:
-      "hd hd hd hd   hd   hd   hd   hd   hd"
-      "sd sd sd main main main main main main"
-      "sd sd sd  ft  ft   ft   ft   ft   ft";
-  }
-}
-@media (min-width: 700px) {
-  .wrapper {
-    grid-template-areas:
-      "hd hd hd   hd   hd   hd   hd   hd hd"
-      "sd sd main main main main main ft ft";
-  }
-}
-
- - - -

{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}

- -

Utiliser grid-template-areas pour des éléments d'interface utilisateur

- -

La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.

- -

Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.

- -

Images showing an example media object design

- -

Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec 1fr et celle pour le texte reçoit 3fr. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser 1fr pour la zone du texte. Cette colonne de 1fr aurait alors occupé le reste de l'espace.

- -

Pour la zone dédiée à l'image, on crée une zone de grille intitulée img et pour le texte, on crée une seconde zone intitulée content. Ensuite, on utilise ces noms pour créer l'organisation via la propriété grid-template-areas.

- -
-
* {box-sizing: border-box;}
-
-.media {
-  border: 2px solid #f76707;
-  border-radius: 5px;
-  background-color: #fff4e6;
-  max-width: 400px;
-}
-.media {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-template-areas: "img content";
-  margin-bottom: 1em;
-}
-
-.media .image {
-  grid-area: img;
-  background-color: #ffd8a8;
-}
-
-.media .text {
-  grid-area: content;
-  padding: 10px;
-}
-
- -
<div class="media">
-  <div class="image"></div>
-  <div class="text">
-    Dans cet exemple, on peut utiliser
-    grid-template-areas pour échanger les
-    places du texte et du media.
-  </div>
-</div>
- -

{{EmbedLiveSample('Media_1', '300', '200')}}

-
- -

Afficher l'image de l'autre côté

- -

Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure 1fr est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.

- -
-
* {box-sizing: border-box;}
-
-.media {
-  border: 2px solid #f76707;
-  border-radius: 5px;
-  background-color: #fff4e6;
-  max-width: 400px;
-}
-.media {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-template-areas: "img content";
-  margin-bottom: 1em;
-}
-
-.media.flipped {
-  grid-template-columns: 3fr 1fr;
-  grid-template-areas: "content img";
-}
-
-.media .image {
-  grid-area: img;
-  background-color: #ffd8a8;
-}
-
-.media .text {
-  grid-area: content;
-  padding: 10px;
-}
-
- -
<div class="media flipped">
-  <div class="image"></div>
-  <div class="text">
-    Dans cet exemple, on peut utiliser
-    grid-template-areas pour échanger les
-    places du texte et du media.
-  </div>
-</div>
- -

{{EmbedLiveSample('Media_2', '300', '200') }}

-
- -

Les propriétés raccourcies pour les grilles CSS

- -

Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.

- -

Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.

- -

Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle mais aussi qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.

- -

Les deux propriétés raccourcies pour les grilles sont grid-template et grid.

- -

grid-template

- -

La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :

- - - -

Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.

- -

Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.

- -
.wrapper {
-    display: grid;
-    grid-template:
-      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
-      "sd sd sd main main main main main main" minmax(100px, auto)
-      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
-             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
-}
-
- -

La première valeur correspond à celle de grid-template-areas mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec minmax(100px, auto)).

- -

Après la valeur de grid-template-areas, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.

- -

grid

- -

La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :

- - - -

Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur 0 mais, en revanche, elle ne permet pas de définir des espaces.

- -

On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :

- -
.wrapper {
-    display: grid;
-    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
-    "sd sd sd main main main main main main" minmax(100px, auto)
-    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
-    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
-}
-
- -

Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété grid-auto-flow.

- -

Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html new file mode 100644 index 0000000000..be9c0122a7 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html @@ -0,0 +1,482 @@ +--- +title: Définir des zones sur une grille +slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans le guide précédent, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des zones de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !

+ +

Donner un nom à une zone de grille

+ +

On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :

+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+
+ +

Ici, on définit les quatre lignes qui entourent la zone en question :

+ +

The Grid Area defined by lines

+ +

On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :

+ + + +

An image showing a simple two column layout with header and footer

+ +

Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :

+ +
+
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ +

Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+ + + +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+ +

{{EmbedLiveSample('Grid_Area_1', '300', '330')}}

+
+ +

Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.

+ +

Laisser une cellule vide

+ +

Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.

+ +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+
+ +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+ +

{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}

+ +

Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.

+ +

Occuper plusieurs cellules

+ +

Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que hd et ft soient alignés avec main).

+ +

La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par sd.

+ +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+
+ + + +

{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}

+ +

La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.

+ +

Redéfinir une grille à avec des media queries

+ +

Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.

+ +

Pour ce faire, on définit les noms des zones en dehors de toute media query afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.

+ +

Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :

+ + + +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper {
+  display: grid;
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "hd"
+    "main"
+    "sd"
+    "ft";
+}
+
+ +

On peut ensuite redéfinir la disposition à l'intérieur des différentes media queries utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec grid-template-areas.

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+  }
+}
+@media (min-width: 700px) {
+  .wrapper {
+    grid-template-areas:
+      "hd hd hd   hd   hd   hd   hd   hd hd"
+      "sd sd main main main main main ft ft";
+  }
+}
+
+ + + +

{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}

+ +

Utiliser grid-template-areas pour des éléments d'interface utilisateur

+ +

La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.

+ +

Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.

+ +

Images showing an example media object design

+ +

Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec 1fr et celle pour le texte reçoit 3fr. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser 1fr pour la zone du texte. Cette colonne de 1fr aurait alors occupé le reste de l'espace.

+ +

Pour la zone dédiée à l'image, on crée une zone de grille intitulée img et pour le texte, on crée une seconde zone intitulée content. Ensuite, on utilise ces noms pour créer l'organisation via la propriété grid-template-areas.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+
+ +
<div class="media">
+  <div class="image"></div>
+  <div class="text">
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  </div>
+</div>
+ +

{{EmbedLiveSample('Media_1', '300', '200')}}

+
+ +

Afficher l'image de l'autre côté

+ +

Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure 1fr est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media.flipped {
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas: "content img";
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+
+ +
<div class="media flipped">
+  <div class="image"></div>
+  <div class="text">
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  </div>
+</div>
+ +

{{EmbedLiveSample('Media_2', '300', '200') }}

+
+ +

Les propriétés raccourcies pour les grilles CSS

+ +

Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.

+ +

Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.

+ +

Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle mais aussi qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.

+ +

Les deux propriétés raccourcies pour les grilles sont grid-template et grid.

+ +

grid-template

+ +

La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :

+ + + +

Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.

+ +

Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.

+ +
.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

La première valeur correspond à celle de grid-template-areas mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec minmax(100px, auto)).

+ +

Après la valeur de grid-template-areas, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.

+ +

grid

+ +

La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :

+ + + +

Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur 0 mais, en revanche, elle ne permet pas de définir des espaces.

+ +

On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :

+ +
.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété grid-auto-flow.

+ +

Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html new file mode 100644 index 0000000000..d8d7e5cf83 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -0,0 +1,431 @@ +--- +title: Utiliser des lignes nommées sur une grille +slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.

+ +

Nommer des lignes lorsqu'on définit une grille

+ +

Lorsqu'on définit une grille avec grid-template-rows et grid-template-columns, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.

+ +
+ + +

Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici content-start et content-end), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.

+ +
.wrapper {
+ display: grid;
+ grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+
+ +

Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.

+ +
.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +

{{EmbedLiveSample('example_named_lines', '500', '330')}}

+
+ +

Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition responsive où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les media queries.

+ +

Donner plusieurs noms à une ligne

+ +

On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : [sidebar-end main-start]. On peut ensuite désigner la ligne par l'un de ces noms.

+ +

Définir des zones de grilles implicites à l'aide de lignes nommées

+ +

Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un identifiant personnalisé (ou custom ident), c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser span). Les identifiants ne sont pas mis entre quotes.

+ +

Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes -start et -end pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise content-start et content-end pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée content qu'on peut également manipuler

+ +
+ + +

On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée content.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+
+ +
<div class="wrapper">
+  <div class="thing">
+    Je suis dans une zone nommée content.
+  </div>
+</div>
+
+ +

{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}

+
+ +

Il n'est pas nécessaire de définir l'emplacement de cette zone avec grid-template-areas car les lignes suffisent à créer la zone et à la placer.

+ +

Définir des lignes implicites à l'aide de zones nommées

+ +

Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.

+ +

Dans cet exemple, on ajoute un élément div supplémentaire et on lui ajoute la classe overlay. On déclare des zones nommées à l'aide de grid-area puis on indique la disposition via la propriété grid-template-areas. Les noms utilisés pour les zones sont :

+ + + +

Cela crée implicitement les lignes et colonnes suivantes :

+ + + +

Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, sd-end et main-start font référence à la même ligne verticale).

+ +

An image showing the implicit line names created by our grid areas.

+ +

On peut positionner overlay grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+.wrapper > div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+
+ +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+  <div class="overlay">Masque</div>
+</div>
+
+ +

{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}

+
+ +

Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.

+ +

Utiliser plusieurs lignes avec le même nom : repeat()

+ +

Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec repeat() car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec repeat(), vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.

+ +

Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (1fr), on définit un nom : [col-start]. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées col-start et qui mesureront chacune 1fr de large.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+ +

Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom col-start et si on place un objet après la ligne col-start, la grille utilisera la première ligne intitulée col-start (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :

+ +
.item1 {
+  grid-column: col-start / col-start 5
+}
+
+ +

On peut également utiliser le mot-clé span. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :

+ +
.item2 {
+  grid-column: col-start 7 / span 3;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Je vais de col-start 1 à col-start 5</div>
+  <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div>
+</div>
+ +

{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}

+
+ +

Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :

+ +

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

+ +

La syntaxe repeat() permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (1fr), intitulée col1-start, et qui est suivie par une colonne plus large (3fr), intitulée col2-start.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+
+ +

Si on utilise repeat() et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est 1fr, chacune avec un début et une fin.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+
+ +

Si on écrivait la même définition sans utiliser repeat(), on aurait la forme suivante :

+ +
.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+
+ +

Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé span pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.</div>
+  <div class="item2">Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start</div>
+</div>
+
+ +

{{EmbedLiveSample('span_line_number', '500', '330')}}

+
+ +

Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.

+ +

Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des frameworks tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le framework importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel framework se résume à :

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+
+ +

On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :

+ + + +
<div class="wrapper">
+  <header class="main-header">Je suis l'en-tête</header>
+   <aside class="side1">Je suis la barre latérale 1</aside>
+   <article class="content">Je suis l'article</article>
+   <aside class="side2">Je suis la barre latérale 2</aside>
+   <footer class="main-footer">Je suis le pied de page</footer>
+</div>
+
+ +

Pour placer ces éléments, on utilise la grille de la façon suivante :

+ +
.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+
+ +

{{EmbedLiveSample('three_column', '500', '330')}}

+ +

Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :

+ +

The layout with the grid highlighted.

+
+ +

Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent 1fr. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html deleted file mode 100644 index c6395dbee9..0000000000 --- a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html +++ /dev/null @@ -1,625 +0,0 @@ ---- -title: Les concepts de base des grilles CSS -slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

- -

Le module CSS Grid Layout ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.

- -

Qu'est-ce qu'une grille ?

- -

Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :

- -

Pistes à taille fixe ou variable

- -

On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité fr créée à cet effet.

- -

Placement des éléments

- -

Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.

- -

Création de pistes supplémentaires pour du contenu

- -

Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».

- -

Contrôle de l'alignement

- -

On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.

- -

Contrôle des contenus qui se chevauchent

- -

Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.

- -

La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que flexbox. Le point de départ est le conteneur.

- -

Le conteneur

- -

À partir du moment où on crée un conteneur en déclarant la propriété display: grid ou display: inline-grid sur un élément, tous les enfants directs de cet élément deviennet des éléments de grille.

- -

Cet exemple montre une div avec une classe .wrapper, avec cinq éléments enfants.

- -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -

On transforme .wrapper en conteneur.

- -
.wrapper {
-  display: grid;
-}
-
- - - -

{{ EmbedLiveSample('Le_conteneur', '200', '330') }}

- -

Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un inspecteur de grille dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur grid. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.

- -

Using the Grid Highlighter in DevTools to view a grid

- -

Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.

- -

Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.

- -

Les pistes

- -

Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.

- -

- -

On peut ajouter la propriété grid-template-columns à notre exemple précédent, pour définir la taille des colonnes.

- -

Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.

- -
-
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 200px 200px 200px;
-}
-
- - - -

{{ EmbedLiveSample('grid_first', '610', '140') }}

-
- -

L'unité fr

- -

Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.

- -
-
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- - - -

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

-
- -

L'exemple suivant crée une grille avec une colonne de 2fr, et deux colonnes de 1fr. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-}
-
- -

Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative fr.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 500px 1fr 2fr;
-}
-
- -

Utiliser la notation repeat() pour définir les pistes

- -

Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation repeat() pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- -

peut également s'écrire :

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 20px repeat(6, 1fr) 20px;
-}
-
- -

Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr 2fr);
-}
-
- -

Grille implicite et grille explicite

- -

Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.

- -

On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.

- -

Dans l'exemple ci-après nous utilisons grid-auto-rows pour que les rangées de la grille implicite fassent 200 pixels de haut.

- -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 200px;
-}
-
- - - -

{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}

- -

Dimensionner une piste avec minmax

- -

Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.

- -

La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons minmax() comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s'adaptera à la hauteur du contenu.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-
- - - -
<div class="wrapper">
-   <div>Un</div>
-   <div>Deux
-     <p>Davantage de contenu.</p>
-     <p>On dépasse les 100 pixels.</p>
-   </div>
-   <div>Trois</div>
-   <div>Quatre</div>
-   <div>Cinq</div>
-</div>
-
- -

{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}

- -

Lignes de grille

- -

Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.

- -

Grid Lines

- -

Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.

- -

Positionnement des éléments sur les lignes

- -

Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.

- -

Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.

- -

Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.

- -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-  <div class="box5">Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 3;
-  grid-row-end: 5;
-}
-
- - - -

{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}

- -

Pensez à utiliser l'Inspecteur de grille dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.

- -

Les cellules

- -

Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.

- -

The first cell of the grid highlighted

- -

Les zones

- -

Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une zone. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.

- -

A grid area

- -

Les gouttières

- -

Les gouttières entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-column-gap: 10px;
-  grid-row-gap: 1em;
-}
-
- -
-

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

- -

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

-
- -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- - - -

{{ EmbedLiveSample('Les_gouttières') }}

- -

L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité fr. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.

- -

Grilles imbriquées

- -

Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.

- -
-
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Deux</div>
-  <div class="box box3">Trois</div>
-  <div class="box box4">Quatre</div>
-  <div class="box box5">Cinq</div>
-</div>
-
- -

Nested grid in flow

- -

En définissant la propriété display:grid sur l'élément box1, il devient lui-même une grille et ses enfants se positionnent sur cette grille.

- -
.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- - -
- -

{{ EmbedLiveSample('nesting', '600', '340') }}

- -

Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.

- -

Sous-grille

- -

Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée sous-grille qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer. Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer display: grid par display: subgrid, et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.

- -

Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer grid-template-columns: repeat(3, 1fr) en grid-template-columns: subgrid. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.

- -
.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  display: grid;
-  grid-template-columns: subgrid;
-}
-
- -

Superposer les éléments avec z-index

- -

Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.

- -
-
<div class="wrapper">
-  <div class="box box1">Un</div>
-  <div class="box box2">Deux</div>
-  <div class="box box3">Trois</div>
-  <div class="box box4">Quatre</div>
-  <div class="box box5">Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-}
-
- - -
- -

{{ EmbedLiveSample('l_ex', '230', '420') }}

- -

L'élément box2 est maintenant superposé avec box1, et comme il arrive après dans le code source il s'affiche par-dessus.

- -

Contrôler l’ordre de superposition

- -

On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété z-index. Si nous donnons à box2 un z-index inférieur à celui de box1, l'élément box2 s'affichera sous box1 dans la pile.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  z-index: 2;
-}
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-  z-index: 1;
-}
-
- - - -

{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}

- -

La suite

- -

Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.

- -

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" deleted file mode 100644 index 6e2751382d..0000000000 --- "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Les grilles CSS et l'accessibilité -slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité -tags: - - Accessibilité - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

- -

Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.

- -

Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que CSS Zen Garden montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.

- -

Les grilles CSS n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?

- -

Réordonner le contenu dans une grille CSS

- -

Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser grid-auto-flow: dense pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.

- -

La spécification contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.

- -
-

La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. tabindex).

-
- -

Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.

- -

La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.

- -
-

Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.

-
- -

Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?

- -

Un ré-ordonnancement visuel et non logique

- -

La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement visuelle. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.

- -

Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column: 1;
-  grid-row: 2;
-}
-
- -
<div class="wrapper">
-  <div class="box box1"><a href="">Un</a></div>
-  <div class="box box2"><a href="">Deux</a></div>
-  <div class="box box3"><a href="">Trois</a></div>
-  <div class="box box4"><a href="">Quatre</a></div>
-  <div class="box box5"><a href="">Cinq</a></div>
-</div>
-
- -

{{EmbedLiveSample('accessibility_1', '500', '330')}}

-
- -

Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.

- -

Comment prendre en compte l'accessibilité avec une disposition en grille ?

- -

On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?

- -
-
Démarrer avec un document structuré et accessible
-
Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.
-
Créer une grille adaptative correcte
-
Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des requêtes de média afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?
-
Revenir à la source
-
Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.
-
- -

Les grilles et le risque d'aplatir le document à outrance

- -

On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est cet ul qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.

- -

Si la valeur subgrid est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que sous-grille. Actuellement, la seule solution à notre disposition est d'utiliser display: contents afin que la boîte générée par l'élément ul disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter l'article sur les liens entre les grilles et les autres méthodes de disposition et notamment la section sur display: contents.

- -

Étant donné que la prise en charge de display: contents pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec ul, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a display: grid. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.

- -

Approfondir la question

- -

Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).

- -

Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans WCAG Techniques for Success Criteria – Technique C27 (en anglais).

- -

Pour construire votre réflexion sur ce sujet, je vous invite à lire Flexbox & the Keyboard Navigation Disconnect écrit par Léonie Watson. La vidéo de la présentation de Léonie à ffconf est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié un article sur l'ordre de la navigation au clavier dans les différents navigateurs bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" deleted file mode 100644 index 8a5122de2f..0000000000 --- "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Les grilles CSS et l'amélioration progressive -slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

- -

Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (CSS Grid). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.

- -

Les navigateurs qui prennent en charge les grilles CSS

- -

En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.

- -

La situation pour Internet Explorer et Edge

- -

La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.

- -

La version implémentée pour IE/Edge (≤15) est préfixée avec -ms et les propriétés ont les noms suivants :

- - - -

La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : -ms-grid-column-span et -ms-grid-row-span. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par -ms. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.

- -

L'utilisation d'autoprefixer pour la prise en charge de la grille

- -

L'outil autoprefixer a été mis à jour afin de prendre en charge les versions préfixées par -ms- lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option grid: autoplace.

- -
autoprefixer({ grid: 'autoplace' })
- -

Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées

- -

Puis-je utiliser les grilles CSS sans danger ?

- -

Comme pour les autres technologies front-end, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.

- -

Commencer à utiliser les grilles CSS en production

- -

On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.

- -

Effectuer la transition depuis une disposition flottante

- -

Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé des dispositions flottantes. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.

- -

Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.

- -
-
* {box-sizing: border-box;}
-img {
-  max-width: 100%;
-  display: block;
-}
-.media {
-  border: 2px solid #f76707;
-  border-radius: 5px;
-  background-color: #fff4e6;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  grid-template-areas: "img content";
-  margin-bottom: 1em;
-}
-.media::after {
-  content: "";
-  display: block;
-  clear: both;
-}
-.media .image {
-  float: left;
-  width: 150px;
-  margin-right: 20px;
-}
-.media .text {
-  padding: 10px;
-  align-self: end;
-}
-
- -
<div class="media">
-  <div class="image">
-    <img src="http://placehold.it/150x150" alt="placeholder">
-  </div>
-  <div class="text">
-    Voici un exemple avec un média. On utilise le flottement
-    pour les anciens navigateurs et une grille pour les
-    nouveaux.
-  </div>
-</div>
-
- -

{{EmbedLiveSample('enhancement_1', '500', '180')}}

-
- -

Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.

- -

A simple example of overriding a floated layout using grid.

- -

Utiliser les requêtes de fonctionnalité (feature queries)

- -

L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.

- -

Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.

- -
- - -
.wrapper ul {
-  overflow: hidden;
-  margin: 0 -10px;
-  padding: 0;
-  list-style: none;
-}
-.wrapper li {
-  float: left;
-  width: calc(33.333333% - 20px);
-  margin: 0 10px 20px 10px;
-}
-
- -
<div class="wrapper">
-  <ul>
-    <li class="card">
-      <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-  </ul>
-</div>
-
- -

{{EmbedLiveSample('enhancement_2', '550', '400')}}

-
- -

Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.

- -

A floated cards layout demonstrating the problem caused by uneven content height.

- -

Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…

- -

Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.

- -

After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.

- -

Si on réinitialise la largeur avec auto, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce aux requêtes de fonctionnalité CSS, on peut le faire directement en CSS.

- -

Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.

- -
@supports (display: grid) {
-  .wrapper {
-    // ajouter les règles qu'on souhaite
-    // pour les navigateurs qui prennent
-    // en charge les grilles
-  }
-}
-
- -

La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.

- -

On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.

- -
- - -
.wrapper ul {
-    overflow: hidden;
-    margin: 0 -10px;
-    padding: 0;
-    list-style: none;
-}
-.wrapper li {
-    float: left;
-    width: calc(33.333333% - 20px);
-    margin: 0 10px 20px 10px;
-}
-@supports (display: grid) {
-  .wrapper ul {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-    margin: 0;
-  }
-  .wrapper li {
-    width: auto;
-    min-height: auto;
-    margin: 0;
-  }
-}
-
- -
<div class="wrapper">
-  <ul>
-    <li class="card">
-      <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-  </ul>
-</div>
-
- -

{{EmbedLiveSample('enhancement_3', '550', '480')}}

-
- -

Surcharger les autres valeurs pour display

- -

Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple display: inline-block.

- -

Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger display: inline-block. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par inline-block, ils deviendront des objets de la grille et inline-block ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété vertical-align sur les éléments lorsqu'on utilise le mode inline-block, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.

- -
- - -
.wrapper ul {
-  margin: 0 -10px;
-  padding: 0;
-  list-style: none;
-}
-
-.wrapper li {
-  display: inline-block;
-  vertical-align: top;
-  width: calc(33.333333% - 20px);
-  margin: 0 10px 20px 10px;
-}
-@supports (display: grid) {
-  .wrapper ul {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-    margin: 0;
-  }
-  .wrapper li {
-    width: auto;
-    margin: 0;
-  }
-}
-
- -
<div class="wrapper">
-  <ul>
-    <li class="card">
-      <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-  </ul>
-</div>
-
- -

{{EmbedLiveSample('enhancement_4', '500', '480')}}

-
- -

Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé grid-gap plutôt que des marges et des marges négatives pour créer les « gouttières ».

- -

Comment la spécification gère-t-elle cette surcharge ?

- -

La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :

- - - -

Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.

- -

Les autres valeurs de display

- -

Lorsqu'un élément possède un parent pour lequel display: grid, cet élément devient un bloc (cf. la specification). C'est pour cela que, pour l'élément qui utilisait inline-block, display: inline-block ne s'appliquait plus.

- -

Si la disposition historique utilise display: table, un élément avec display: table-cell génèrera des boîtes anonymes. Aussi, si on utilise display: table-cell sans élément parent avec display-table, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un div ou autre pour lequel on aurait défini display: table). Si on a un objet pour lequel display: table-cell et que, dans une requête de fonctionnalité, on utilise display: grid pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger display: table sans avoir ces boîtes anonymes supplémentaires.

- -

Les éléments flottants

- -

Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement float: none sur les éléments.

- -

L'alignement vertical

- -

La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent display: inline-block ou display: table, la propriété vertical-align était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.

- -

La disposition sur plusieurs colonnes

- -

Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés column-* ne s'appliquent pas sur un conteneur de grille.

- -

Approfondir la question

- - - -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" deleted file mode 100644 index cbc0501498..0000000000 --- "a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" +++ /dev/null @@ -1,452 +0,0 @@ ---- -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 -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guides - - Intermédiaire -translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

- -

Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.

- -

Les propriétés logiques, les propriétés physiques et les valeurs

- -

CSS possède de nombreux mots-clés qui permettent de positionner physiquement les éléments : left, right, top, bottom… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.

- -
.container {
-  position: relative;
-}
-.item {
-  position: absolute;
-  top: 20px;
-  left: 30px;
-}
-
- -
<div class="container">
-  <div class="item">Item</div>
-</div>
-
- -

On rencontre également ces mots-clés physiques avec text-align: right afin d'aligner le texte à droite. Il existe aussi des propriétés physiques en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.

- -

On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.

- -

Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise text-align avec left et on ajoute dir="rtl" sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec text-align value: left, l'alignement reste à gauche.

- -

A simple example of text direction.

- -

Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.

- -

Les propriétés et valeurs logiques

- -

Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé start lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, start correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, start ne correspond pas à une position physique.

- -

L'axe de bloc et l'axe en ligne

- -

Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (block axis en anglais) et l'axe en ligne (inline axis). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes logiques sont très utiles et on comprend mieux leurs rôles sur la grille.

- -

An image showing the default direction of the Block and Inline Axes.

- -

Les modes d'écriture CSS

- -

Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (CSS Writing Modes). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article CSS Writing Modes (en anglais) écrit par Jen Simmons.

- -

writing-mode

- -

Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété writing-mode nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :

- - - -

Sur le Web, c'est la valeur horizontal-tb qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut horizontal-tb et le second utilise la valeur vertical-rl. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (inline) est donc l'axe vertical.

- -
- - -
<div class="wrapper">
-  <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p>
-  <p style="writing-mode: vertical-rl">Moi je suis écrit avec <code>vertical-rl</code></p>
-</div>
-
- -

{{EmbedLiveSample('writing_1', '500', '420')}}

-
- -

La gestion des modes d'écriture avec une grille

- -

Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.

- -

Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(2, 100px);
-  grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-  <div class="item5">Objet 5</div>
-</div>
-
- -

{{EmbedLiveSample('writing_2', '500', '330')}}

-
- -

Si on ajoute writing-mode: vertical-lr au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.

- -
- - -
.wrapper {
-  writing-mode: vertical-lr;
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(2, 100px);
-  grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-  <div class="item5">Objet 5</div>
-</div>
-
- -

{{EmbedLiveSample('writing_3', '500', '330')}}

-
- -

A image showing the direction of Block and Inline when writing-mode is vertical-lr

- -

L'utilisation de valeurs logiques pour l'alignement

- -

Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.

- -

Dans le prochain exemple, on aligne des objets dans une grille pour laquelle writing-mode: vertical-lr. Les valeurs start et end fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.

- -
- - -
.wrapper {
-  writing-mode: vertical-lr;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 100px);
-  grid-gap: 10px;
-}
-
-.item1 {
-  grid-column: 1 / 4;
-  align-self: start;
-}
-
-.item2 {
-  grid-column: 1 / 3;
-  grid-row: 2 / 4;
-  align-self: start;
-}
-
-.item3 {
-  grid-column: 3;
-  grid-row: 2 / 4;
-  align-self: end;
-  justify-self: end;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-</div>
-
- -

{{EmbedLiveSample('writing_4', '500', '330')}}

-
- -

Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de vertical-lr à vertical-rl pour changer de mode d'écriture.

- -

Le placement automatique et les modes d'écriture

- -

On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.

- -

Le placement sur les lignes et les modes d'écriture

- -

Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.

- -

Dans l'exemple suivant, on a une grille avec la direction ltr et on positionne trois objets en utilisant le placement sur les lignes.

- - - -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 100px);
-  grid-gap: 10px;
-}
-.item1 {
-  grid-column: 1 ;
-}
-.item2 {
-  grid-column: -1 / -3;
-}
-.item3 {
-  grid-column: 1 / 3;
-  grid-row: 2;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-</div>
-
- -

{{EmbedLiveSample('writing_5', '500', '330')}}

-
- -

Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur rtl pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.

- -
- - -
.wrapper {
-  direction: rtl;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 100px);
-  grid-gap: 10px;
-}
-.item1 {
-  grid-column: 1 ;
-}
-.item2 {
-  grid-column: -1 / -3;
-}
-.item3 {
-  grid-column: 1 / 3;
-  grid-row: 2;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-</div>
-
- -

{{EmbedLiveSample('writing_6', '500', '330')}}

-
- -

On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.

- -

L'étrange ordre des valeurs pour grid-area

- -

La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).

- -

Pour les valeurs de grid-area, l'ordre est le suivant :

- - - -

Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :

- - - -

Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété grid-area comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !

- -

Utiliser des modes d'écriture hybrides et les grilles CSS

- -

Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.

- -
-
.wrapper {
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: 1fr auto;
-  font: 1em Helvetica, Arial, sans-serif;
-}
-.wrapper nav {
-  writing-mode: vertical-lr;
-}
-.wrapper ul {
-  list-style: none;
-  margin: 0;
-  padding: 1em;
-  display: flex;
-  justify-content: space-between;
-}
-.wrapper a {
-  text-decoration: none;
-}
-
- -
<div class="wrapper">
-  <div class="content">
-    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
-    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
-  </div>
-  <nav>
-    <ul>
-      <li><a href="">Lien 1</a></li>
-      <li><a href="">Lien 2</a></li>
-      <li><a href="">Lien 3</a></li>
-    </ul>
-  </nav>
-</div>
-
- -

{{EmbedLiveSample('writing_7', '500', '330')}}

-
- -

Les valeurs physiques et les grilles CSS

- -

On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.

- -

Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode ltr à un mode rtl.

- -

Utiliser les propriétés logiques partout

- -

Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.

- -

La spécification sur les propriétés logiques en CSS vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des équivalents logiques pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html new file mode 100644 index 0000000000..5984342f18 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -0,0 +1,605 @@ +--- +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 +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guides + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans l'article sur les concepts de base, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.

+ +

Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.

+ +

Un exemple simple

+ +

Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.

+ +

Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez l'outil de mise en évidence des grilles de Firefox, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.

+ +

Our Grid highlighted in DevTools

+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +

{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}

+ +

Positionner les éléments d'une grille grâce au numéro de ligne

+ +

On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :

+ +
+
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+
+ +

Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.

+ +

On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.

+ + + +
<div class="wrapper">
+   <div class="box1">Un</div>
+   <div class="box2">Deux</div>
+   <div class="box3">Trois</div>
+   <div class="box4">Quatre</div>
+</div>
+
+ +
.box2 {
+  grid-column-start: 3;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 2;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+
+ +

{{EmbedLiveSample('Line_Number', '300', '330')}}

+
+ +
+

Les propriétés raccourcies grid-column et grid-row

+ +

On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 / 3;
+  grid-row: 1 /  2;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 / 4;
+}
+
+ +

{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}

+
+ +

La taille par défaut

+ +

Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre grid-column-end ou grid-row-end. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :

+ +
+ + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: 4;
+}
+.box2 {
+  grid-column-start: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-row-start: 1;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+}
+
+ +

{{EmbedLiveSample('End_Lines', '300', '330')}}

+
+ +

Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).

+ +
+ + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+
+ +

{{EmbedLiveSample('New_Shorthand', '300', '330')}}

+
+ +

La propriété grid-area

+ +

On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :

+ + + + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+  grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+  grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+  grid-area: 3 / 2 / 4 / 4;
+}
+
+ +

{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}

+ +

L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :

+ + + +

On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique block-start est donc la ligne en haut du conteneur, block-end correspond à la ligne en bas du conteneur, inline-start correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et inline-end correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.

+ +

Lorsqu'on définit une zone d'une grille grâce à la propriété grid-area, on commence par définir les lignes de « début » : block-start et inline-start puis les lignes de « fin » avec block-end et inline-end. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.

+ +

Compter à rebours

+ +

On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur -1 et on peut compter à rebours au fur et à mesure de cette façon (ainsi, -2 fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne explicite de la grille, telle qu'elle est définie par grid-template-columns et grid-template-rows. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.

+ +

Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.

+ + + +
<div class="wrapper">
+   <div class="box1">Un</div>
+   <div class="box2">Deux</div>
+   <div class="box3">Trois</div>
+   <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column-start: -1;
+  grid-column-end: -2;
+  grid-row-start: -1;
+  grid-row-end: -4;
+}
+.box2 {
+  grid-column-start: -3;
+  grid-column-end: -4;
+  grid-row-start: -1;
+  grid-row-end: -3;
+}
+.box3 {
+  grid-column-start: -2;
+  grid-column-end: -3;
+  grid-row-start: -1;
+  grid-row-end: -2;
+}
+.box4 {
+  grid-column-start: -2;
+  grid-column-end: -4;
+  grid-row-start: -3;
+  grid-row-end: -4;
+}
+
+ +

{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}

+ +

Étirer un élément sur la grille

+ +

Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :

+ +
.item {
+  grid-column: 1 / -1;
+}
+
+ +

Les gouttières

+ +

La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.

+ +
+

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

+ +

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

+
+ +

Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-column-gap: 20px;
+  grid-row-gap: 1em;
+}
+
+ +

{{EmbedLiveSample('Les_gouttières', '300', '350') }}

+ +

Les propriétés raccourcies pour les gouttières

+ +

Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 1em 20px;
+}
+
+ +

Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.

+ +

Utiliser le mot-clé span

+ +

On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+}
+.box3 {
+  grid-column: 2;
+  grid-row: 1;
+}
+.box4 {
+  grid-column: 2 / span 2;
+  grid-row: 3;
+}
+
+ +

{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}

+ +

Le mot-clé span peut également être utilisé dans les valeurs des propriétés grid-row-start/grid-row-end et grid-column-start/grid-column-end. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: span 3;
+}
+
+ +

Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec span 3. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: span 3;
+  grid-row-end: 4;
+}
+
+ +

Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.

+ +

Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser l'outil de mise en évidence de la grille CSS dans Firefox pour analyser une grille compliquée.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" "b/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" deleted file mode 100644 index 9f31864e55..0000000000 --- "a/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" +++ /dev/null @@ -1,588 +0,0 @@ ---- -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 -tags: - - CSS - - CSS Grids - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

- -

Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.

- -

Les grilles et les boîtes flexibles (flexbox)

- -

La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.

- -

Disposition sur une dimension ou sur deux dimensions

- -

Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.

- -

Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (flex-basis) de 150 pixels.

- -

On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur wrap, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver flex-basis.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  width: 500px;
-  display: flex;
-  flex-wrap: wrap;
-}
-.wrapper > div {
-  flex: 1 1 150px;
-}
-
-
- -

{{EmbedLiveSample('onedtwod', '500', '230')}}

- -

On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.

- -

On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.

- -

La même disposition avec une grille CSS

- -

Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes 1fr. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}

-
- -

Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :

- - - -

Organiser l'espace ou organiser le contenu ?

- -

En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.

- -

En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (tracks) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.

- -

Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.

- -

L'alignement des boîtes

- -

Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.

- -

Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée Box Alignment Level 3. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.

- -

Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.

- -

Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut flex-end pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur box1 afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à box2 afin que box1 soit alignée avec le début du conteneur flexible.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  align-items: flex-end;
-  min-height: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: flex-start;
-}
-
- -

{{EmbedLiveSample('Box_alignment', '300', '230')}}

- -

L'alignement sur les grilles CSS

- -

Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à start et end plutôt que par rapport à flex-start et flex-end. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  align-items: end;
-  grid-auto-rows: 200px;
-}.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: start;
-}
-
- -

{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}

- -

L'unité fr et flex-basis

- -

On a vu avant l'unité fr qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité fr, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés flex utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.

- -

Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode responsive (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.

- -

En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.

- -

Des pistes qui se remplissent automatiquement

- -

On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation repeat et aux propriétés auto-fill et auto-fit.

- -

Dans l'exemple qui suit, on utilise le mot-clé auto-fill à la place d'un entier dans la fonction repeat et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.

- - - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 200px);
-}
-
- -

{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}

- -

Avoir un nombre de pistes flexible

- -

L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé auto-fill et la fonction {{cssxref("minmax()", "minmax()")}}.

- -

Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec minmax. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de 1fr. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum 1fr afin de répartir l'espace restant entre les objets.

- - - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
- -

{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}

- -

On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.

- -

Les grilles et les éléments positionnés de façon absolue

- -

La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.

- -

Avoir une grille comme bloc englobant

- -

Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété position avec la valeur relative (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise position: absolute sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.

- -

Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a position: relative et devient donc le contexte de positionnement pour cet objet.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">
-    Ce bloc est positionné de façon absolue. Dans cet exemple
-    la grille est le bloc englobant et les valeurs de décalage
-    pour la position sont calculées depuis les bords extérieurs
-    de la zone dans laquelle a été placé l'élément.
-  </div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-  position: relative;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: absolute;
-  top: 40px;
-  left: 40px;
-}
-
- -

{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}

- -

On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés top et left. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.

- -

Si on retire position: absolute des règles sur .box3, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.

- -

Utiliser une grille comme parent

- -

Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire position: relative dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le viewport) :

- -

Image of grid container as parent

- -

Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.

- -

Utiliser une zone de grille comme parent

- -

Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone .box3 de la grille.

- -

On indique que .box3 a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois
-    <div class="abspos">
-      Ce bloc est positionné de façon absolue. Dans cet exemple
-      la zone de la grille est le bloc englobant et le positionnement
-      est calculé à partir des bords de la zone de la grille.
-    </div>
-  </div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: relative;
-}
-.abspos {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  background-color: rgba(255,255,255,.5);
-  border: 1px solid rgba(0,0,0,0.5);
-  color: #000;
-  padding: 10px;
-}
-
- -

{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}

- -

Utiliser une grille et display: contents

- -

Une autre combinaison notable, en termes de disposition, peut être l'utilisation de display: contents avec les grilles CSS. La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la spécification Display :

- -
-

L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.

-
- -

Si on utilise display: contents sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Deux</div>
-  <div class="box box3">Trois</div>
-  <div class="box box4">Quatre</div>
-  <div class="box box5">Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-}
-
-
- -

{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}

-
- -

Si on ajoute display: contents aux règles qui ciblent box1, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Deux</div>
-  <div class="box box3">Trois</div>
-  <div class="box box4">Quatre</div>
-  <div class="box box5">Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  display: contents;
-}
-
- -

{{EmbedLiveSample('Display_Contents_After', '400', '330')}}

-
- -

Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (subgrids) lorsqu'elles seront implémentées. Vous pouvez également utiliser display: contents de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.

- -

Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

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/placement_automatique_sur_une_grille_css/index.html deleted file mode 100644 index 980b03ea62..0000000000 --- a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html +++ /dev/null @@ -1,569 +0,0 @@ ---- -title: Le placement automatique sur une grille CSS -slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

- -

En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -

{{EmbedLiveSample('placement_1', '500', '230')}}

-
- -

Définir des règles pour le placement automatique

- -

Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec grid-template-rows, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.

- -

Dimensionner les lignes de la grille implicite

- -

Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.

- -

Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété grid-auto-rows. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-}
-
- -

{{EmbedLiveSample('placement_2', '500', '330')}}

-
- -

On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre
-    <br>Cette cellule
-    <br>a du contenu
-    <br>supplémentaire
-    <br>et max vaut auto
-    <br>afin que la ligne
-    <br>se développe.
-  </div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-
- -

{{EmbedLiveSample('placement_3', '500', '330')}}

-
- -

On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200px. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.

- -
- - -
<div class="wrapper">
-   <div>Un</div>
-   <div>Deux</div>
-   <div>Trois</div>
-   <div>Quatre</div>
-   <div>Cinq</div>
-   <div>Six</div>
-   <div>Sept</div>
-   <div>Huit</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px 200px;
-}
-
- -

{{EmbedLiveSample('placement_4', '500', '330')}}

-
- -

Utiliser le placement automatique pour les colonnes

- -

On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur column. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.

- -

Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.

- -
-
.wrapper {
-  display: grid;
-  grid-template-rows: repeat(3, 200px);
-  grid-gap: 10px;
-  grid-auto-flow: column;
-  grid-auto-columns: 300px 100px;
-}
-
- - - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-  <div>Six</div>
-  <div>Sept</div>
-  <div>Huit</div>
-</div>
-
- -

{{EmbedLiveSample('placement_5', '500', '640')}}

-
- -

L'ordre des éléments placés automatiquement

- -

Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement l'algorithme de placement des objets sur la grille, mais voyons ici les quelques règles simples qu'il faut principalement retenir.

- -

Modification de l'ordre du document

- -

Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  “order modified document order”. Cela signifie que si on utilise uniquement la propriété order, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.

- -

Les éléments avec des propriétés de placement

- -

La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-  <div>Six</div>
-  <div>Sept</div>
-  <div>Huit</div>
-  <div>Neuf</div>
-  <div>Dix</div>
-  <div>Onze</div>
-  <div>Douze</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-}
-.wrapper div:nth-child(2) {
-  grid-column: 3;
-  grid-row: 2 / 4;
-}
-.wrapper div:nth-child(5) {
-  grid-column: 1 / 3;
-  grid-row: 1 / 3;
-}
-
- -

{{EmbedLiveSample('placement_6', '500', '450')}}

-
- -

Gérer les éléments qui s'étalent sur plusieurs pistes

- -

On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur span 2. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.

- -

On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-  <div>Six</div>
-  <div>Sept</div>
-  <div>Huit</div>
-  <div>Neuf</div>
-  <div>Dix</div>
-  <div>Onze</div>
-  <div>Douze</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-}
-.wrapper div:nth-child(4n+1) {
-  grid-column-end: span 2;
-  grid-row-end: span 2;
-  background-color: #ffa94d;
-}
-.wrapper div:nth-child(2) {
-  grid-column: 3;
-  grid-row: 2 / 4;
-}
-.wrapper div:nth-child(5) {
-  grid-column: 1 / 3;
-  grid-row: 1 / 3;
-}
-
- -

{{EmbedLiveSample('placement_7', '500', '770')}}

-
- -

Combler les espaces

- -

En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.

- -

Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur dense. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec column. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : grid-auto-flow: column dense.

- -

Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (tab order) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans un article sur l'accessibilité.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-  <div>Six</div>
-  <div>Sept</div>
-  <div>Huit</div>
-  <div>Neuf</div>
-  <div>Dix</div>
-  <div>Onze</div>
-  <div>Douze</div>
-</div>
-
- -
.wrapper div:nth-child(4n+1) {
-  grid-column-end: span 2;
-  grid-row-end: span 2;
-  background-color: #ffa94d;
-}
-.wrapper div:nth-child(2) {
-  grid-column: 3;
-  grid-row: 2 / 4;
-}
-.wrapper div:nth-child(5) {
-  grid-column: 1 / 3;
-  grid-row: 1 / 3;
-}
-.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-  grid-auto-flow: dense;
-}
-
- -

{{EmbedLiveSample('placement_8', '500', '730')}}

-
- -

Les éléments anonymes de la grille

- -

Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des div et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.

- -
<div class="grid">
-  Je suis une chaîne de caractères et je serai placé
-  automatiquement.
-  <div>Un élément de la grille</div>
-  <div>Un élément de la grille</div>
-</div>
-
- -

Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.

- -

Les cas d'utilisation pour le placement automatique

- -

Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe landscape l'élément s'étend sur deux colonnes). On utilise ensuite grid-auto-flow: dense afin de créer une grille dense.

- -
-
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  grid-gap: 10px;
-  grid-auto-flow: dense;
-  list-style: none;
-  margin: 1em auto;
-  padding: 0;
-  max-width: 800px;
-}
-.wrapper li {
-  border: 1px solid #ccc;
-}
-.wrapper li.landscape {
-  grid-column-end: span 2;
-}
-.wrapper li img {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-
- -
<ul class="wrapper">
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-</ul>
-
- -

{{EmbedLiveSample('placement_9', '500', '1300')}}

-
- -

Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément dt démarre sur la première ligne et que l'élément  dd sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.

- -
- - -
<div class="wrapper">
-  <dl>
-    <dt>Mammals</dt>
-    <dd>Cat</dd>
-    <dd>Dog</dd>
-    <dd>Mouse</dd>
-    <dt>Fish</dt>
-    <dd>Guppy</dd>
-    <dt>Birds</dt>
-    <dd>Pied Wagtail</dd>
-    <dd>Owl</dd>
-  <dl>
-</div>
-
- -
dl {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  max-width: 300px;
-  margin: 1em;
-  line-height: 1.4;
-}
-dt {
-  grid-column: 1;
-  font-weight: bold;
-}
-dd {
-  grid-column: 2;
-}
-
- -

{{EmbedLiveSample('placement_10', '500', '230')}}

- -
-

Note : Voir cet article de SitePoint à propos de la disposition en briques pour d'autres cas d'utilisation.

-
-
- -

Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?

- -

Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée n » (pour que certaines lignes soient sautées). Cette question est décrite sur le dépôt GitHub du CSSWG, n'hésitez pas à ajouter vos exemples de scénarios.

- -

Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les issues existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" "b/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" deleted file mode 100644 index 5984342f18..0000000000 --- "a/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" +++ /dev/null @@ -1,605 +0,0 @@ ---- -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 -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guides - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

- -

Dans l'article sur les concepts de base, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.

- -

Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.

- -

Un exemple simple

- -

Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.

- -

Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez l'outil de mise en évidence des grilles de Firefox, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.

- -

Our Grid highlighted in DevTools

- - - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 100px);
-}
-
- -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -

{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}

- -

Positionner les éléments d'une grille grâce au numéro de ligne

- -

On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :

- -
-
.box1 {
-   grid-column-start: 1;
-   grid-column-end: 2;
-   grid-row-start: 1;
-   grid-row-end: 4;
-}
-
- -

Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.

- -

On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.

- - - -
<div class="wrapper">
-   <div class="box1">Un</div>
-   <div class="box2">Deux</div>
-   <div class="box3">Trois</div>
-   <div class="box4">Quatre</div>
-</div>
-
- -
.box2 {
-  grid-column-start: 3;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 3;
-  grid-row-start: 1;
-  grid-row-end: 2;
-}
-.box4 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 3;
-  grid-row-end: 4;
-}
-
- -

{{EmbedLiveSample('Line_Number', '300', '330')}}

-
- -
-

Les propriétés raccourcies grid-column et grid-row

- -

On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column: 1 / 2;
-  grid-row: 1 / 4;
-}
-.box2 {
-  grid-column: 3 / 4;
-  grid-row: 1 / 3;
-}
-.box3 {
-  grid-column: 2 / 3;
-  grid-row: 1 /  2;
-}
-.box4 {
-  grid-column: 2 / 4;
-  grid-row: 3 / 4;
-}
-
- -

{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}

-
- -

La taille par défaut

- -

Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre grid-column-end ou grid-row-end. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :

- -
- - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column-start: 1;
-  grid-row-start: 1;
-  grid-row-end: 4;
-}
-.box2 {
-  grid-column-start: 3;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-row-start: 1;
-}
-.box4 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 3;
-}
-
- -

{{EmbedLiveSample('End_Lines', '300', '330')}}

-
- -

Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).

- -
- - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column: 1 ;
-  grid-row: 1 / 4;
-}
-.box2 {
-  grid-column: 3 ;
-  grid-row: 1 / 3;
-}
-.box3 {
-  grid-column: 2 ;
-  grid-row: 1 ;
-}
-.box4 {
-  grid-column: 2 / 4;
-  grid-row: 3 ;
-}
-
- -

{{EmbedLiveSample('New_Shorthand', '300', '330')}}

-
- -

La propriété grid-area

- -

On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :

- - - - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-area: 1 / 1 / 4 / 2;
-}
-.box2 {
-  grid-area: 1 / 3 / 3 / 4;
-}
-.box3 {
-  grid-area: 1 / 2 / 2 / 3;
-}
-.box4 {
-  grid-area: 3 / 2 / 4 / 4;
-}
-
- -

{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}

- -

L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :

- - - -

On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique block-start est donc la ligne en haut du conteneur, block-end correspond à la ligne en bas du conteneur, inline-start correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et inline-end correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.

- -

Lorsqu'on définit une zone d'une grille grâce à la propriété grid-area, on commence par définir les lignes de « début » : block-start et inline-start puis les lignes de « fin » avec block-end et inline-end. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.

- -

Compter à rebours

- -

On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur -1 et on peut compter à rebours au fur et à mesure de cette façon (ainsi, -2 fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne explicite de la grille, telle qu'elle est définie par grid-template-columns et grid-template-rows. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.

- -

Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.

- - - -
<div class="wrapper">
-   <div class="box1">Un</div>
-   <div class="box2">Deux</div>
-   <div class="box3">Trois</div>
-   <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column-start: -1;
-  grid-column-end: -2;
-  grid-row-start: -1;
-  grid-row-end: -4;
-}
-.box2 {
-  grid-column-start: -3;
-  grid-column-end: -4;
-  grid-row-start: -1;
-  grid-row-end: -3;
-}
-.box3 {
-  grid-column-start: -2;
-  grid-column-end: -3;
-  grid-row-start: -1;
-  grid-row-end: -2;
-}
-.box4 {
-  grid-column-start: -2;
-  grid-column-end: -4;
-  grid-row-start: -3;
-  grid-row-end: -4;
-}
-
- -

{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}

- -

Étirer un élément sur la grille

- -

Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :

- -
.item {
-  grid-column: 1 / -1;
-}
-
- -

Les gouttières

- -

La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.

- -
-

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

- -

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

-
- -

Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column: 1 ;
-  grid-row: 1 / 4;
-}
-.box2 {
-  grid-column: 3 ;
-  grid-row: 1 / 3;
-}
-.box3 {
-  grid-column: 2 ;
-  grid-row: 1 ;
-}
-.box4 {
-  grid-column: 2 / 4;
-  grid-row: 3 ;
-}
-.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 100px);
-  grid-column-gap: 20px;
-  grid-row-gap: 1em;
-}
-
- -

{{EmbedLiveSample('Les_gouttières', '300', '350') }}

- -

Les propriétés raccourcies pour les gouttières

- -

Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 100px);
-  grid-gap: 1em 20px;
-}
-
- -

Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.

- -

Utiliser le mot-clé span

- -

On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column: 1;
-  grid-row: 1 / span 3;
-}
-.box2 {
-  grid-column: 3;
-  grid-row: 1 / span 2;
-}
-.box3 {
-  grid-column: 2;
-  grid-row: 1;
-}
-.box4 {
-  grid-column: 2 / span 2;
-  grid-row: 3;
-}
-
- -

{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}

- -

Le mot-clé span peut également être utilisé dans les valeurs des propriétés grid-row-start/grid-row-end et grid-column-start/grid-column-end. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.

- -
.box1 {
-  grid-column-start: 1;
-  grid-row-start: 1;
-  grid-row-end: span 3;
-}
-
- -

Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec span 3. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.

- -
.box1 {
-  grid-column-start: 1;
-  grid-row-start: span 3;
-  grid-row-end: 4;
-}
-
- -

Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.

- -

Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser l'outil de mise en évidence de la grille CSS dans Firefox pour analyser une grille compliquée.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html new file mode 100644 index 0000000000..44e85dda1f --- /dev/null +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -0,0 +1,560 @@ +--- +title: Construire des dispositions courantes avec des grilles CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

+ +

Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.

+ +

Une disposition adaptative avec une à trois colonnes en utilisant grid-template-areas

+ +

De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit responsive, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.

+ +

Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.

+ +
+ + +
<div class="wrapper">
+  <header class="main-head">L'en-tête</header>
+  <nav class="main-nav">
+    <ul>
+      <li><a href="">Nav 1</a></li>
+      <li><a href="">Nav 2</a></li>
+      <li><a href="">Nav 3</a></li>
+    </ul>
+  </nav>
+  <article class="content">
+    <h1>L'article principal</h1>
+    <p>
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    </p>
+  </article>
+  <aside class="side">Barre latérale</aside>
+  <div class="ad">Publicité</div>
+  <footer class="main-footer">Le pied de page</footer>
+</div>
+
+ +

On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes media queries. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. le guide sur les grilles CSS et l'accessibilité). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête header s'étale sur deux colonnes et le bloc nav également. Sur la troisième ligne, on a la barre latérale (sidebar) à côté du contenu (content). Sur la quatrième ligne, on a le bloc pour la publicité (ad) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.

+ +

Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

Cette disposition en trois colonnes possède une première colonne qui s'étend sur 1fr, une colonne centrale qui s'étend sur 4fr et une dernière colonne qui mesure également 1fr. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.

+ +

Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.

+ +

{{EmbedLiveSample('layout_1', '800', '430')}}

+
+ +

Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc ad dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.

+ +

Une disposition flexible avec 12 colonnes

+ +

Si vous travaillez avec un framework ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure 1fr-unit et commence par une ligne intitulée col-start. Autrement dit, on aura 12 colonnes intitulées col-start.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :

+ +
<div class="wrapper">
+  <div class="item1">Début à la première colonne, s'étend sur 3 colonnes.</div>
+  <div class="item2">Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.</div>
+  <div class="item3">Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.</div>
+  <div class="item4">Début à la colonne 3, s'étend jusqu'à la fin de la grille.</div>
+</div>
+
+ +

Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé span :

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{EmbedLiveSample('layout_2', '800', '330')}}

+
+ +

Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.

+ +

Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé span pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé l'inspecteur de grille de Firefox qui indique de façon claire comment les objets sont placés.

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant stricte, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.

+ +

Construire une disposition avec ce système à 12 colonnes

+ +

Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :

+ +
+ + +
<div class="wrapper">
+  <header class="main-head">L'en-tête</header>
+  <nav class="main-nav">
+    <ul>
+      <li><a href="">Nav 1</a></li>
+      <li><a href="">Nav 2</a></li>
+      <li><a href="">Nav 3</a></li>
+    </ul>
+  </nav>
+  <article class="content">
+    <h1>L'article principal</h1>
+    <p>
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    </p>
+  </article>
+  <aside class="side">Barre latérale</aside>
+  <div class="ad">Publicité</div>
+  <footer class="main-footer">Le pied de page</footer>
+</div>
+
+ +

On initialise la grille avec nos 12 colonnes :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.

+ +

Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée col-start et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).

+ +

Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.

+ +
@media (min-width: 500px) {
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{EmbedLiveSample('layout_3', '800', '430')}}

+
+ +

On peut à nouveau profiter de l'inspecteur de grille pour voir comment se compose effectivement notre disposition :

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..

+ +

Une liste produit utilisant le placement automatique

+ +

De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.

+ +

Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.

+ +
+
<ul class="listing">
+  <li>
+    <h2>Produit n°1</h2>
+    <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+    <div class="cta"><a href="">Faire quelque chose !</a></div>
+  </li>
+   <li>
+     <h2>Produit n°2</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+   </li>
+   <li class="wide">
+     <h2>Produit n°3</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p>
+     <p>Ce produit possède un descriptif beaucoup plus long.</p>
+     <p>Vraiment plus long</p>
+     <p>Peut-être faudrait-il le gérer différemment ?</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+    <li>
+     <h2>Produit n°4</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+     <li>
+     <h2>Produit n°5</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+      <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+</ul>
+
+ + + +

Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction minmax() avec la notation repeat pour la propriété grid-template-columns qui permet de dimensionner les pistes.

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.

+ +

On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise display: flex et flex-direction avec la valeur column. On ajoute une marge automatique pour la classe .cta afin que cette barre soit placée en bas de la boîte.

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.

+ +

{{EmbedLiveSample('layout_4', '800', '900')}}

+
+ +

Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe wide sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur span 2. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}: dense sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (tab order) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{EmbedLiveSample('layout_5', '800', '900')}}

+ +

Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.

+
+ +

Aller plus loin

+ +

La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un framework ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.

+ + + +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..9f31864e55 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,588 @@ +--- +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 +tags: + - CSS + - CSS Grids + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.

+ +

Les grilles et les boîtes flexibles (flexbox)

+ +

La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.

+ +

Disposition sur une dimension ou sur deux dimensions

+ +

Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.

+ +

Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (flex-basis) de 150 pixels.

+ +

On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur wrap, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver flex-basis.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  width: 500px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 150px;
+}
+
+
+ +

{{EmbedLiveSample('onedtwod', '500', '230')}}

+ +

On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.

+ +

On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.

+ +

La même disposition avec une grille CSS

+ +

Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes 1fr. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}

+
+ +

Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :

+ + + +

Organiser l'espace ou organiser le contenu ?

+ +

En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.

+ +

En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (tracks) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.

+ +

Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.

+ +

L'alignement des boîtes

+ +

Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.

+ +

Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée Box Alignment Level 3. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.

+ +

Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.

+ +

Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut flex-end pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur box1 afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à box2 afin que box1 soit alignée avec le début du conteneur flexible.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{EmbedLiveSample('Box_alignment', '300', '230')}}

+ +

L'alignement sur les grilles CSS

+ +

Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à start et end plutôt que par rapport à flex-start et flex-end. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}

+ +

L'unité fr et flex-basis

+ +

On a vu avant l'unité fr qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité fr, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés flex utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.

+ +

Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode responsive (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.

+ +

En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.

+ +

Des pistes qui se remplissent automatiquement

+ +

On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation repeat et aux propriétés auto-fill et auto-fit.

+ +

Dans l'exemple qui suit, on utilise le mot-clé auto-fill à la place d'un entier dans la fonction repeat et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.

+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}

+ +

Avoir un nombre de pistes flexible

+ +

L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé auto-fill et la fonction {{cssxref("minmax()", "minmax()")}}.

+ +

Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec minmax. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de 1fr. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum 1fr afin de répartir l'espace restant entre les objets.

+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}

+ +

On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.

+ +

Les grilles et les éléments positionnés de façon absolue

+ +

La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.

+ +

Avoir une grille comme bloc englobant

+ +

Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété position avec la valeur relative (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise position: absolute sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.

+ +

Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a position: relative et devient donc le contexte de positionnement pour cet objet.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">
+    Ce bloc est positionné de façon absolue. Dans cet exemple
+    la grille est le bloc englobant et les valeurs de décalage
+    pour la position sont calculées depuis les bords extérieurs
+    de la zone dans laquelle a été placé l'élément.
+  </div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+ +

{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}

+ +

On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés top et left. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.

+ +

Si on retire position: absolute des règles sur .box3, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.

+ +

Utiliser une grille comme parent

+ +

Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire position: relative dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le viewport) :

+ +

Image of grid container as parent

+ +

Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.

+ +

Utiliser une zone de grille comme parent

+ +

Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone .box3 de la grille.

+ +

On indique que .box3 a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois
+    <div class="abspos">
+      Ce bloc est positionné de façon absolue. Dans cet exemple
+      la zone de la grille est le bloc englobant et le positionnement
+      est calculé à partir des bords de la zone de la grille.
+    </div>
+  </div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}

+ +

Utiliser une grille et display: contents

+ +

Une autre combinaison notable, en termes de disposition, peut être l'utilisation de display: contents avec les grilles CSS. La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la spécification Display :

+ +
+

L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.

+
+ +

Si on utilise display: contents sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}

+
+ +

Si on ajoute display: contents aux règles qui ciblent box1, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{EmbedLiveSample('Display_Contents_After', '400', '330')}}

+
+ +

Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (subgrids) lorsqu'elles seront implémentées. Vous pouvez également utiliser display: contents de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.

+ +

Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" "b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" deleted file mode 100644 index d8d7e5cf83..0000000000 --- "a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: Utiliser des lignes nommées sur une grille -slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide -translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

- -

Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.

- -

Nommer des lignes lorsqu'on définit une grille

- -

Lorsqu'on définit une grille avec grid-template-rows et grid-template-columns, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.

- -
- - -

Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici content-start et content-end), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.

- -
.wrapper {
- display: grid;
- grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
-  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
-}
-
- -

Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.

- -
.box1 {
-  grid-column-start: main-start;
-  grid-row-start: main-start;
-  grid-row-end: main-end;
-}
-.box2 {
-  grid-column-start: content-end;
-  grid-row-start: main-start;
-  grid-row-end: content-end;
-}
-.box3 {
-  grid-column-start: content-start;
-  grid-row-start: main-start;
-}
-.box4 {
-  grid-column-start: content-start;
-  grid-column-end: main-end;
-  grid-row-start: content-end;
-}
-
- -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -

{{EmbedLiveSample('example_named_lines', '500', '330')}}

-
- -

Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition responsive où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les media queries.

- -

Donner plusieurs noms à une ligne

- -

On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : [sidebar-end main-start]. On peut ensuite désigner la ligne par l'un de ces noms.

- -

Définir des zones de grilles implicites à l'aide de lignes nommées

- -

Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un identifiant personnalisé (ou custom ident), c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser span). Les identifiants ne sont pas mis entre quotes.

- -

Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes -start et -end pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise content-start et content-end pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée content qu'on peut également manipuler

- -
- - -

On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée content.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
-  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
-}
-.thing {
-  grid-area: content;
-}
-
- -
<div class="wrapper">
-  <div class="thing">
-    Je suis dans une zone nommée content.
-  </div>
-</div>
-
- -

{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}

-
- -

Il n'est pas nécessaire de définir l'emplacement de cette zone avec grid-template-areas car les lignes suffisent à créer la zone et à la placer.

- -

Définir des lignes implicites à l'aide de zones nommées

- -

Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.

- -

Dans cet exemple, on ajoute un élément div supplémentaire et on lui ajoute la classe overlay. On déclare des zones nommées à l'aide de grid-area puis on indique la disposition via la propriété grid-template-areas. Les noms utilisés pour les zones sont :

- - - -

Cela crée implicitement les lignes et colonnes suivantes :

- - - -

Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, sd-end et main-start font référence à la même ligne verticale).

- -

An image showing the implicit line names created by our grid areas.

- -

On peut positionner overlay grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-    "hd hd hd hd   hd   hd   hd   hd   hd"
-    "sd sd sd main main main main main main"
-    "ft ft ft ft   ft   ft   ft   ft   ft";
-}
-.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-.wrapper > div.overlay {
-  z-index: 10;
-  grid-column: main-start / main-end;
-  grid-row: hd-start / ft-end;
-  border: 4px solid rgb(92,148,13);
-  background-color: rgba(92,148,13,.4);
-  color: rgb(92,148,13);
-  font-size: 150%;
-}
-
- -
<div class="wrapper">
-  <div class="header">En-tête</div>
-  <div class="sidebar">Barre latérale</div>
-  <div class="content">Contenu</div>
-  <div class="footer">Pied de page</div>
-  <div class="overlay">Masque</div>
-</div>
-
- -

{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}

-
- -

Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.

- -

Utiliser plusieurs lignes avec le même nom : repeat()

- -

Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec repeat() car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec repeat(), vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.

- -

Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (1fr), on définit un nom : [col-start]. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées col-start et qui mesureront chacune 1fr de large.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-}
- -

Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom col-start et si on place un objet après la ligne col-start, la grille utilisera la première ligne intitulée col-start (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :

- -
.item1 {
-  grid-column: col-start / col-start 5
-}
-
- -

On peut également utiliser le mot-clé span. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :

- -
.item2 {
-  grid-column: col-start 7 / span 3;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Je vais de col-start 1 à col-start 5</div>
-  <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div>
-</div>
- -

{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}

-
- -

Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :

- -

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

- -

La syntaxe repeat() permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (1fr), intitulée col1-start, et qui est suivie par une colonne plus large (3fr), intitulée col2-start.

- -
.wrapper {
-  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
-}
-
- -

Si on utilise repeat() et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est 1fr, chacune avec un début et une fin.

- -
.wrapper {
-  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
-}
-
- -

Si on écrivait la même définition sans utiliser repeat(), on aurait la forme suivante :

- -
.wrapper {
-  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
-}
-
- -

Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé span pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
-}
-.item1 {
-  grid-column: col1-start / col2-start 2
-}
-.item2 {
-  grid-row: 2;
-  grid-column: col1-start 2 / span 2 col1-start;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.</div>
-  <div class="item2">Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start</div>
-</div>
-
- -

{{EmbedLiveSample('span_line_number', '500', '330')}}

-
- -

Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.

- -

Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des frameworks tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le framework importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel framework se résume à :

- -
-
.wrapper {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-}
-
- -

On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :

- - - -
<div class="wrapper">
-  <header class="main-header">Je suis l'en-tête</header>
-   <aside class="side1">Je suis la barre latérale 1</aside>
-   <article class="content">Je suis l'article</article>
-   <aside class="side2">Je suis la barre latérale 2</aside>
-   <footer class="main-footer">Je suis le pied de page</footer>
-</div>
-
- -

Pour placer ces éléments, on utilise la grille de la façon suivante :

- -
.main-header,
-.main-footer  {
-  grid-column: col-start / span 12;
-}
-.side1 {
-  grid-column: col-start / span 3;
-  grid-row: 2;
-}
-.content {
-  grid-column: col-start 4 / span 6;
-  grid-row: 2;
-}
-.side2 {
-  grid-column: col-start 10 / span 3;
-  grid-row: 2;
-}
-
- -

{{EmbedLiveSample('three_column', '500', '330')}}

- -

Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :

- -

The layout with the grid highlighted.

-
- -

Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent 1fr. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..a141a8a11e --- /dev/null +++ b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,51 @@ +--- +title: Les sprites CSS +slug: Web/CSS/CSS_Images/Sprites_CSS +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +
{{CSSRef}}
+ +

Les sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors background-position pour choisir l'image qu'on souhaite utiliser.

+ +
+

Note : Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.

+
+ +

Implémentation

+ +

Supposons qu'une image est affichée pour chaque élement de la classe toolbtn :

+ +
.toolbtn {
+  background: url('myfile.png');
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe toolbtn).

+ +

De la même manière, vous pouvez faire un effet de transition au survol :

+ +
#btn:hover {
+  background-position: <pixels shifted right>px <pixels shifted down>px;
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_images/sprites_css/index.html b/files/fr/web/css/css_images/sprites_css/index.html deleted file mode 100644 index a141a8a11e..0000000000 --- a/files/fr/web/css/css_images/sprites_css/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Les sprites CSS -slug: Web/CSS/CSS_Images/Sprites_CSS -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS ---- -
{{CSSRef}}
- -

Les sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors background-position pour choisir l'image qu'on souhaite utiliser.

- -
-

Note : Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.

-
- -

Implémentation

- -

Supposons qu'une image est affichée pour chaque élement de la classe toolbtn :

- -
.toolbtn {
-  background: url('myfile.png');
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-}
- -

Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :

- -
#btn1 {
-  background-position: -20px 0px;
-}
-
-#btn2 {
-  background-position: -40px 0px;
-}
- -

L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe toolbtn).

- -

De la même manière, vous pouvez faire un effet de transition au survol :

- -
#btn:hover {
-  background-position: <pixels shifted right>px <pixels shifted down>px;
-}
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_images/using_css_gradients/index.html b/files/fr/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..94a0fbcb67 --- /dev/null +++ b/files/fr/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,747 @@ +--- +title: Utilisation de dégradés CSS +slug: Web/CSS/Utilisation_de_dégradés_CSS +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +
{{CSSRef}}
+ +

Les dégradés CSS sont représentés par le type de donnée {{cssxref("<gradient>")}} qui est un sous-ensemble du type {{cssxref("<image>")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).

+ +

Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.

+ +

Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.

+ +

Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.

+ +

Dégradés linéaires

+ +

Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.

+ +

Dégradés linéaires simples

+ +

Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(blue, white);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}

+ +

Appliquer un dégradé de gauche à droite

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(to right, blue, white);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}

+ +

Appliquer un dégradé en diagonale

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(to bottom right, blue, white);
+}
+
+div {
+  width: 200px;
+  height: 100px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}

+ +

Utilisation d’angles

+ +

Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Utilisation_d’angles",120,120)}}

+ +

L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, 0deg crée un dégradé vertical de bas en haut, tandis que 90deg génère un dégradé horizontal de la gauche vers la droite :

+ +

linear_redangles.png

+ +
background: linear-gradient(<angle>, red, white);
+ +

Créer des effets et manipuler les couleurs

+ +

Utiliser plus de deux couleurs

+ +

Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}

+ +

Arrêts de couleurs

+ +

Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, 0% indique le point de départ, et 100% le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Arrêts_de_couleur",120,120)}}

+ +

Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.

+ +

Utiliser des indications de couleurs

+ +

Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.

+ +

CSS

+ +
div {
+  width:120px;
+  height: 120px;
+  float: left;
+  margin-right: 10px;
+}
+
+.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

HTML

+ +
<div class="color-hint"></div>
+<div class="simple-linear"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}

+ +

Transparence et dégradés

+ +

Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(to right, transparent, mistyrose),
+    url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+
+div {
+  width: 300px;
+  height: 150px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}

+ +

Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.

+ +

Créer des lignes franches

+ +

Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à 50%:

+ + + +
.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}
+ +

{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}

+ +

Créer des bandes de couleur

+ +

Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.

+ + + +
.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+
+ +

{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}

+ +

Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.

+ +

Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.

+ +

Contrôler la progression du dégradé

+ +

Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.

+ + + +
.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+
+ +

{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}

+ +

Empilement de dégradés

+ +

Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.

+ +

CSS

+ +
.linear-gradient {
+  background:
+    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+div {
+  width: 100px;
+  height: 100px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Empilement_de_dégradés")}}

+ +

Dégradés radiaux

+ +

Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.

+ +

Un dégradé radial simple

+ +
+

Note : Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.

+
+ +

De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.

+ + + +
.simple-radial {
+  background: radial-gradient(red, blue);
+}
+
+ +

{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}

+ +

Positionner les points d’arrêt

+ +

À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.

+ + + +
.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}

+ +

Positionner le centre du dégradé

+ +

La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.

+ + + +
.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}

+ +

Dimensionner les dégradés radiaux

+ +

À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.

+ +

Utiliser closest-side pour les ellipses

+ +

Dans l'exemple qui suit, on utilise la valeur closest-side pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.

+ + + +
.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}

+ +

Utiliser farthest-corner pour les ellipses

+ +

Cet exemple ressemble fortement au précédent mais on utilise ici farthest-corner qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.

+ + + +
.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}

+ +

Utiliser closest-side pour les cercles

+ +

Pour cet exemple, on utilise closest-side qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.

+ + + +
.radial-circle-close {
+  background: radial-gradient(circle closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}

+ +

Empiler des dégradés radiaux

+ +

À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.

+ + + +
.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+
+ +

{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}

+ +

Dégradés coniques

+ +

La fonction conic-gradient() permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs.

+ +

La syntaxe de conic-gradient() est semblable à celle de radial-gradient() mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues.

+ +

Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui progresse vers l'extérieur dans toutes les directions. Un dégradé conique verra la transition progresser le long de l'arc autour du cercle, dans le sens horaire. À l'instar des dégradés radiaux, il est possible de positionner le centre du dégradé et à l'instar des dégradés linéaires, on peut modifier l'angle du dégradé.

+ +
+

Un dégradé conique simple

+ +

Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :

+ + + +
.simple-conic {
+  background: conic-gradient(red, blue);
+}
+
+ +

{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}

+
+ +
+

Positionner le centre

+ +

À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé at.

+ + + +
.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}

+
+ +
+

Modifier l’angle

+ + + +
.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+
+ +

{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}

+
+ +

Répéter des dégradés

+ +

Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.

+ +

La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.

+ +

Répéter un dégradé linéaire

+ +

Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.

+ + + +
.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+
+ +

{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}

+ +

Répéter plusieurs dégradés linéaires

+ + + +
.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+
+ +

{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}

+ +

Créer un tartan

+ + + +
.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+}
+
+ +

{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}

+ +

Répéter des dégradés radiaux

+ +

Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.

+ + + +
.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}

+ +

Répéter plusieurs dégradés radiaux

+ + + +
.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+
+ +

{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_lists/compteurs_css/index.html b/files/fr/web/css/css_lists/compteurs_css/index.html deleted file mode 100644 index 7ca83181c4..0000000000 --- a/files/fr/web/css/css_lists/compteurs_css/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Compteurs CSS -slug: Web/CSS/CSS_Lists/Compteurs_CSS -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -
{{CSSRef}}
- -

Les compteurs CSS sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.

- -

La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions counter() et counters() dans la propriété {{cssxref("content")}}.

- -

Utiliser les compteurs

- -

Manipuler la valeur d'un compteur

- -

Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être none, inherit ou initial.

- -

Afficher un compteur

- -

Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.

- -

La fonction counter() prend deux formes : counter(nom) ou counter(nom, style). Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est decimal).

- -

La fonction counters() prend également deux formes : counters(nom, chaine) ou counters(nom, chaine style). Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est decimal).

- -

Exemple simple

- -

Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section <la valeur du compteur> : ».

- -
-

Note : La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est decimal).

-
- -

CSS

- -
body {
-  counter-reset: section;                    /* On initialise le compteur à 0 */
-}
-
-h3::before {
-  counter-increment: section;                /* On incrémente le compteur section */
-  content: "Section " counter(section) " : "; /* On affiche le compteur */
-}
-
- -

HTML

- -
<h3>Introduction</h3>
-<h3>Corps</h3>
-<h3>Conclusion</h3>
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}

- -

Imbriquer des compteurs

- -

Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.

- -

CSS

- -
ol {
-  counter-reset: section;                /* On crée une nouvelle instance du
-                                            compteur section avec chaque ol */
-  list-style-type: none;
-}
-
-li::before {
-  counter-increment: section;            /* On incrémente uniquement cette
-                                            instance du compteur */
-  content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
-                                            instances séparées par ".". */
-                                         /* Si on doit supporter < IE8 il faudra
-                                            faire attention à ce qu'il n'y ait
-                                            aucun blanc après ',' */
-}
-
- -

HTML

- -
<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item               <!-- 2     -->
-    <ol>
-      <li>item</li>      <!-- 2.1   -->
-      <li>item</li>      <!-- 2.2   -->
-      <li>item           <!-- 2.3   -->
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-        </ol>
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-          <li>item</li>  <!-- 2.3.3 -->
-        </ol>
-      </li>
-      <li>item</li>      <!-- 2.4   -->
-    </ol>
-  </li>
-  <li>item</li>          <!-- 3     -->
-  <li>item</li>          <!-- 4     -->
-</ol>
-<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item</li>          <!-- 2     -->
-</ol>
- -

Résultat

- -

{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" "b/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" deleted file mode 100644 index 52a1cfbc33..0000000000 --- "a/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Indentation homogène des listes -slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation ---- -
{{CSSRef}}
- -

La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.

- -

Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.

- -

Construire une liste

- -

Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.

- -

- -

La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (padding) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :

- -

- -

À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon le modèle de boîtes CSS, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (padding). On obtient donc ce résultat :

- -

- -

Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément ul. Puisqu'il n'a pas de remplissage (padding), cette limite épouse étroitement celles des trois éléments de la liste.

- -

On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :

- -

- -

Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément ul, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments li. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque li.

- -

C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément li, dès lors que la propriété {{cssxref("list-style-position")}} vaut outside. Si cette valeur est changée en inside, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments li, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.

- -

Obtenir une double indentation

- -

Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :

- -
ul, li {
-  margin-left: 0;
-  padding-left: 0;
-}
- -

Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.

- -

Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :

- -
    -
  1. Doter chaque élément li d'une marge gauche ;
    2. -
  2. Doter chaque élément ul d'une marge gauche ;
    3. -
  3. Doter chaque élément ul d'un padding gauche quelconque.
    4. -
- -

Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.

- -

Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément ul. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément ul, nous obtenons le résultat qui suit :

- -

- -

De son côté, Gecko applique un padding gauche de 40 pixels à cet élément ul. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :

- -


-

- -

Comme nous pouvons le voir, les marqueurs restent attachés aux éléments li, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément ul est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément ul

- -

Obtenir un rendu homogène

- -

Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier à la fois la marge gauche et le padding gauche de l'élément ul. L'élément li peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :

- -
ul {
-  margin-left: 0;
-  padding-left: 40px;
-}
- -

Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :

- -
ul {
-  margin-left: 40px;
-  padding-left: 0;
-}
- -

Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à 1.25em si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un padding et une marge nuls :

- -
ul {
-  margin-left: 0;
-  padding-left: 0;
-}
- -

Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément body, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.

- -

Conclusion

- -

Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le padding gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.

- -

Recommandations

- - diff --git a/files/fr/web/css/css_lists/index.html b/files/fr/web/css/css_lists/index.html deleted file mode 100644 index 781d7cb961..0000000000 --- a/files/fr/web/css/css_lists/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: CSS Lists -slug: Web/CSS/CSS_Lists -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Lists_and_Counters ---- -
{{CSSRef}}
- -

CSS Lists (listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.

- -

Référence

- -

Propriétés

- -
-
    -
  • {{cssxref("list-style-image")}}
    • -
  • {{cssxref("list-style-type")}}
    • -
  • {{cssxref("list-style-position")}}
    • -
  • {{cssxref("list-style")}}
    • -
-
- -

Guides

- -
-
Indentation homogène des listes
-
Explique comment obtenir une indentation homogène dans les différents navigateurs.
-
Utiliser les compteurs CSS
-
Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}}
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..52a1cfbc33 --- /dev/null +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,105 @@ +--- +title: Indentation homogène des listes +slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +
{{CSSRef}}
+ +

La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.

+ +

Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.

+ +

Construire une liste

+ +

Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.

+ +

+ +

La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (padding) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :

+ +

+ +

À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon le modèle de boîtes CSS, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (padding). On obtient donc ce résultat :

+ +

+ +

Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément ul. Puisqu'il n'a pas de remplissage (padding), cette limite épouse étroitement celles des trois éléments de la liste.

+ +

On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :

+ +

+ +

Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément ul, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments li. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque li.

+ +

C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément li, dès lors que la propriété {{cssxref("list-style-position")}} vaut outside. Si cette valeur est changée en inside, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments li, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.

+ +

Obtenir une double indentation

+ +

Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :

+ +
ul, li {
+  margin-left: 0;
+  padding-left: 0;
+}
+ +

Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.

+ +

Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :

+ +
    +
  1. Doter chaque élément li d'une marge gauche ;
    2. +
  2. Doter chaque élément ul d'une marge gauche ;
    3. +
  3. Doter chaque élément ul d'un padding gauche quelconque.
    4. +
+ +

Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.

+ +

Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément ul. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément ul, nous obtenons le résultat qui suit :

+ +

+ +

De son côté, Gecko applique un padding gauche de 40 pixels à cet élément ul. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :

+ +


+

+ +

Comme nous pouvons le voir, les marqueurs restent attachés aux éléments li, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément ul est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément ul

+ +

Obtenir un rendu homogène

+ +

Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier à la fois la marge gauche et le padding gauche de l'élément ul. L'élément li peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :

+ +
ul {
+  margin-left: 0;
+  padding-left: 40px;
+}
+ +

Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :

+ +
ul {
+  margin-left: 40px;
+  padding-left: 0;
+}
+ +

Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à 1.25em si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un padding et une marge nuls :

+ +
ul {
+  margin-left: 0;
+  padding-left: 0;
+}
+ +

Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément body, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.

+ +

Conclusion

+ +

Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le padding gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.

+ +

Recommandations

+ + diff --git a/files/fr/web/css/css_lists_and_counters/index.html b/files/fr/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..781d7cb961 --- /dev/null +++ b/files/fr/web/css/css_lists_and_counters/index.html @@ -0,0 +1,57 @@ +--- +title: CSS Lists +slug: Web/CSS/CSS_Lists +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +
{{CSSRef}}
+ +

CSS Lists (listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
  • {{cssxref("list-style")}}
    • +
+
+ +

Guides

+ +
+
Indentation homogène des listes
+
Explique comment obtenir une indentation homogène dans les différents navigateurs.
+
Utiliser les compteurs CSS
+
Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}}
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..7ca83181c4 --- /dev/null +++ b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,148 @@ +--- +title: Compteurs CSS +slug: Web/CSS/CSS_Lists/Compteurs_CSS +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

Les compteurs CSS sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.

+ +

La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions counter() et counters() dans la propriété {{cssxref("content")}}.

+ +

Utiliser les compteurs

+ +

Manipuler la valeur d'un compteur

+ +

Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être none, inherit ou initial.

+ +

Afficher un compteur

+ +

Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.

+ +

La fonction counter() prend deux formes : counter(nom) ou counter(nom, style). Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est decimal).

+ +

La fonction counters() prend également deux formes : counters(nom, chaine) ou counters(nom, chaine style). Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est decimal).

+ +

Exemple simple

+ +

Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section <la valeur du compteur> : ».

+ +
+

Note : La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est decimal).

+
+ +

CSS

+ +
body {
+  counter-reset: section;                    /* On initialise le compteur à 0 */
+}
+
+h3::before {
+  counter-increment: section;                /* On incrémente le compteur section */
+  content: "Section " counter(section) " : "; /* On affiche le compteur */
+}
+
+ +

HTML

+ +
<h3>Introduction</h3>
+<h3>Corps</h3>
+<h3>Conclusion</h3>
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}

+ +

Imbriquer des compteurs

+ +

Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.

+ +

CSS

+ +
ol {
+  counter-reset: section;                /* On crée une nouvelle instance du
+                                            compteur section avec chaque ol */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* On incrémente uniquement cette
+                                            instance du compteur */
+  content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
+                                            instances séparées par ".". */
+                                         /* Si on doit supporter < IE8 il faudra
+                                            faire attention à ce qu'il n'y ait
+                                            aucun blanc après ',' */
+}
+
+ +

HTML

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+ +

Résultat

+ +

{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_logical_properties/basic_concepts/index.html b/files/fr/web/css/css_logical_properties/basic_concepts/index.html new file mode 100644 index 0000000000..4129c926c7 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.html @@ -0,0 +1,75 @@ +--- +title: Concepts de base des propriétés et valeurs logiques +slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +
{{CSSRef}}
+ +

La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.

+ +

Quel intérêt pour les propriétés logiques ?

+ +

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

+ +

Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : justify-self: start aligne l'élément au début de l'axe en ligne et align-self: start aligne l'élément au début de l'axe de bloc.

+ +

A grid in a horizontal writing mode

+ +

Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur vertical-rl, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.

+ +

A grid in vertical writing mode.

+ +

Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que width, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.

+ +

A grid layout in vertical writing mode

+ +

Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété writing-mode pour la passer de vertical-rl à horizontal-tb sur le sélecteur .box afin d'observer la façon dont les différentes propriétés modifient la disposition.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

+ +

Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.

+ +

Axe de bloc et axe en ligne

+ +

Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de block et inline plutôt que right et left/top et bottom pour l'alignement des objets.

+ +

La dimension en ligne (inline) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.

+ +

La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.

+ +

Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :

+ +

diagram showing the inline axis running horizontally, block axis vertically.

+ +

Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :

+ +

Diagram showing the block axis running horizontally the inline axis vertically.

+ +

Prise en charge des navigateurs

+ +

Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).

+ +

On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.

+ +
+

Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.

+
+ +

Tester la compatibilité des navigateurs

+ +

Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (@supports). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir width avec auto et inline-size avec la valeur initialement utilisée pour width.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html b/files/fr/web/css/css_logical_properties/concepts_de_base/index.html deleted file mode 100644 index 4129c926c7..0000000000 --- a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Concepts de base des propriétés et valeurs logiques -slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base -tags: - - CSS - - Guide - - Propriété logique -translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts ---- -
{{CSSRef}}
- -

La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.

- -

Quel intérêt pour les propriétés logiques ?

- -

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

- -

Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : justify-self: start aligne l'élément au début de l'axe en ligne et align-self: start aligne l'élément au début de l'axe de bloc.

- -

A grid in a horizontal writing mode

- -

Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur vertical-rl, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.

- -

A grid in vertical writing mode.

- -

Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que width, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.

- -

A grid layout in vertical writing mode

- -

Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété writing-mode pour la passer de vertical-rl à horizontal-tb sur le sélecteur .box afin d'observer la façon dont les différentes propriétés modifient la disposition.

- -

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

- -

Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.

- -

Axe de bloc et axe en ligne

- -

Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de block et inline plutôt que right et left/top et bottom pour l'alignement des objets.

- -

La dimension en ligne (inline) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.

- -

La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.

- -

Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :

- -

diagram showing the inline axis running horizontally, block axis vertically.

- -

Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :

- -

Diagram showing the block axis running horizontally the inline axis vertically.

- -

Prise en charge des navigateurs

- -

Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).

- -

On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.

- -
-

Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.

-
- -

Tester la compatibilité des navigateurs

- -

Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (@supports). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir width avec auto et inline-size avec la valeur initialement utilisée pour width.

- -

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_logical_properties/dimensionnement/index.html b/files/fr/web/css/css_logical_properties/dimensionnement/index.html deleted file mode 100644 index f6ffe024e6..0000000000 --- a/files/fr/web/css/css_logical_properties/dimensionnement/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Propriétés logiques pour le dimensionnement -slug: Web/CSS/CSS_Logical_Properties/Dimensionnement -tags: - - CSS - - Guide - - Propriété logique -translation_of: Web/CSS/CSS_Logical_Properties/Sizing ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.

- -

Lorsqu'on définit la taille d'un objet, la spécification sur les propriétés et les valeurs logiques permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs logiques, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs physiques en combinaison avec ces propriétés et ces valeurs logiques.

- -

Correspondances pour les dimensions

- -

Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (horizontal-tb) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.

- -

Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriété logiquePropriété physique
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
- -

Exemple pour width et height

- -

Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer width par inline-size et height par block-size et on obtiendra le même résultat.

- -

Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec horizontal-tb. En modifiant cette valeur pour la passer à vertical-rl, on verra que le premier exemple, qui utilise width et height, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise inline-size et block-size, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.

- -

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

- -

Exemple pour min-width et min-height

- -

Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que inline-size et block-size mais paramètrent une taille minimale plutôt qu'une taille fixe.

- -

Dans l'exemple suivant, vous pouvez passer le mode d'écriture en vertical-rl et observer l'effet obtenu. Là encore, on utilise la propriété physique (min-height) sur le premier exemple et la propriété logique (min-block-size) sur le second.

- -

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

- -

Exemple pour max-width et max-height

- -

Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.

- -

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

- -

Mots-clés logiques pour resize

- -

La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques horizontal et vertical. La propriété resize peut désormais s'utiliser également avec des valeurs logiques : resize: inline permettra de redimensionner un objet sur l'axe en ligne et resize: block permettra de le redimensionner sur l'axe en bloc.

- -

La valeur both peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.

- -

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

- -
-

Attention ! À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.

-
diff --git a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html new file mode 100644 index 0000000000..3a99d5bbad --- /dev/null +++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html @@ -0,0 +1,143 @@ +--- +title: Propriétés logiques pour les flottements et le positionnement +slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +
{{CSSRef}}
+ +

La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.

+ +

Correspondance entre les propriétés et les valeurs

+ +

Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété ou valeur logiquePropriété ou valeur physique
{{cssxref("float")}}: inline-start{{cssxref("float")}}: left
{{cssxref("float")}}: inline-end{{cssxref("float")}}: right
{{cssxref("clear")}}: inline-start{{cssxref("clear")}}: left
{{cssxref("clear")}}: inline-end{{cssxref("clear")}}: right
{{cssxref("inset-inline-start")}}{{cssxref("left")}}
{{cssxref("inset-inline-end")}}{{cssxref("right")}}
{{cssxref("inset-block-start")}}{{cssxref("top")}}
{{cssxref("inset-block-end")}}{{cssxref("bottom")}}
{{cssxref("text-align")}}: start{{cssxref("text-align")}}: left
{{cssxref("text-align")}}: end{{cssxref("text-align")}}: right
+ +

En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.

+ + + + + + + + + + + + + + + + + + + + + + +
Propriété logiqueObjectif
{{cssxref("inset-inline")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.
{{cssxref("inset-block")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.
{{cssxref("inset")}}Cette propriété définit les valeurs des quatre décalages.
+ +

Exemple d'un flottement et d'un dégagement

+ +

Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont left, right et both. Les valeurs logiques définies par la spécification sont inline-start et inline-end et qui peuvent correspondre à left et right selon le mode d'écriture.

+ +

Dans l'exemple ci-après, on a deux boîtes : la première flotte avec float: left et la deuxième avec float: inline-start. Si on modifie la propriété writing-mode pour la passer en vertical-rl ou si on modifie direction en rtl, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec inline-start suit la direction et le mode d'écriture.

+ +

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

+ +

Exemple des propriétés inset pour les dispositions positionnées

+ +

Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.

+ +

Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.

+ +

De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :

+ + + +

Dans l'exemple qui suit, on utilise les propriétés inset-block-start et inset-inline-end afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a position: relative. En modifiant la propriété writing-mode afin d'utiliser la valeur vertical-rl ou en ajoutant direction: rtl, on pourra voir comment la boîte relative reste dans la direction du texte.

+ +

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

+ +

Nouvelles propriétés raccourcies

+ +

Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.

+ + + +
+

Note : Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.

+
+ +

Exemple de valeurs logiques pour text-align

+ +

La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser left et right, on pourra utiliser start et end. Dans l'exemple suivant, on définit text-align: right pour le premier bloc et text-align: end pour le second.

+ +

Si on modifie la valeur de direction pour la passer à rtl, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.

+ +

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

+ +

Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (start et end) plutôt que des alignements basés sur les directions physiques.

diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html new file mode 100644 index 0000000000..8b4da0bce6 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html @@ -0,0 +1,297 @@ +--- +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 +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +

{{CSSRef}}

+ +

La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.

+ +

Si vous avez consulté la page principale sur les propriétés et valeurs logiques, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.

+ +

Correspondances pour les marges, les bordures et les remplissages (padding)

+ +

La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est horizontal-tb et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.

+ +

Si on avait utilisé un mode d'écriture horizontal-tb orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété logiquePropriété physique
{{cssxref("border-block-end")}}{{cssxref("border-bottom")}}
{{cssxref("border-block-end-color")}}{{cssxref("border-bottom-color")}}
{{cssxref("border-block-end-style")}}{{cssxref("border-bottom-style")}}
{{cssxref("border-block-end-width")}}{{cssxref("border-bottom-width")}}
{{cssxref("border-block-start")}}{{cssxref("border-top")}}
{{cssxref("border-block-start-color")}}{{cssxref("border-top-color")}}
{{cssxref("border-block-start-style")}}{{cssxref("border-top-style")}}
{{cssxref("border-block-start-width")}}{{cssxref("border-top-width")}}
{{cssxref("border-inline-end")}}{{cssxref("border-right")}}
{{cssxref("border-inline-end-color")}}{{cssxref("border-right-color")}}
{{cssxref("border-inline-end-style")}}{{cssxref("border-right-style")}}
{{cssxref("border-inline-end-width")}}{{cssxref("border-right-width")}}
{{cssxref("border-inline-start")}}{{cssxref("border-left")}}
{{cssxref("border-inline-start-color")}}{{cssxref("border-left-color")}}
{{cssxref("border-inline-start-style")}}{{cssxref("border-left-style")}}
{{cssxref("border-inline-start-width")}}{{cssxref("border-left-width")}}
{{cssxref("border-start-start-radius")}}{{cssxref("border-top-left-radius")}}
{{cssxref("border-start-end-radius")}}{{cssxref("border-bottom-left-radius")}}
{{cssxref("border-end-start-radius")}}{{cssxref("border-top-right-radius")}}
{{cssxref("border-end-end-radius")}}{{cssxref("border-bottom-right-radius")}}
{{cssxref("margin-block-end")}}{{cssxref("margin-bottom")}}
{{cssxref("margin-block-start")}}{{cssxref("margin-top")}}
{{cssxref("margin-inline-end")}}{{cssxref("margin-right")}}
{{cssxref("margin-inline-start")}}{{cssxref("margin-left")}}
{{cssxref("padding-block-end")}}{{cssxref("padding-bottom")}}
{{cssxref("padding-block-start")}}{{cssxref("padding-top")}}
{{cssxref("padding-inline-end")}}{{cssxref("padding-right")}}
{{cssxref("padding-inline-start")}}{{cssxref("padding-left")}}
+ +

De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéObjectif
{{cssxref("border-block")}}Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-color")}}Définit border-color pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-style")}}Définit border-style pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-width")}}Définit border-width pour les deux bordures sur l'axe de bloc.
{{cssxref("border-inline")}}Définit border-color, -style et -width pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-color")}}Définit border-color pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-style")}}Définit border-style pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-width")}}Définit border-width pour les deux bordures sur l'axe en ligne.
{{cssxref("margin-block")}}Défnit les deux marges sur l'axe de bloc.
{{cssxref("margin-inline")}}Défnit les deux marges sur l'axe en ligne.
{{cssxref("padding-block")}}Définit le remplissage (padding) sur l'axe de bloc.
{{cssxref("padding-inline")}}Définit le remplissage (padding) sur l'axe en ligne.
+ +

Exemples de marges

+ +

Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.

+ +

Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.

+ +

Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en rtl par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.

+ +

Vous pouvez également modifier la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.

+ +

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour les marges

+ +

Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.

+ +

Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.

+ +
.box {
+  margin-block: 5px 10px;
+}
+ +
+

Note : Ces propriétés raccourcies, margin-inline et margin-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Exemples pour le remplissage

+ +

Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.

+ +

Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture horizontal-tb, les deux boîtes auront la même apparence.

+ +

En modifiant la propriété direction avec la valeur rtl, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.

+ +

Vous pouvez aussi modifier la valeur de la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.

+ +

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour le remplissage

+ +

À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.

+ +

Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de 5px sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :

+ +
.box {
+  padding-block: 5px 10px;
+}
+ +
+

Note : Ces propriétés raccourcies, padding-inline et padding-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Exemples pour les bordures

+ +

Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.

+ +

L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés direction et writing-mode pour observer les impacts.

+ +

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour les bordures

+ +

Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.

+ +
.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}
+ +
+

Note : Ces propriétés raccourcies, border-inline et border-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Propriétés pour les courbures des bordures relatives au flux

+ +

La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.

+ +
.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}
+ +

Utiliser les valeurs logiques avec les propriétés raccourcies classiques

+ +

La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (margin par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de cette issue.

+ +

À l'heure actuelle (décembre 2018), les propriétés raccourcies margin, padding et border ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.

diff --git "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" "b/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" deleted file mode 100644 index 3a99d5bbad..0000000000 --- "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Propriétés logiques pour les flottements et le positionnement -slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement -tags: - - CSS - - Guide - - Propriété logique -translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning ---- -
{{CSSRef}}
- -

La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.

- -

Correspondance entre les propriétés et les valeurs

- -

Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriété ou valeur logiquePropriété ou valeur physique
{{cssxref("float")}}: inline-start{{cssxref("float")}}: left
{{cssxref("float")}}: inline-end{{cssxref("float")}}: right
{{cssxref("clear")}}: inline-start{{cssxref("clear")}}: left
{{cssxref("clear")}}: inline-end{{cssxref("clear")}}: right
{{cssxref("inset-inline-start")}}{{cssxref("left")}}
{{cssxref("inset-inline-end")}}{{cssxref("right")}}
{{cssxref("inset-block-start")}}{{cssxref("top")}}
{{cssxref("inset-block-end")}}{{cssxref("bottom")}}
{{cssxref("text-align")}}: start{{cssxref("text-align")}}: left
{{cssxref("text-align")}}: end{{cssxref("text-align")}}: right
- -

En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.

- - - - - - - - - - - - - - - - - - - - - - -
Propriété logiqueObjectif
{{cssxref("inset-inline")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.
{{cssxref("inset-block")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.
{{cssxref("inset")}}Cette propriété définit les valeurs des quatre décalages.
- -

Exemple d'un flottement et d'un dégagement

- -

Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont left, right et both. Les valeurs logiques définies par la spécification sont inline-start et inline-end et qui peuvent correspondre à left et right selon le mode d'écriture.

- -

Dans l'exemple ci-après, on a deux boîtes : la première flotte avec float: left et la deuxième avec float: inline-start. Si on modifie la propriété writing-mode pour la passer en vertical-rl ou si on modifie direction en rtl, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec inline-start suit la direction et le mode d'écriture.

- -

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

- -

Exemple des propriétés inset pour les dispositions positionnées

- -

Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.

- -

Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.

- -

De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :

- - - -

Dans l'exemple qui suit, on utilise les propriétés inset-block-start et inset-inline-end afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a position: relative. En modifiant la propriété writing-mode afin d'utiliser la valeur vertical-rl ou en ajoutant direction: rtl, on pourra voir comment la boîte relative reste dans la direction du texte.

- -

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

- -

Nouvelles propriétés raccourcies

- -

Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.

- - - -
-

Note : Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.

-
- -

Exemple de valeurs logiques pour text-align

- -

La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser left et right, on pourra utiliser start et end. Dans l'exemple suivant, on définit text-align: right pour le premier bloc et text-align: end pour le second.

- -

Si on modifie la valeur de direction pour la passer à rtl, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.

- -

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

- -

Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (start et end) plutôt que des alignements basés sur les directions physiques.

diff --git "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" "b/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" deleted file mode 100644 index 8b4da0bce6..0000000000 --- "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" +++ /dev/null @@ -1,297 +0,0 @@ ---- -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 -tags: - - CSS - - Guide - - Propriété logique -translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding ---- -

{{CSSRef}}

- -

La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.

- -

Si vous avez consulté la page principale sur les propriétés et valeurs logiques, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.

- -

Correspondances pour les marges, les bordures et les remplissages (padding)

- -

La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est horizontal-tb et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.

- -

Si on avait utilisé un mode d'écriture horizontal-tb orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriété logiquePropriété physique
{{cssxref("border-block-end")}}{{cssxref("border-bottom")}}
{{cssxref("border-block-end-color")}}{{cssxref("border-bottom-color")}}
{{cssxref("border-block-end-style")}}{{cssxref("border-bottom-style")}}
{{cssxref("border-block-end-width")}}{{cssxref("border-bottom-width")}}
{{cssxref("border-block-start")}}{{cssxref("border-top")}}
{{cssxref("border-block-start-color")}}{{cssxref("border-top-color")}}
{{cssxref("border-block-start-style")}}{{cssxref("border-top-style")}}
{{cssxref("border-block-start-width")}}{{cssxref("border-top-width")}}
{{cssxref("border-inline-end")}}{{cssxref("border-right")}}
{{cssxref("border-inline-end-color")}}{{cssxref("border-right-color")}}
{{cssxref("border-inline-end-style")}}{{cssxref("border-right-style")}}
{{cssxref("border-inline-end-width")}}{{cssxref("border-right-width")}}
{{cssxref("border-inline-start")}}{{cssxref("border-left")}}
{{cssxref("border-inline-start-color")}}{{cssxref("border-left-color")}}
{{cssxref("border-inline-start-style")}}{{cssxref("border-left-style")}}
{{cssxref("border-inline-start-width")}}{{cssxref("border-left-width")}}
{{cssxref("border-start-start-radius")}}{{cssxref("border-top-left-radius")}}
{{cssxref("border-start-end-radius")}}{{cssxref("border-bottom-left-radius")}}
{{cssxref("border-end-start-radius")}}{{cssxref("border-top-right-radius")}}
{{cssxref("border-end-end-radius")}}{{cssxref("border-bottom-right-radius")}}
{{cssxref("margin-block-end")}}{{cssxref("margin-bottom")}}
{{cssxref("margin-block-start")}}{{cssxref("margin-top")}}
{{cssxref("margin-inline-end")}}{{cssxref("margin-right")}}
{{cssxref("margin-inline-start")}}{{cssxref("margin-left")}}
{{cssxref("padding-block-end")}}{{cssxref("padding-bottom")}}
{{cssxref("padding-block-start")}}{{cssxref("padding-top")}}
{{cssxref("padding-inline-end")}}{{cssxref("padding-right")}}
{{cssxref("padding-inline-start")}}{{cssxref("padding-left")}}
- -

De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéObjectif
{{cssxref("border-block")}}Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-color")}}Définit border-color pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-style")}}Définit border-style pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-width")}}Définit border-width pour les deux bordures sur l'axe de bloc.
{{cssxref("border-inline")}}Définit border-color, -style et -width pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-color")}}Définit border-color pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-style")}}Définit border-style pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-width")}}Définit border-width pour les deux bordures sur l'axe en ligne.
{{cssxref("margin-block")}}Défnit les deux marges sur l'axe de bloc.
{{cssxref("margin-inline")}}Défnit les deux marges sur l'axe en ligne.
{{cssxref("padding-block")}}Définit le remplissage (padding) sur l'axe de bloc.
{{cssxref("padding-inline")}}Définit le remplissage (padding) sur l'axe en ligne.
- -

Exemples de marges

- -

Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.

- -

Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.

- -

Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en rtl par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.

- -

Vous pouvez également modifier la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.

- -

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

- -

Propriétés raccourcies pour les marges

- -

Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.

- -

Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.

- -
.box {
-  margin-block: 5px 10px;
-}
- -
-

Note : Ces propriétés raccourcies, margin-inline et margin-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

-
- -

Exemples pour le remplissage

- -

Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.

- -

Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture horizontal-tb, les deux boîtes auront la même apparence.

- -

En modifiant la propriété direction avec la valeur rtl, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.

- -

Vous pouvez aussi modifier la valeur de la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.

- -

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

- -

Propriétés raccourcies pour le remplissage

- -

À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.

- -

Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de 5px sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :

- -
.box {
-  padding-block: 5px 10px;
-}
- -
-

Note : Ces propriétés raccourcies, padding-inline et padding-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

-
- -

Exemples pour les bordures

- -

Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.

- -

L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés direction et writing-mode pour observer les impacts.

- -

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

- -

Propriétés raccourcies pour les bordures

- -

Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.

- -
.box {
-  border-block: 2px solid green;
-  border-inline-width: 4px;
-  border-inline-style: dotted;
-  border-inline-color: rebeccapurple;
-}
- -
-

Note : Ces propriétés raccourcies, border-inline et border-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

-
- -

Propriétés pour les courbures des bordures relatives au flux

- -

La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.

- -
.box {
-  border-end-start-radius: 1em;
-  border-end-end-radius: 0;
-  border-start-end-radius: 20px;
-  border-start-start-radius: 40px;
-}
- -

Utiliser les valeurs logiques avec les propriétés raccourcies classiques

- -

La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (margin par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de cette issue.

- -

À l'heure actuelle (décembre 2018), les propriétés raccourcies margin, padding et border ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.

diff --git a/files/fr/web/css/css_logical_properties/sizing/index.html b/files/fr/web/css/css_logical_properties/sizing/index.html new file mode 100644 index 0000000000..f6ffe024e6 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/sizing/index.html @@ -0,0 +1,89 @@ +--- +title: Propriétés logiques pour le dimensionnement +slug: Web/CSS/CSS_Logical_Properties/Dimensionnement +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.

+ +

Lorsqu'on définit la taille d'un objet, la spécification sur les propriétés et les valeurs logiques permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs logiques, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs physiques en combinaison avec ces propriétés et ces valeurs logiques.

+ +

Correspondances pour les dimensions

+ +

Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (horizontal-tb) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.

+ +

Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété logiquePropriété physique
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
+ +

Exemple pour width et height

+ +

Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer width par inline-size et height par block-size et on obtiendra le même résultat.

+ +

Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec horizontal-tb. En modifiant cette valeur pour la passer à vertical-rl, on verra que le premier exemple, qui utilise width et height, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise inline-size et block-size, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

Exemple pour min-width et min-height

+ +

Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que inline-size et block-size mais paramètrent une taille minimale plutôt qu'une taille fixe.

+ +

Dans l'exemple suivant, vous pouvez passer le mode d'écriture en vertical-rl et observer l'effet obtenu. Là encore, on utilise la propriété physique (min-height) sur le premier exemple et la propriété logique (min-block-size) sur le second.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

Exemple pour max-width et max-height

+ +

Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

Mots-clés logiques pour resize

+ +

La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques horizontal et vertical. La propriété resize peut désormais s'utiliser également avec des valeurs logiques : resize: inline permettra de redimensionner un objet sur l'axe en ligne et resize: block permettra de le redimensionner sur l'axe en bloc.

+ +

La valeur both peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

Attention ! À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.

+
diff --git a/files/fr/web/css/css_masking/index.html b/files/fr/web/css/css_masking/index.html new file mode 100644 index 0000000000..ea2a9afeb5 --- /dev/null +++ b/files/fr/web/css/css_masking/index.html @@ -0,0 +1,66 @@ +--- +title: CSS Masks +slug: Web/CSS/CSS_Masks +tags: + - Aperçu + - CSS + - CSS Masking + - Reference +translation_of: Web/CSS/CSS_Masking +--- +
{{CSSRef}}
+ +

CSS Masking (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le clipping, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("clip")}} {{deprecated_inline}}
    • +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("clip-rule")}}
    • +
  • {{cssxref("mask")}}
    • +
  • {{cssxref("mask-border")}}
    • +
  • {{cssxref("mask-border-mode")}}
    • +
  • {{cssxref("mask-border-outset")}}
    • +
  • {{cssxref("mask-border-repeat")}}
    • +
  • {{cssxref("mask-border-slice")}}
    • +
  • {{cssxref("mask-border-source")}}
    • +
  • {{cssxref("mask-border-width")}}
    • +
  • {{cssxref("mask-clip")}}
    • +
  • {{cssxref("mask-composite")}}
    • +
  • {{cssxref("mask-image")}}
    • +
  • {{cssxref("mask-mode")}}
    • +
  • {{cssxref("mask-origin")}}
    • +
  • {{cssxref("mask-position")}}
    • +
  • {{cssxref("mask-repeat")}}
    • +
  • {{cssxref("mask-size")}}
    • +
  • {{cssxref("mask-type")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_masks/index.html b/files/fr/web/css/css_masks/index.html deleted file mode 100644 index ea2a9afeb5..0000000000 --- a/files/fr/web/css/css_masks/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: CSS Masks -slug: Web/CSS/CSS_Masks -tags: - - Aperçu - - CSS - - CSS Masking - - Reference -translation_of: Web/CSS/CSS_Masking ---- -
{{CSSRef}}
- -

CSS Masking (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le clipping, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.

- -

Référence

- -

Propriétés

- -
-
    -
  • {{cssxref("clip")}} {{deprecated_inline}}
    • -
  • {{cssxref("clip-path")}}
    • -
  • {{cssxref("clip-rule")}}
    • -
  • {{cssxref("mask")}}
    • -
  • {{cssxref("mask-border")}}
    • -
  • {{cssxref("mask-border-mode")}}
    • -
  • {{cssxref("mask-border-outset")}}
    • -
  • {{cssxref("mask-border-repeat")}}
    • -
  • {{cssxref("mask-border-slice")}}
    • -
  • {{cssxref("mask-border-source")}}
    • -
  • {{cssxref("mask-border-width")}}
    • -
  • {{cssxref("mask-clip")}}
    • -
  • {{cssxref("mask-composite")}}
    • -
  • {{cssxref("mask-image")}}
    • -
  • {{cssxref("mask-mode")}}
    • -
  • {{cssxref("mask-origin")}}
    • -
  • {{cssxref("mask-position")}}
    • -
  • {{cssxref("mask-repeat")}}
    • -
  • {{cssxref("mask-size")}}
    • -
  • {{cssxref("mask-type")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_motion_path/index.html b/files/fr/web/css/css_motion_path/index.html new file mode 100644 index 0000000000..e6740d2023 --- /dev/null +++ b/files/fr/web/css/css_motion_path/index.html @@ -0,0 +1,54 @@ +--- +title: Motion Path +slug: Web/CSS/Motion_Path +tags: + - Aperçu + - CSS + - Experimental + - Motion Path + - Reference +translation_of: Web/CSS/CSS_Motion_Path +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Motion Path est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée chemin.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("offset")}}
    • +
  • {{cssxref("offset-distance")}}
    • +
  • {{cssxref("offset-path")}}
    • +
  • {{cssxref("offset-rotate")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

offset

+ + + +

{{Compat("css.properties.offset")}}

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..d12e2113d1 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,149 @@ +--- +title: Ajouter z-index +slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}
+ +

Ajouter z-index

+ +

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.

+ +

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

+ +
+

Attention : z-index a un effet sur les éléments uniquement si ceux-ci sont positionnés.

+
+ + + +
+

Notes :

+ +
    +
  • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
    • +
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
    • +
+
+ +

Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le z-index du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.

+ +

{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}

+ +

Code source de l’exemple

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
+
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
+
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
+
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
+
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..0c6c636886 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,36 @@ +--- +title: Comprendre z-index en CSS +slug: Web/CSS/Comprendre_z-index +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

+ +

Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

+ +
+

Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

+
+ +

Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

+ +

Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.

+ +

z-index peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque z-index est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.

+ +

Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.

+ +
    +
  1. L'empilement sans z-index : Règles d'empilement par défaut
    2. +
  2. L'empilement et float : Comportement des éléments flottants
    3. +
  3. Ajouter z-index : Utiliser z-index pour modifier l'empilement par défaut
    4. +
  4. L'empilement de couches : Remarques sur l'empilement de couches
    5. +
  5. Exemple d'empilement n°1 : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
    6. +
  6. Exemple d'empilement n°2 : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
    7. +
  7. Exemple d'empilement n°3 : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau
    8. +
+ +

{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..de0cc3761f --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,135 @@ +--- +title: Empilement et éléments flottants +slug: Web/CSS/Comprendre_z-index/Empilement_et_float +tags: + - Avancé + - CSS + - Contextes d’empilement + - Guide + - Ordre d’empilement + - float + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
+ +

L'empilement et les éléments flottants

+ +

Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :

+ +
    +
  1. L'arrière-plan et les bordures de l'élément racine du document
    2. +
  2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;
    3. +
  3. Les blocs flottants ;
    4. +
  4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).
    5. +
+ +

En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.

+ +

Ce comportement peut être expliqué en améliorant la liste précédente :

+ +
    +
  1. L'arrière-plan et les bordures de l'élément racine ;
    2. +
  2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
    3. +
  3. Les blocs flottants ;
    4. +
  4. Les éléments « en-ligne » enfants dans le flux normal ;
    5. +
  5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
    6. +
+ +
Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
+ +

{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}

+ +

Code source de l'exemple

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+ +

Voir aussi

+ + + + + +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..f155461dd4 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,117 @@ +--- +title: Exemple d'empilement 1 +slug: Web/CSS/Comprendre_z-index/Exemple_1 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
+ +

Premier exemple

+ +

Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs DIV (DIV #1 et DIV #3), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc DIV #1 il y a un bloc DIV #2 en position absolue, alors que dans le bloc DIV #3 il y a un bloc DIV #4 en position absolue, tout deux également sans propriété z-index.

+ +

Le seul et unique contexte d'empilement est le contexte racine. Sans z-index, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.

+ +

Figure 5a : Exemple de contexte d'empilement 1

+ +

Si on assigne au bloc DIV #2 une valeur de z-index positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.

+ +

Figure 5b : Exemple de contexte d'empilement 1

+ +

Si maintenant on assigne également au bloc DIV #4 une valeur de z-index positive, plus grande que celle du DIV #2, le bloc DIV #4 est rendu par dessus tous les autres, y compris par dessus le bloc DIV #2.

+ +

Figure 5c : Exemple de contexte d'empilement 1

+ +

Dans le dernier exemple, vous pouvez voir que les blocs DIV #2 et DIV #4 ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc DIV #4, tout en respectant le bloc DIV #2, peut être contrôlé avec la propriété z-index. Il se fait que les éléments DIV #1 et DIV #3 n'ayant pas de z-index défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs DIV #2 et DIV #3, appartient au contexte d'empilement de la racine.

+ +

Dans le contexte d'empilement, les blocs DIV #1 et DIV #3 sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :

+ + + +
Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
+ +

Exemple

+ +

CSS

+ +
.bold {
+  font-weight: bold;
+  font: 12px Arial;
+}
+#div1,
+#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  z-index: 2;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}
+ +

HTML

+ +
<div id="div1">
+  <br/>
+  <span class="bold">DIV #1</span>
+  <br/>position: relative;
+  <div id="div2">
+    <br/><span class="bold">DIV #2</span>
+    <br/>position: absolute;
+     <br/>z-index: 1;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <b/><span class="bold">DIV #3</span>
+  <br/>position: relative;
+  <div id="div4">
+    <br/><span class="bold">DIV #4</span>
+    <br/>position: absolute;
+    <br/>z-index: 2;
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple')}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..75bbba62d9 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,128 @@ +--- +title: Exemple d'empilement 2 +slug: Web/CSS/Comprendre_z-index/Exemple_2 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
+ +

Deuxième exemple

+ +

Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.

+ +

Figure 6 : Exemple de contexte d'empilement 2

+ +

Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.

+ +

Ce qui peut apparaitre comme étrange, c'est que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #4 (z-index : 10), malgré leurs valeurs de z-index. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc DIV #4 appartient au contexte d'empilement créé par le bloc DIV #3, et, comme expliqué précédemment, le bloc DIV #3 (et tout son contenu) est au dessous du bloc DIV #2.

+ +

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

+ + + +
Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
+ +

Exemple

+ +

CSS

+ +
div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 1;
+}
+
+#div4 {
+  z-index: 10;
+}
+
+#div1,#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}
+ +

HTML

+ +
<br/>
+
+<div id="div1">
+  <br/><span class="bold">DIV #1</span>
+  <br/>position: relative;
+  <div id="div2">
+    <br/><span class="bold">DIV #2</span>
+    <br/>position: absolute;
+    <br/>z-index: 2;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <br/><span class="bold">DIV #3</span>
+  <br/>position: relative;
+  <br/>z-index: 1;
+  <div id="div4">
+    <br/><span class="bold">DIV #4</span>
+    <br/>position: absolute;
+    <br/>z-index: 10;
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..5530887ec2 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,160 @@ +--- +title: Exemple d'empilement 3 +slug: Web/CSS/Comprendre_z-index/Exemple_3 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
+ +

Troisième exemple

+ +

Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.

+ +

Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs DIV positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'id.

+ +

Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.

+ +

Figure 7 : Exemple de contexte d'empilement 3

+ +

Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.

+ +

Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un z-index. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.

+ +

Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de z-index et que les règles d'empilement par défaut s'appliquent.

+ +

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

+ + + +

On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de z-index individuelles (et différentes) assignées à l'aide de sélecteurs d'id plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.

+ +
Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
+ +

Exemple

+ +

CSS

+ +
div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+div.lev1 {
+  width: 250px;
+  height: 70px;
+  position: relative;
+  border: 2px outset #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#container1 {
+  z-index: 1;
+  position: absolute;
+  top: 30px;
+  left: 75px;
+}
+
+div.lev2 {
+  opacity: 0.9;
+  width: 200px;
+  height: 60px;
+  position: relative;
+  border: 2px outset #990000;
+  background-color: #ffdddd;
+  padding-left: 5px;
+}
+
+#container2 {
+  z-index: 1;
+  position: absolute;
+  top: 20px;
+  left: 110px;
+}
+
+div.lev3 {
+  z-index: 10;
+  width: 100px;
+  position: relative;
+  border: 2px outset #000099;
+  background-color: #ddddff;
+  padding-left: 5px;
+}
+ +

HTML

+ +
<br/>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+  <div id="container1">
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+      <div id="container2">
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+      </div>
+    </div>
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+    </div>
+  </div>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..db892c51dc --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,122 @@ +--- +title: Empilement sans z-index +slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
+ +

Empilement sans z-index

+ +

Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :

+ +
    +
  1. Arrière-plans et bordures de l'élément racine
    2. +
  2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)
    3. +
  3. Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)
    4. +
+ +

On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.

+ +

Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.

+ +
+

Notes :

+ +
    +
  • Dans un groupe d'éléments sans aucune propriété z-index, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
    • +
  • Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
    • +
  • Attention : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.
    • +
+
+ +

Figure 1. Exemple de règles d'empilement sans propriété z-index

+ +

Exemple

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","600","400")}}

+ +
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..20fa6ab2ce --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,213 @@ +--- +title: L'empilement de couches +slug: Web/CSS/Comprendre_z-index/Empilement_de_couches +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
+ +

Le contexte d'empilement

+ +

Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.

+ +

Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.

+ +

Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :

+ + + +

Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des z-index pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.

+ +

En bref :

+ + + +
Notes : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
+ +

Illustration

+ +

Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

+ +

Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur z-index. La hiérarchie des contextes d'empilement est organisée comme suit :

+ + + +

Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfants du bloc DIV #3, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément DIV #3 est prise en compte pour l'empilement dans l'élément racine par rapport à ses DIV voisins.

+ +
+

Notes :

+ +
    +
  • DIV #4 est rendu dans le bloc DIV #1 car le z-index (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le z-index (6) du bloc DIV #4 est valide à l'intérieur du contexte d'empilement du bloc DIV #3. Ainsi, DIV #4 se trouve sous DIV #1, parce que DIV #4 appartient à DIV #3, qui possède une valeur de z-index plus petite.
    • +
  • Pour la même raison DIV #2 (dont le z-index est 2) est rendu sous DIV#5 (de z-index égal à 1) parce que DIV #5 appartient à DIV #3, qui possède une valeur de z-index plus grande.
    • +
  • Le z-index du bloc DIV #3 est 4, mais cette valeur est indépendante du z-index du bloc DIV #4, DIV #5 et DIV #6, parce qu'il appartient à un contexte d'empilement différent.
    • +
+
+ +

Exemple

+ +

CSS

+ +
* {
+  margin: 0;
+}
+
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+
+div {
+  opacity: 0.7;
+  position: relative;
+}
+
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+
+#div1, #div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+
+#div4, #div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: ce        }
+
+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","556","396")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
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 ---- -

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

- -

Pour afficher un document, les navigateurs utilisent le DOCTYPE - contraction de l'anglais document type, 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 DOCTYPE correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.

- -

Les navigateurs modernes ont deux modes de rendu :

- - - -

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

- -

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

- -
<!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">
- -

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

- -

Pour être appliqué, une feuille CSS doit être définie avec un type MIME text/css. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.

- -

Quelle est la différence entre id et class ?

- -

Les éléments HTML peuvent posséder un attribut de type id et / ou class. L'attribut id 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 class 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 id et / ou en class.

- -

Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id. Ces caractéristiques de style ne seront appliquées que sur cet id particulier.

- -

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

- -

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 label et form ou pour décorer des éléments qui doivent être sémantiquement uniques.

- -

Voire Les sélecteurs CSS.

- -

Comment revenir à la valeur par défaut d'un propriété ?

- -

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.

- -

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

- -

Comment créer un style dérivant d'un autre ?

- -

CSS ne permet de faire dériver un style d'un autre. Voire l'article d'Eric Meyer à propos de la position du groupe de travail. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

- -

Comment  assigner de multiples classes à un élément?

- -

Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut class en séparant chaque classe d'un espace.

- -
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... content of today's news ...
-</div>
-
- -

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 class n'est pas pris en compte.

- -

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

- -

Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie Règles de style CSS 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.

- -

Hiérarchie des éléments HTML

- -

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.

- -
.news {
-  color: black;
-}
-
-.corpName {
-  font-weight: bold;
-  color: red;
-}
-
- -
<!-- 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>
-
- -

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.

- -

L'ordre et la redéfinition des règles

- -

Pour les feuilles de style CSS, l'ordre est important. 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.

- -
#stockTicker {
-  font-weight: bold;
-}
-.stockSymbol {
-  color: red;
-}
-/*  D'autres règles             */
-/*  D'autres règles             */
-/*  D'autres règles             */
-.stockSymbol {
-  font-weight: normal;
-}
-
- -

 

- -
<!-- 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>
-
-
- -

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.

- -

Utiliser les propriétés raccourcies

- -

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.

- -
#stockTicker {
-  font-size: 12px;
-  font-family: Verdana;
-  font-weight: bold;
-}
-
-.stockSymbol {
-  font: 14px Arial;
-  color: red;
-}
-
- -
<div id="stockTicker">
-  NYS:
-  <span class="stockSymbol">
-    GE
-  </span>
-  +1.0 ...
-</div>
- -

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 l'ordre des règles est important.

- -
#stockTicker {
-  font-weight: bold;
-  font: 12px Verdana;
-  /* font-weight vaut maintenant normal */
-}
-
- -

Utiliser le sélecteur *

- -

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

- -
body * {
-  font-weight: normal;
-}
-
-#stockTicker {
-  font: 12px Verdana;
-}
-
-.corpName {
-  font-weight: bold;
-}
-
-.stockUp {
-  color: red;
-}
-
- -
<div id="section">
-  NYS:
-  <span class="corpName">
-    <span class="stockUp">
-      GE
-    </span>
-  </span>
-  +1.0 ...
-</div>
- -

Dans cet exemple, le sélecteur body * cible tous les éléments à l'intérieur de body, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe .stockUp. Ainsi, la règle font-weight: bold; appliquée sur la classe .corpName est surchargée par la règle font-weight: normal; qui est appliquée à tous les éléments contenus dans body.

- -

Le sélecteur * 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.

- -

La spécificité en CSS

- -

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. Les styles inline (ceux déclarés via l'attribut HTML style) 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.

- -
div {
-  color: black;
-}
-
-#orange {
-  color: orange;
-}
-
-.green {
-  color: green;
-}
-
- -
<div id="orange" class="green" style="color: red;">
-  Voici quelque chose qui sera rouge.
-</div>
- -

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 le chapitre de la spécification CSS 2.1 ou le chapitre correspondant de la section Apprendre.

- -

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

- -

Ces propriétés, appelées propriétés préfixées, 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é.

- -

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.

- -

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

- -

Quel est l'impact de z-index sur le positionnement des éléments ?

- -

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

- -

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

- -

La propriété z-index 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 absolute, relative ou fixed).

diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html new file mode 100644 index 0000000000..3ec397cfde --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html @@ -0,0 +1,70 @@ +--- +title: Concepts de bases pour CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base +tags: + - CSS + - CSS Scroll Snap + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts +--- +
{{CSSRef}}
+ +

Le module de spécification CSS Scroll Snap fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).

+ +

Principes fondamentaux

+ +

Les propriétés principales définies par la spécification Scroll Snap sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété scroll-snap-type s'utilise sur le conteneur de défilement (scroll container) et établit le type et la direction du défilement.

+ +

La propriété scroll-snap-align doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et scroll-snap-align est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

+ +

Utiliser scroll-snap-type

+ +

La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : x ou y ou avec des valeurs logiques : block ou inline. On peut également utiliser le mot-clé both afin d'avoir un défilement et des accroches selon les deux axes.

+ +

Cette propriété s'utilise également avec les mots-clés mandatory ou proximity. Le mot-clé mandatory indique au navigateur que le contenu doit s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé proximity indique que le contenu peut s'accrocher sur un point mais que ce n'est pas obligatoire.

+ +

La valeur mandatory permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera mandatory dans des situations maîtrisées où la taille du contenu sur un écran est connue.

+ +

La valeur proximity déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de mandatory à proximity afin d'observer l'effet obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

+ +

Utiliser scroll-snap-align

+ +

La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs start, end ou center. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur scroll-snap-align dans l'exemple interactif qui suit pour voir le résultat obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

+ +

Ajuster la position de défilement avec un remplissage

+ +

Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (padding) pour décaler la position du contenu.

+ +

Dans l'exemple qui suit, on paramètre scroll-padding à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de scroll-padding afin de voir l'impact sur le décalage obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

+ +

Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant scroll-padding, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <h1> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

+ +

Ajouter des marges sur les éléments fils du défilement

+ +

Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. scroll-margin définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

+ +

La propriété scroll-snap-stop

+ +

La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.

+ +

Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.

+ +
+

Note : La propriété scroll-snap-stop est actuellement mise en question dans la version Candidate Recommendation de la spécification et pourrait être retirée.

+
+ +

Compatibilité des navigateurs

+ +

Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez poursuivre avec le guide suivant pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.

diff --git a/files/fr/web/css/css_scroll_snap/browser_compat/index.html b/files/fr/web/css/css_scroll_snap/browser_compat/index.html new file mode 100644 index 0000000000..f5d6f97ca4 --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/browser_compat/index.html @@ -0,0 +1,46 @@ +--- +title: Compatibilité des navigateurs et CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs +tags: + - CSS + - CSS Scroll Snap + - Compatibilité + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +
{{CSSRef}}
+ +

Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.

+ +

Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?

+ +

Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par Scroll Snap Points, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.

+ +

Voici les principaux points d'attention :

+ + + +

Comment utiliser l'ancienne implémentation comme méthode de recours ?

+ +

Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.

+ +

Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.

+ +

L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur y (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur y.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

+ +

Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section Scroll Snap Points.

+ +

Faut-il utiliser les deux spécifications ?

+ +

Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.

+ +

Si vous souhaitez tester la prise en charge grâce aux requêtes de fonctionnalité, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.

+ +

Pourquoi existent deux versions ?

+ +

Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.

diff --git "a/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" "b/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" deleted file mode 100644 index f5d6f97ca4..0000000000 --- "a/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Compatibilité des navigateurs et CSS Scroll Snap -slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs -tags: - - CSS - - CSS Scroll Snap - - Compatibilité - - Guide -translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat ---- -
{{CSSRef}}
- -

Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.

- -

Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?

- -

Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par Scroll Snap Points, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.

- -

Voici les principaux points d'attention :

- - - -

Comment utiliser l'ancienne implémentation comme méthode de recours ?

- -

Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.

- -

Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.

- -

L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur y (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur y.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

- -

Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section Scroll Snap Points.

- -

Faut-il utiliser les deux spécifications ?

- -

Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.

- -

Si vous souhaitez tester la prise en charge grâce aux requêtes de fonctionnalité, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.

- -

Pourquoi existent deux versions ?

- -

Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.

diff --git a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html deleted file mode 100644 index 3ec397cfde..0000000000 --- a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Concepts de bases pour CSS Scroll Snap -slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base -tags: - - CSS - - CSS Scroll Snap - - Guide -translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts ---- -
{{CSSRef}}
- -

Le module de spécification CSS Scroll Snap fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).

- -

Principes fondamentaux

- -

Les propriétés principales définies par la spécification Scroll Snap sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété scroll-snap-type s'utilise sur le conteneur de défilement (scroll container) et établit le type et la direction du défilement.

- -

La propriété scroll-snap-align doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et scroll-snap-align est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

- -

Utiliser scroll-snap-type

- -

La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : x ou y ou avec des valeurs logiques : block ou inline. On peut également utiliser le mot-clé both afin d'avoir un défilement et des accroches selon les deux axes.

- -

Cette propriété s'utilise également avec les mots-clés mandatory ou proximity. Le mot-clé mandatory indique au navigateur que le contenu doit s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé proximity indique que le contenu peut s'accrocher sur un point mais que ce n'est pas obligatoire.

- -

La valeur mandatory permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera mandatory dans des situations maîtrisées où la taille du contenu sur un écran est connue.

- -

La valeur proximity déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de mandatory à proximity afin d'observer l'effet obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

- -

Utiliser scroll-snap-align

- -

La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs start, end ou center. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur scroll-snap-align dans l'exemple interactif qui suit pour voir le résultat obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

- -

Ajuster la position de défilement avec un remplissage

- -

Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (padding) pour décaler la position du contenu.

- -

Dans l'exemple qui suit, on paramètre scroll-padding à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de scroll-padding afin de voir l'impact sur le décalage obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

- -

Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant scroll-padding, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <h1> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

- -

Ajouter des marges sur les éléments fils du défilement

- -

Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. scroll-margin définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

- -

La propriété scroll-snap-stop

- -

La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.

- -

Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.

- -
-

Note : La propriété scroll-snap-stop est actuellement mise en question dans la version Candidate Recommendation de la spécification et pourrait être retirée.

-
- -

Compatibilité des navigateurs

- -

Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez poursuivre avec le guide suivant pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.

diff --git a/files/fr/web/css/css_selectors/index.html b/files/fr/web/css/css_selectors/index.html new file mode 100644 index 0000000000..a9d6f91d81 --- /dev/null +++ b/files/fr/web/css/css_selectors/index.html @@ -0,0 +1,114 @@ +--- +title: Sélecteurs CSS +slug: Web/CSS/Sélecteurs_CSS +tags: + - Aperçu + - CSS + - CSS Selectors + - Reference + - Sélecteur +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

+ +

Les sélecteurs simples

+ +
+
Les sélecteurs de type
+
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
+ Syntaxe : nomelement
+ Exemple : input permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
+
Les sélecteurs de classe
+
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
+ Syntaxe : .nomclasse
+ Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").
+
Les sélecteurs d'identifiant
+
Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
+ Syntaxe : #valeurid
+ Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
+
Le sélecteur universel
+
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
+ Syntaxe : * ns|* *|*
+ Exemple : * permettra de cibler tous les éléments du document.
+
Les sélecteurs d'attribut
+
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
+ Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
+ Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).
+
+ +

Les combinateurs

+ +
+
Les sélecteurs de voisin direct
+
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
+ Syntaxe : A + B
+ Exemple : div + p permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
+
Les sélecteurs de voisins
+
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
+ Syntaxe : A ~ B
+ Exemple : p ~ span permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
+
Les sélecteurs d'éléments fils
+
Le combinateur '>' permet de sélectionner les nœuds qui sont des fils directs d'un élément donné.
+ Syntaxe : A > B
+ Exemple : ul > li permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
+
Les sélecteurs d'éléments descendants
+
Le combinateur   (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.
+ Syntaxe : A B
+ Exemple : div span permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
+
Le combinateur de colonne{{experimental_inline}}
+
Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B
+ Exemple : col || td permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
+
+ +

Les pseudo-classes

+ +
+
Les pseudo-classes permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.
+
Exemple: a:visited permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.
+
+ +

Les pseudo-éléments

+ +
+
Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
+
Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du combinateur de colonne (||), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Ajout du combinateur de voisin ~. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (::)
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} +

Ajout des combinateurs pour les fils (>) et voisins adjacents (+).
+ Ajout du sélecteur universel et du sélecteur d'attribut.

+
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..8aeae8c255 --- /dev/null +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,63 @@ +--- +title: 'Utiliser la pseudo-classe :target dans un sélecteur' +slug: 'Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur' +tags: + - CSS + - Guide + - Intermédiaire +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.

+ +

Choisir une cible

+ +

La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple contient le fragment d'identifiant #Exemple. En HTML, les identifiants correspondent aux valeurs des attributs id et name, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.

+ +

Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :

+ +
h2:target {
+  font-weight: bold;
+}
+ +

On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment #Exemple, on pourra écrire :

+ +
#Exemple:target {
+  border: 1px solid black;
+}
+ +

Cibler tous les éléments

+ +

Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :

+ +
:target {
+  color: red;
+}
+
+ +

Exemple

+ +

Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le <h1 id="un"> devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.

+ +
+
<h4 id="un">...</h4> <p id="deux">...</p>
+<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
+
+<a href="#un">Premier</a>
+<a href="#deux">Deuxième</a>
+<a href="#trois">Troisième</a>
+<a href="#quatre">Quatrième</a>
+<a href="#cinq">Cinquième</a>
+
+ +

Conclusion

+ +

Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" "b/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" deleted file mode 100644 index bf8d674cf3..0000000000 --- "a/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Aperçu des formes CSS -slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS -tags: - - Aperçu - - CSS - - CSS Shapes - - Formes CSS -translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes ---- -
{{CSSRef}}
- -

La spécification CSS Shapes Level 1 définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.

- -

Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.

- -

Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.

- -

Que définit la spécification ?

- -

La spécification définit trois nouvelles propriétés :

- - - -

Définir des formes simples

- -

La propriété shape-outside permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("<basic-shape>")}}. Prenons un exemple simple pour commencer.

- -

Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique shape-outside avec la valeur circle(50%). Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

- -

À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <basic-shape>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.

- -

Formes simples (Basic Shapes)

- -

La valeur circle(50%) est une exemple de forme simple. La spécification fournit quatre valeur de types <basic-shape> :

- - - -

Avec la valeur inset(), le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.

- -

Nous avons vu le fonctionnement de circle() dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. ellipse() est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser polygon() afin de créer un polygone correspondant à une forme complexe.

- -

Dans le guide sur les formes simples, nous verrons comment créer et exploiter ces formes.

- -

Boîtes de référence

- -

Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du modèle de boîte et utiliser les valeurs :

- - - -

Dans l'exemple qui suit, vous pouvez modifier la valeur border-box afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

- -

Pour en savoir plus, voir le guide sur les formes et les boîtes.

- -

Générer une forme à partir d'une image

- -

Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).

- -

Attention, les images utilisées ainsi doivent être compatibles avec les règles CORS. Se n'est pass le cas, shape-outside se comportera comme si elle avait reçu la valeur none et il n'y aura alors aucune forme.

- -

Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour shape-outside. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

- -

shape-image-threshold

- -

La propriété shape-image-threshold permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de shape-image-threshold est 0.0 (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur 1.0, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.

- -

Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

- -

Dans l'article Créer des formes à partir d'images, nous verrons plus en détails le fonctionnement de ces propriétés.

- -

La propriété shape-margin

- -

La propriété {{cssxref("shape-margin")}} ajoute une marge à shape-outside. Cela permet d'écarter le contenu de la forme.

- -

Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute shape-margin. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

- -

Utiliser du contenu généré comme objet flottant

- -

Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.

- -

Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

- -

Relations avec clip-path

- -

Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.

- -

Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  shape-outside: ellipse(40% 50%); puis utilisé clip-path: ellipse(40% 50%); afin de rogner l'image pour suivre la forme.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

- -

Outils de développement pour les formes CSS

- -

Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : l'éditeur de chemin pour les formes (Shape Path Editor). Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.

- -

L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à clip-path. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à shape-outside à condition d'avoir activé la préférence layout.css.shape-outside.enabled.

- -

Les futures fonctionnalités

- -

Dans sa version initiale, le module de spécification pour les formes contenait une propriété shape-inside afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de niveau 2. La propriété shape-inside était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.

diff --git a/files/fr/web/css/css_shapes/basic_shapes/index.html b/files/fr/web/css/css_shapes/basic_shapes/index.html new file mode 100644 index 0000000000..e1c594bce0 --- /dev/null +++ b/files/fr/web/css/css_shapes/basic_shapes/index.html @@ -0,0 +1,149 @@ +--- +title: Formes simples +slug: Web/CSS/CSS_Shapes/Formes_simples +tags: + - CSS + - CSS Shapes + - Guide +translation_of: Web/CSS/CSS_Shapes/Basic_Shapes +--- +
{{CSSRef}}
+ +

Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.

+ +

Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :

+ + + +

Le type <basic-shape>

+ +

Le type de donnée <basic-shape> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.

+ +

Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.

+ +

La boîte de référence

+ +

La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte dans le guide sur la création de formes à partir des boîtes où nous avons directement utilisé la boîte de référence afin de créer une forme.

+ +

L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec shape-outside: circle(50%), l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du modèle de boîtes.

+ +

+ +

La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .

+ +
.shape {
+  shape-outside: circle(50%) margin-box;
+}
+
+ +

On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :

+ +
.shape {
+  shape-outside: circle(50%) border-box;
+}
+
+ +

On notera que la boîte margin-box pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.

+ +

Pour une description des boîtes et de leurs relations avec les formes CSS, voir Comprendre les liens entre les boîtes de référence et les formes CSS.

+ +

inset()

+ +

Le type inset() définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec inset(), on peut inclure des décalages et déplacer la forme autour de la boîte de référence.

+ +

inset() prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour border-radius. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle border-radius vaut 10 pixels.

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+
+ +

Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :

+ + + +

Ainsi, la règle écrite ci-avant peut-être formulée :

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}
+ +

Dans l'exemple qui suit, on a une forme inset() qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}

+ +

Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier margin-box afin d'utiliser border-box, padding-box ou content-box pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}

+ +

circle()

+ +

La valeur circle() peut être utilisée pour shape-outside et prend jusqu'à deux argument. Le premier de ces arguments correspond à shape-radius.

+ +

La fonction circle() et la fonction ellipse(), pour shape-outside, peuvent utiliser cet argument <shape-radius>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés closest-side ou farthest-side.

+ +

Le mot-clé closest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.

+ +

Le mot-clé farthest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.

+ +

Le deuxième argument est une position dont la valeur par défaut est center. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.

+ +

Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé closest-side ou farthest-side, optionnellement suivi par le mot-clé at suivi par une position.

+ +

Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour shape-radius, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}

+ +

Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.

+ +

Ajoutons un autre exemple, en utilisant les mots-clés top left pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}

+ +

Limitation à la boîte de marge

+ +

Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.

+ +
img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+
+ +

The circle shape is clipped by the margin box

+ +

ellipse()

+ +

Une ellipse peut être vue comme un cercle aplati. De ce point de vu ellipse() fonctionne de façon analogue à circle() mais il est nécessaire d'indiquer deux rayons : un rayon horizontal x et un rayon vertical y (dans cet ordre).

+ +

Ces rayons peuvent être suivis par une position qui permet, comme avec circle(), de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}

+ +

Les mots-clés closest-side et farthest-side permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}

+ +

polygon()

+ +

La forme simple qui permet de créer une grande variété de formes est polygon(). Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.

+ +

Dans l'exemple qui suit, on crée une forme avec polygon() pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}

+ +

L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.

+ +

The polygon basic shape, highlighted with the Shapes Inspector.

+ +

Une autre ressource qui peut s'avérer utile sur ces sujets est Clippy : cet outil permet de créer des formes pour clip-path. Or, les formes utilisées pour clip-path sont les mêmes que pour les formes simples.

diff --git "a/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" "b/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" deleted file mode 100644 index 5ed5b06bfa..0000000000 --- "a/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Créer des formes à partir des boîtes -slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes -tags: - - Boîtes - - CSS - - CSS Shapes - - Formes CSS - - Guide -translation_of: Web/CSS/CSS_Shapes/From_box_values ---- -
{{CSSRef}}
- -

Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.

- -

Les valeurs de boîte qui sont autorisées pour les formes sont :

- - - -

Les valeurs border-radius sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.

- -

Le modèle de boîte CSS

- -

Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (content), du remplissage (padding), une bordure (border) ainsi qu'une marge (margin).

- -

The Box Model consists of the margin, border, padding and content boxes.

- -

En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.

- -

margin-box

- -

La valeur margin-box correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.

- -

Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété border-radius a été utilisée afin de créer le cercle avec border-radius: 50%. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}

- -

border-box

- -

La valeur border-box correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, border-box sera équivalent à padding-box et la forme suivra le bord extérieur de la boîte de remplissage.

- -

Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

- -

padding-box

- -

La valeur padding-box correspond à la forme définie par le bord extérieur de la boîte de remplissage (padding). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, padding-box sera équivalent à content-box.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}

- -

content-box

- -

La valeur content-box correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre 0 et border-radius − border-width − padding. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

- -
-

Note : Pour en savoir plus sur le modèle de boîte CSS, voir cet article.

-
- -

Quand utiliser les valeurs de boîte

- -

Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété border-radius. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).

- -

Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur border-radius de 100% dans la direction la plus proche du texte.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

- -

Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.

diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/formes_simples/index.html deleted file mode 100644 index e1c594bce0..0000000000 --- a/files/fr/web/css/css_shapes/formes_simples/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Formes simples -slug: Web/CSS/CSS_Shapes/Formes_simples -tags: - - CSS - - CSS Shapes - - Guide -translation_of: Web/CSS/CSS_Shapes/Basic_Shapes ---- -
{{CSSRef}}
- -

Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.

- -

Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :

- - - -

Le type <basic-shape>

- -

Le type de donnée <basic-shape> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.

- -

Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.

- -

La boîte de référence

- -

La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte dans le guide sur la création de formes à partir des boîtes où nous avons directement utilisé la boîte de référence afin de créer une forme.

- -

L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec shape-outside: circle(50%), l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du modèle de boîtes.

- -

- -

La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .

- -
.shape {
-  shape-outside: circle(50%) margin-box;
-}
-
- -

On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :

- -
.shape {
-  shape-outside: circle(50%) border-box;
-}
-
- -

On notera que la boîte margin-box pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.

- -

Pour une description des boîtes et de leurs relations avec les formes CSS, voir Comprendre les liens entre les boîtes de référence et les formes CSS.

- -

inset()

- -

Le type inset() définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec inset(), on peut inclure des décalages et déplacer la forme autour de la boîte de référence.

- -

inset() prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour border-radius. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle border-radius vaut 10 pixels.

- -
.shape {
-  float: left;
-  shape-outside: inset(20px 10px 20px 10px round 10px);
-}
-
- -

Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :

- - - -

Ainsi, la règle écrite ci-avant peut-être formulée :

- -
.shape {
-  float: left;
-  shape-outside: inset(20px 10px round 10px);
-}
- -

Dans l'exemple qui suit, on a une forme inset() qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}

- -

Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier margin-box afin d'utiliser border-box, padding-box ou content-box pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}

- -

circle()

- -

La valeur circle() peut être utilisée pour shape-outside et prend jusqu'à deux argument. Le premier de ces arguments correspond à shape-radius.

- -

La fonction circle() et la fonction ellipse(), pour shape-outside, peuvent utiliser cet argument <shape-radius>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés closest-side ou farthest-side.

- -

Le mot-clé closest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.

- -

Le mot-clé farthest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.

- -

Le deuxième argument est une position dont la valeur par défaut est center. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.

- -

Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé closest-side ou farthest-side, optionnellement suivi par le mot-clé at suivi par une position.

- -

Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour shape-radius, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}

- -

Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.

- -

Ajoutons un autre exemple, en utilisant les mots-clés top left pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}

- -

Limitation à la boîte de marge

- -

Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.

- -
img {
-  float: left;
-  shape-outside: circle(50% at 60%);
-}
-
- -

The circle shape is clipped by the margin box

- -

ellipse()

- -

Une ellipse peut être vue comme un cercle aplati. De ce point de vu ellipse() fonctionne de façon analogue à circle() mais il est nécessaire d'indiquer deux rayons : un rayon horizontal x et un rayon vertical y (dans cet ordre).

- -

Ces rayons peuvent être suivis par une position qui permet, comme avec circle(), de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}

- -

Les mots-clés closest-side et farthest-side permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}

- -

polygon()

- -

La forme simple qui permet de créer une grande variété de formes est polygon(). Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.

- -

Dans l'exemple qui suit, on crée une forme avec polygon() pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}

- -

L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.

- -

The polygon basic shape, highlighted with the Shapes Inspector.

- -

Une autre ressource qui peut s'avérer utile sur ces sujets est Clippy : cet outil permet de créer des formes pour clip-path. Or, les formes utilisées pour clip-path sont les mêmes que pour les formes simples.

diff --git a/files/fr/web/css/css_shapes/from_box_values/index.html b/files/fr/web/css/css_shapes/from_box_values/index.html new file mode 100644 index 0000000000..5ed5b06bfa --- /dev/null +++ b/files/fr/web/css/css_shapes/from_box_values/index.html @@ -0,0 +1,75 @@ +--- +title: Créer des formes à partir des boîtes +slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes +tags: + - Boîtes + - CSS + - CSS Shapes + - Formes CSS + - Guide +translation_of: Web/CSS/CSS_Shapes/From_box_values +--- +
{{CSSRef}}
+ +

Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.

+ +

Les valeurs de boîte qui sont autorisées pour les formes sont :

+ + + +

Les valeurs border-radius sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.

+ +

Le modèle de boîte CSS

+ +

Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (content), du remplissage (padding), une bordure (border) ainsi qu'une marge (margin).

+ +

The Box Model consists of the margin, border, padding and content boxes.

+ +

En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.

+ +

margin-box

+ +

La valeur margin-box correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.

+ +

Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété border-radius a été utilisée afin de créer le cercle avec border-radius: 50%. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}

+ +

border-box

+ +

La valeur border-box correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, border-box sera équivalent à padding-box et la forme suivra le bord extérieur de la boîte de remplissage.

+ +

Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

+ +

padding-box

+ +

La valeur padding-box correspond à la forme définie par le bord extérieur de la boîte de remplissage (padding). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, padding-box sera équivalent à content-box.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}

+ +

content-box

+ +

La valeur content-box correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre 0 et border-radius − border-width − padding. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

+ +
+

Note : Pour en savoir plus sur le modèle de boîte CSS, voir cet article.

+
+ +

Quand utiliser les valeurs de boîte

+ +

Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété border-radius. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).

+ +

Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur border-radius de 100% dans la direction la plus proche du texte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

+ +

Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.

diff --git "a/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" "b/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" deleted file mode 100644 index e85db873c1..0000000000 --- "a/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Générer des formes avec des images -slug: Web/CSS/CSS_Shapes/Générer_formes_images -tags: - - CSS - - Formes CSS - - Guide -translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images ---- -
{{CSSRef}}
- -

Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.

- -

Générer une forme simple avec une image

- -

Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.

- -

Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}

- -

On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}

- -

Origines et compatibilité CORS

- -

Attention, les images utilisées pour créer les formes doivent être compatibles pour le CORS. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.

- -

Ai-je à faire à un problème de CORS ?

- -

Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.

- -

Utiliser un seuil

- -

La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si shape-image-threshold vaut 0.0 (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur 1.0 est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.

- -

Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise shape-image-threshold avec la valeur 0.3, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à 0.2, on aura une forme rectangulaire.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}

- -

Utiliser des images avec du contenu généré

- -

Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété shape-outside ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.

- -

Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}

- -

Créer des formes avec un dégradé

- -

En CSS, un dégradé est une image. On peut donc utiliser un dégradé afin de générer une forme.

- -

Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.

- -

Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}

- -

Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}

- -

Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.

diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html new file mode 100644 index 0000000000..bf8d674cf3 --- /dev/null +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html @@ -0,0 +1,125 @@ +--- +title: Aperçu des formes CSS +slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS +tags: + - Aperçu + - CSS + - CSS Shapes + - Formes CSS +translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +--- +
{{CSSRef}}
+ +

La spécification CSS Shapes Level 1 définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.

+ +

Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.

+ +

Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.

+ +

Que définit la spécification ?

+ +

La spécification définit trois nouvelles propriétés :

+ + + +

Définir des formes simples

+ +

La propriété shape-outside permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("<basic-shape>")}}. Prenons un exemple simple pour commencer.

+ +

Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique shape-outside avec la valeur circle(50%). Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <basic-shape>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.

+ +

Formes simples (Basic Shapes)

+ +

La valeur circle(50%) est une exemple de forme simple. La spécification fournit quatre valeur de types <basic-shape> :

+ + + +

Avec la valeur inset(), le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.

+ +

Nous avons vu le fonctionnement de circle() dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. ellipse() est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser polygon() afin de créer un polygone correspondant à une forme complexe.

+ +

Dans le guide sur les formes simples, nous verrons comment créer et exploiter ces formes.

+ +

Boîtes de référence

+ +

Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du modèle de boîte et utiliser les valeurs :

+ + + +

Dans l'exemple qui suit, vous pouvez modifier la valeur border-box afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

+ +

Pour en savoir plus, voir le guide sur les formes et les boîtes.

+ +

Générer une forme à partir d'une image

+ +

Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).

+ +

Attention, les images utilisées ainsi doivent être compatibles avec les règles CORS. Se n'est pass le cas, shape-outside se comportera comme si elle avait reçu la valeur none et il n'y aura alors aucune forme.

+ +

Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour shape-outside. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

+ +

shape-image-threshold

+ +

La propriété shape-image-threshold permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de shape-image-threshold est 0.0 (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur 1.0, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.

+ +

Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

+ +

Dans l'article Créer des formes à partir d'images, nous verrons plus en détails le fonctionnement de ces propriétés.

+ +

La propriété shape-margin

+ +

La propriété {{cssxref("shape-margin")}} ajoute une marge à shape-outside. Cela permet d'écarter le contenu de la forme.

+ +

Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute shape-margin. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

+ +

Utiliser du contenu généré comme objet flottant

+ +

Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.

+ +

Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

+ +

Relations avec clip-path

+ +

Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.

+ +

Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  shape-outside: ellipse(40% 50%); puis utilisé clip-path: ellipse(40% 50%); afin de rogner l'image pour suivre la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

+ +

Outils de développement pour les formes CSS

+ +

Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : l'éditeur de chemin pour les formes (Shape Path Editor). Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.

+ +

L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à clip-path. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à shape-outside à condition d'avoir activé la préférence layout.css.shape-outside.enabled.

+ +

Les futures fonctionnalités

+ +

Dans sa version initiale, le module de spécification pour les formes contenait une propriété shape-inside afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de niveau 2. La propriété shape-inside était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.

diff --git a/files/fr/web/css/css_shapes/shapes_from_images/index.html b/files/fr/web/css/css_shapes/shapes_from_images/index.html new file mode 100644 index 0000000000..e85db873c1 --- /dev/null +++ b/files/fr/web/css/css_shapes/shapes_from_images/index.html @@ -0,0 +1,64 @@ +--- +title: Générer des formes avec des images +slug: Web/CSS/CSS_Shapes/Générer_formes_images +tags: + - CSS + - Formes CSS + - Guide +translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images +--- +
{{CSSRef}}
+ +

Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.

+ +

Générer une forme simple avec une image

+ +

Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.

+ +

Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}

+ +

On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}

+ +

Origines et compatibilité CORS

+ +

Attention, les images utilisées pour créer les formes doivent être compatibles pour le CORS. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.

+ +

Ai-je à faire à un problème de CORS ?

+ +

Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.

+ +

Utiliser un seuil

+ +

La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si shape-image-threshold vaut 0.0 (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur 1.0 est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.

+ +

Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise shape-image-threshold avec la valeur 0.3, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à 0.2, on aura une forme rectangulaire.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}

+ +

Utiliser des images avec du contenu généré

+ +

Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété shape-outside ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.

+ +

Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}

+ +

Créer des formes avec un dégradé

+ +

En CSS, un dégradé est une image. On peut donc utiliser un dégradé afin de générer une forme.

+ +

Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.

+ +

Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}

+ +

Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}

+ +

Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.

diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.html b/files/fr/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..c33a7e3ac9 --- /dev/null +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,83 @@ +--- +title: Utilisation des transformations CSS +slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS +tags: + - 3D + - Avancé + - CSS + - Guide + - Mise à l'échelle + - Scale + - Transformations CSS + - perspective + - rotation +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

+ +
+

Attention ! Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.

+
+ +

Propriétés des transformations CSS

+ +

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.

+ +
+
{{cssxref("transform-origin")}}
+
Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
+
{{cssxref("transform")}}
+
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.
+
+ +

Exemples

+ +

Voici une version originale du logo MDN :

+ +

MDN Logo

+ +

Rotation

+ +

Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Rotation','auto',240)}}

+ +

Distorsion et translation

+ +

Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Distorsion_et_translation')}}

+ +

Propriétés CSS spécifiques à la 3D

+ +

Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.

+ +

Définir une perspective

+ +

Le premier élément à définir est la perspective. La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.

+ +

{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}

+ +

Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.

+ +

{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html deleted file mode 100644 index c33a7e3ac9..0000000000 --- a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Utilisation des transformations CSS -slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS -tags: - - 3D - - Avancé - - CSS - - Guide - - Mise à l'échelle - - Scale - - Transformations CSS - - perspective - - rotation -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms ---- -
{{CSSRef}}
- -

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

- -
-

Attention ! Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.

-
- -

Propriétés des transformations CSS

- -

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.

- -
-
{{cssxref("transform-origin")}}
-
Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
-
{{cssxref("transform")}}
-
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.
-
- -

Exemples

- -

Voici une version originale du logo MDN :

- -

MDN Logo

- -

Rotation

- -

Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :

- -
<img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Rotation','auto',240)}}

- -

Distorsion et translation

- -

Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :

- -
<img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Distorsion_et_translation')}}

- -

Propriétés CSS spécifiques à la 3D

- -

Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.

- -

Définir une perspective

- -

Le premier élément à définir est la perspective. La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.

- -

{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}

- -

Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.

- -

{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.html b/files/fr/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..bbcdcb51e2 --- /dev/null +++ b/files/fr/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1094 @@ +--- +title: Utiliser les transitions CSS +slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS +tags: + - Avancé + - CSS + - Guide + - Transitions +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +
{{CSSref}}
+ +

Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.

+ +

Les animations qui utilisent des transitions entre deux états sont souvent appelées transitions implicites car l'état initial et l'état final sont définis implicitement par le navigateur.

+ +

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

+ +

Les transitions CSS vous permettent de choisir :

+ + + +

Quelles sont les propriétés CSS qui peuvent être animées ?

+ +

On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et la liste des propriétés concernées est limitée.

+ +

Note : La gestion de la valeur auto représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec auto.

+ +

Note : Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via .appendChild() ou en modiant display: none;. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer window.setTimeout() pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.

+ +

Les propriétés CSS relatives aux transitions

+ +

Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :

+ +
+

Note : Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.

+
+ +
+
{{cssxref("transition-property")}}
+
Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.
+
{{cssxref("transition-duration")}}
+
Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. +
+
+

transition-duration: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
+
+ +
+

transition-duration: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+
+
{{cssxref("transition-timing-function")}}
+
Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des fonctions de temporisation. +
+
+

transition-timing-function: ease

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: linear

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+
+
+
{{cssxref("transition-delay")}}
+
Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. +
+
+

transition-delay: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+
+
+ +

La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :

+ +
div {
+  transition: <property> <duration> <timing-function> <delay>;
+}
+ +

Exemples

+ +

Un exemple simple

+ +

Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :

+ +
#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+}
+
+#delay:hover {
+  font-size: 36px;
+}
+ +

Appliquer une transition sur plusieurs propriétés

+ +

CSS

+ +
.box {
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  width: 200px;
+  height: 200px;
+  transform: rotate(180deg);
+}
+
+ +

HTML

+ +
<p>Cette boîte utilisera des transitions pour width, height, background-color, transform.
+   Survolez cette boîte pour voir l'effet.</p>
+<div class="box"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}

+ +

Le rôle de la taille des listes de valeurs

+ +

Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

Sera équivalent à :

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,

+ +
div {
+ transition-property: opacity, left;
+ transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

Sera équivalent à :

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

Utiliser les transitions pour accentuer les éléments pour un menu

+ +

On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.

+ +

Tout d'abord, on définit le menu en HTML :

+ +
<nav>
+  <a href="#">Accueil</a>
+  <a href="#">À propos</a>
+  <a href="#">Contact</a>
+  <a href="#">Liens</a>
+</nav>
+
+ +

On construit le CSS pour définir l'apparence du menu :

+ +
a {
+  color: #fff;
+  background-color: #333;
+  transition: all 1s ease-out;
+}
+
+a:hover,
+a:focus {
+  color: #333;
+  background-color: #fff;
+}
+ + + +

Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.

+ +

{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}

+ +

Exemples avec JavaScript

+ +

Utiliser les transitions CSS pour lisser les transformations avec JavaScript

+ +

Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :

+ +
<p>Click anywhere to move the ball</p>
+<div id="foo"></div>
+
+ +

Avec JavaScript on peut ajouter un effet de mouvement sur la balle :

+ +
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+
+ +

Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :

+ +
p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}

+ +

Détecter le début et la fin d'une transition

+ +

L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :

+ +
+
propertyName
+
Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.
+
elapsedTime
+
Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.
+
+ +

Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +

Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :

+ +
el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);
+ +
Note : L'événement transitionend n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}: none ou si la valeur de la propriété est modifiée.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '', '')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html b/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html deleted file mode 100644 index bbcdcb51e2..0000000000 --- a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html +++ /dev/null @@ -1,1094 +0,0 @@ ---- -title: Utiliser les transitions CSS -slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS -tags: - - Avancé - - CSS - - Guide - - Transitions -translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions ---- -
{{CSSref}}
- -

Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.

- -

Les animations qui utilisent des transitions entre deux états sont souvent appelées transitions implicites car l'état initial et l'état final sont définis implicitement par le navigateur.

- -

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

- -

Les transitions CSS vous permettent de choisir :

- - - -

Quelles sont les propriétés CSS qui peuvent être animées ?

- -

On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et la liste des propriétés concernées est limitée.

- -

Note : La gestion de la valeur auto représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec auto.

- -

Note : Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via .appendChild() ou en modiant display: none;. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer window.setTimeout() pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.

- -

Les propriétés CSS relatives aux transitions

- -

Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :

- -
-

Note : Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.

-
- -
-
{{cssxref("transition-property")}}
-
Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.
-
{{cssxref("transition-duration")}}
-
Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. -
-
-

transition-duration: 0.5s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 0.5s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 0.5s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 0.5s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transformv color;
-    transition-duration: 0.5s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
-
- -
-

transition-duration: 1s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
-    -webkit-transition-duration: 1s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform color;
-    transition-duration: 1s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
-    -webkit-transition-duration: 1s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 1s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("duration_1s",275,150)}}
-
- -
-

transition-duration: 2s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 2s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 2s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("duration_2s",275,150)}}
-
- -
-

transition-duration: 4s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 4s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 4s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("duration_4s",275,150)}}
-
-
-
-
{{cssxref("transition-timing-function")}}
-
Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des fonctions de temporisation. -
-
-

transition-timing-function: ease

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: ease;
-}
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: ease;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("ttf_ease",275,150)}}
-
- -
-

transition-timing-function: linear

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: linear;
-}
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: linear;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("ttf_linear",275,150)}}
-
- -
-

transition-timing-function: step-end

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: step-end;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: step-end;
-}
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: step-end;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: step-end;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("ttf_stepend",275,150)}}
-
- -
-

transition-timing-function: steps(4, end)

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: steps(4, end);
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: steps(4, end);
-}
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: steps(4, end);
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: steps(4, end);
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("ttf_step4end",275,150)}}
-
-
-
-
{{cssxref("transition-delay")}}
-
Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. -
-
-

transition-delay: 0.5s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent {
-    width: 250px;
-    height: 125px;
-}
-
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 0.5s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 0.5s;
-    transition-timing-function: linear;
-}
-
-.box1 {
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position: absolute;
-     -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 0.5s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 0.5s;
-    transition-timing-function: linear;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("delay_0_5s",275,150)}}
-
- -
-

transition-delay: 1s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent {
-    width: 250px;
-    height: 125px;
-}
-
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-     -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 1s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 1s;
-    transition-timing-function: linear;
-}
-
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 1s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 1s;
-    transition-timing-function: linear;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("delay_1s",275,150)}}
-
- -
-

transition-delay: 2s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent {
-    width: 250px;
-    height: 125px;
-}
-
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 2s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 2s;
-    transition-timing-function: linear;
-}
-
-.box1 {
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 2s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 2s;
-    transition-timing-function: linear;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("delay_2s",275,150)}}
-
- -
-

transition-delay: 4s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent {
-    width: 250px;
-    height: 125px;
-}
-
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 4s;
-    transition-timing-function: ease-in-out;
-}
-
-.box1 {
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 4s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("delay_4s",275,150)}}
-
-
-
-
- -

La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :

- -
div {
-  transition: <property> <duration> <timing-function> <delay>;
-}
- -

Exemples

- -

Un exemple simple

- -

Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :

- -
#delay {
-  font-size: 14px;
-  transition-property: font-size;
-  transition-duration: 4s;
-  transition-delay: 2s;
-}
-
-#delay:hover {
-  font-size: 36px;
-}
- -

Appliquer une transition sur plusieurs propriétés

- -

CSS

- -
.box {
-  border-style: solid;
-  border-width: 1px;
-  display: block;
-  width: 100px;
-  height: 100px;
-  background-color: #0000FF;
-  transition: width 2s, height 2s, background-color 2s, transform 2s;
-}
-
-.box:hover {
-  background-color: #FFCCCC;
-  width: 200px;
-  height: 200px;
-  transform: rotate(180deg);
-}
-
- -

HTML

- -
<p>Cette boîte utilisera des transitions pour width, height, background-color, transform.
-   Survolez cette boîte pour voir l'effet.</p>
-<div class="box"></div>
-
- -

Résultat

- -

{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}

- -

Le rôle de la taille des listes de valeurs

- -

Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :

- -
div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s;
-}
-
- -

Sera équivalent à :

- -
div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s, 3s, 5s;
-}
- -

De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,

- -
div {
- transition-property: opacity, left;
- transition-duration: 3s, 5s, 2s, 1s;
-}
- -

Sera équivalent à :

- -
div {
-  transition-property: opacity, left;
-  transition-duration: 3s, 5s;
-}
- -

Utiliser les transitions pour accentuer les éléments pour un menu

- -

On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.

- -

Tout d'abord, on définit le menu en HTML :

- -
<nav>
-  <a href="#">Accueil</a>
-  <a href="#">À propos</a>
-  <a href="#">Contact</a>
-  <a href="#">Liens</a>
-</nav>
-
- -

On construit le CSS pour définir l'apparence du menu :

- -
a {
-  color: #fff;
-  background-color: #333;
-  transition: all 1s ease-out;
-}
-
-a:hover,
-a:focus {
-  color: #333;
-  background-color: #fff;
-}
- - - -

Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.

- -

{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}

- -

Exemples avec JavaScript

- -

Utiliser les transitions CSS pour lisser les transformations avec JavaScript

- -

Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :

- -
<p>Click anywhere to move the ball</p>
-<div id="foo"></div>
-
- -

Avec JavaScript on peut ajouter un effet de mouvement sur la balle :

- -
var f = document.getElementById('foo');
-document.addEventListener('click', function(ev){
-    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
-    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
-},false);
-
- -

Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :

- -
p {
-  padding-left: 60px;
-}
-
-#foo {
-  border-radius: 50px;
-  width: 50px;
-  height: 50px;
-  background: #c00;
-  position: absolute;
-  top: 0;
-  left: 0;
-  transition: transform 1s;
-}
-
- -

{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}

- -

Détecter le début et la fin d'une transition

- -

L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :

- -
-
propertyName
-
Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.
-
elapsedTime
-
Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.
-
- -

Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :

- -
el.addEventListener("transitionend", updateTransition, true);
-
- -

Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :

- -
el.addEventListener("transitionrun", signalStart, true);
-el.addEventListener("transitionstart", signalStart, true);
- -
Note : L'événement transitionend n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}: none ou si la valeur de la propriété est modifiée.
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '', '')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_types/index.html b/files/fr/web/css/css_types/index.html new file mode 100644 index 0000000000..28f95eeef4 --- /dev/null +++ b/files/fr/web/css/css_types/index.html @@ -0,0 +1,102 @@ +--- +title: Types CSS +slug: Web/CSS/Types_CSS +tags: + - Aperçu + - CSS + - CSS Data Type + - Reference + - Type +translation_of: Web/CSS/CSS_Types +--- +
{{CSSRef}}
+ +

Le module CSS basic data types définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (< >).

+ +
+

Note : Les types de donnée CSS sont un type spécial de composant de type de valeur.

+
+ +

Référence

+ +
+
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<angle-percentage>")}}
    • +
  • {{cssxref("<angular-color-hint>")}}
    • +
  • {{cssxref("<angular-color-stop>")}}
    • +
  • {{cssxref("<attr-fallback>")}}
    • +
  • {{cssxref("<attr-name>")}}
    • +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("<calc-product>")}}
    • +
  • {{cssxref("<calc-sum>")}}
    • +
  • {{cssxref("<calc-value>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<color-stop>")}}
    • +
  • {{cssxref("<color-stop-angle>")}}
    • +
  • {{cssxref("<counter-style>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
  • {{cssxref("<dimension>")}}
    • +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<frequency-percentage>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("<ident>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<length-percentage>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<number-percentage>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
  • {{cssxref("<quote>")}}
    • +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<shape-radius>")}}
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<time-percentage>")}}
    • +
  • {{cssxref("<timing-function>")}}
    • +
  • {{cssxref("<toggle-value>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<type-or-unit>")}}
    • +
  • {{cssxref("<url>")}}
    • +
  • {{cssxref("<url-modifier>")}}
    • +
  • {{cssxref("<zero>")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values')}}{{Spec2('CSS3 Values')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_values_and_units/index.html b/files/fr/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..0c1c4f9b57 --- /dev/null +++ b/files/fr/web/css/css_values_and_units/index.html @@ -0,0 +1,494 @@ +--- +title: Valeurs et unités CSS +slug: Web/CSS/Valeurs_et_unités_CSS +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Values_and_Units +--- +
{{CSSRef}}
+ +

Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification CSS Values and Units (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.

+ +

Types de données textuels

+ + + +

Une valeur dont le type de donnée est textuel peut être un identifiant CSS (<ident>) ou une chaîne de caractères (<string>). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (<string>) doivent être délimitées par des quotes ou des doubles quotes.

+ +

Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme {{cssxref("<custom-ident>")}} ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété {{cssxref("grid-area")}}, on peut utiliser une valeur de type <custom-ident> et si on a une zone de grille nommée content, on l'indiquera sans quotes :

+ +
.item {
+  grid-area: content;
+}
+
+ +

En revanche, lorsqu'on manipule une valeur de type {{cssxref("<string>")}}, comme ça peut être le cas lorsqu'on utilise la propriété {{cssxref("content")}}, il faut l'entourer de quotes :

+ +
.item::after {
+  content: "Voici le contenu.";
+}
+
+ +

Si le type indiqué dans la spécification est <custom-ident> | <string>, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :

+ +
@keyframe identifiantValide {
+  /* on place les keyframes ici */
+}
+
+@keyframe 'chaineValide' {
+  /* on place les keyframes ici */
+}
+ +

Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être none, unset, initial ou inherit, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages {{cssxref("<custom-ident>")}} et {{cssxref("<string>")}}.

+ +

Mots-clés prédéfinis

+ +

Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.

+ +

Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété {{cssxref("break-inside")}}.

+ +
auto | avoid | avoid-page | avoid-column | avoid-region
+ +

Dans une déclaration, on pourra donc écrire (sans quote) :

+ +
.box {
+  break-inside: avoid;
+}
+
+ +

Mots-clés généraux

+ +

En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : {{cssxref("initial")}}, {{cssxref("inherit")}} et {{cssxref("unset")}}.

+ +

Le mot-clé initial représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé inherit correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.

+ +

Le mot-clé unset agit comme inherit ou initial selon que la propriété soit héritée ou non.

+ +

Une quatrième valeur, {{cssxref("revert")}}, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).

+ +

URL

+ +

Une valeur de type {{cssxref("<url>")}} s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type <string>) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.

+ +
.box {
+  background-image: url("images/mon-arriere-plan.png");
+}
+
+.box {
+  background-image: url("https://www.exammple.com/images/mon-arriere-plan.png");
+}
+
+ +

On notera que la valeur passée à url() peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur <url-token> et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page {{cssxref("<url>")}} pour plus d'informations.

+ +

Types de données numériques

+ + + +

Entiers

+ +

Un entier ({{cssxref("<integer>")}}) se compose d'un ou plusieurs chiffres entre 0 et 9 (exemple de valeurs : 1024 ou -55). Un entier peut être précédé d'un signe + ou -.

+ +

Nombres

+ +

Un nombre ({{cssxref("<number>")}}) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, 1 et 1.2 sont des nombres en CSS. Les nombres peuvent être précédés d'un signe + ou -.

+ +

Dimensions

+ +

Une valeur {{cssxref("<dimension>")}} est un nombre (<number>) suivi directement d'une unité (par exemple 10px). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (1 cm ne sera pas valide). CSS utilise les dimensions pour les types suivants :

+ + + +

Nous verrons chacun de ces types dans les sections suivantes.

+ + + +

Unités de distance

+ +

Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type {{cssxref("<length>")}}. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.

+ +

Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité em sera relative à la taille (corps) de la police pour l'élément ; l'unité vh sera relative à la hauteur de la zone d'affichage (viewport).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Récapitulatif des unités relatives
UnitéRelative à
emLa taille (corps) de police de l'élément
exLa hauteur d'un x avec la police utilisée par l'élément
capLa hauteur d'une majuscule nominale avec la police utilisée par l'élément
chLa largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)).
icLa largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).
remLa taille (corps) de police de l'élément racine
lhLa hauteur de la ligne de l'élément
rlhLa hauteur de la ligne de l'élément racine
vw1% de la largeur de la zone d'affichage (viewport)
vh1% de la hauteur de la zone d'affichage (viewport)
vi1% de la taille de la zone d'affichage sur l'axe en ligne (inline axis)
vb1% de la taille de la zone d'affichage sur l'axe de bloc (block axis)
vmin1% de la zone d'affichage selon sa plus petite dimension
vmax1% de la zone d'affichage selon sa plus grande dimension
+ +

Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité cm correspond à un centimètre physique.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Récapitulatif des unités de longueur absolue
UnitéNomÉquivalence
cmCentimètre1cm = 96px/2.54
mmMillimètre1mm = 1/10e de 1cm
QQuart de millimètre1Q = 1/40e de 1cm
inPouces (inches)1in = 2.54cm = 96px
pcPicas1pc = 1/16e de 1in
ptPoints1pt = 1/72e de 1in
pxPixels1px = 1/96e de 1in
+ +

Lorsqu'on utilise une longueur nulle (sa valeur est 0), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.

+ +

Unités angulaires

+ +

Les valeurs angulaires sont représentées avec le type {{cssxref("<angle>")}} et peuvent être décrites avec les unités suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitéNomDescription
degDegrésUn cercle se divise en 360 degrés égaux.
gradGrades/GradiansUn cercle se compose de 400 grades.
radRadiansUn cercle se compose de 2π radians.
turnToursUn cercle se compose d'un tour.
+ +

Unités temporelles

+ +

Les valeurs temporelles sont de type {{cssxref("<time>")}} et utilisent les unités suivantes.

+ + + + + + + + + + + + + + + + + + + + + +
UnitéNomDescription
sSecondes 
msMillisecondesUn millième de seconde.
+ +

Unités de fréquence

+ +

Les valeurs de fréquence ont le type {{cssxref("<frequency>")}} et utilisent les valeurs suivantes.

+ + + + + + + + + + + + + + + + + + + + + +
UnitéNomDescription
HzHertzNombre de fois par seconde.
kHzKilohertz1000 Hertz.
+ +

Unités de résolution

+ +

Les résolutions sont représentées par des valeurs de type {{cssxref("<resolution>")}}. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.

+ + + + + + + + + + + + + + + + + + + + + + +
UnitéDescription
dpiPoints par pouce.
dpcmPoints par centimètre.
dppx, xPoints par unité px.
+ +

Pourcentages

+ +

Une valeur de type {{cssxref("<percentage>")}} représente une fraction d'une autre valeur de référence.

+ +

Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.

+ +

Ainsi, si on utilise {{cssxref("width")}} avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :

+ +
.box {
+  width: 50%;
+}
+ +

Mélanges entre les pourcentages et les dimensions

+ +

Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. {{cssxref("<length-percentage>")}}). Voici les différentes unités composites qui existent :

+ + + +

Types de données spéciaux (définis via d'autres spécifications)

+ + + +

Couleur

+ +

Une valeur de type {{cssxref("<color>")}} permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification CSS Color.

+ +

Image

+ +

Une valeur de type {{cssxref("<image>")}} permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification CSS Image Values and Replaced Content Module.

+ +

Position

+ +

Le type {{cssxref("<position>")}} définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme {{cssxref("background-position")}} et est donc spécifié avec le module CSS Backgrounds and Borders.

+ +

Notations fonctionnelles (fonctions)

+ + + +

Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche ( suivie des arguments de la notation, suivis d'une parenthèse droite). Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.

+ +

Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.

+ +
+

Note : Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.

+
+ +

Certaines notations fonctionnelles historiques telles que rgba() utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Ajout des unités vi, vb, ic, cap, lh et rlh.
+ Ajout des notations fonctionnelles  min(), max() et clamp().
+ Ajout de  toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Ajout de calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Ajout des syntaxes sans virgule pour les fonctions rgb(), rgba(), hsl() et hsla(). Ajout des valeurs alpha pour  rgb() et hsl(), transformant ainsi rgba() et hsla() en alias respectifs (dépréciés).
+ Ajout du mot-clé de couleur rebeccapurple.
+ Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la valeur alpha.
+ Ajout des fonctions hwb(), device-cmyk() et color().
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions rgba(), hsl() et hsla().
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} +

Ajout des notations fonctionnelles element(), image(), image-set(), conic-gradient()

+
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Définition initiale du type image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/cssom_view/coordinate_systems/index.html b/files/fr/web/css/cssom_view/coordinate_systems/index.html new file mode 100644 index 0000000000..543167b1b6 --- /dev/null +++ b/files/fr/web/css/cssom_view/coordinate_systems/index.html @@ -0,0 +1,183 @@ +--- +title: Systèmes de coordonnées +slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées +tags: + - CSS + - CSSOM + - Coordonnées + - Guide +translation_of: Web/CSS/CSSOM_View/Coordinate_systems +--- +
{{cssref}}
+ +

Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.

+ +

Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.

+ +

Dimensions

+ +

Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).

+ +

L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.

+ +

Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.

+ +
+

Note : Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.

+
+ +

Les systèmes de coordonnées CSSOM standard

+ +

Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.

+ +

Offset

+ +

Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.

+ +

Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.

+ +

Client

+ +

Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (viewport) ou du contexte de navigation comme origine.

+ +

Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.

+ +

Page

+ +

Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).

+ +

Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.

+ +

Écran

+ +

Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).

+ +

Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.

+ +

Exemples

+ +

Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.

+ +

JavaScript

+ +

Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.

+ +

Afficher les coordonnées

+ +

Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.

+ +
let inner = document.querySelector(".inner");
+let log = document.querySelector(".log");
+
+function setCoords(e, type) {
+  let idX = type + "X";
+  let idY = type + "Y";
+
+  document.getElementById(idX).innerText = e[idX];
+  document.getElementById(idY).innerText = e[idY];
+}
+
+ +

Dans inner On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.

+ +

La fonction setCoords() prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables idX et idY sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si type vaut "page", alors idX vaudra "pageX" et idY vaudra "pageY".

+ +

Gérer les évènements liés à la souris

+ +

setCoords() est appelé par le gestionnaire d'évènements update() qui est lui même utilisé sur les différents évènements :

+ +
function update(e) {
+  setCoords(e, "offset");
+  setCoords(e, "client");
+  setCoords(e, "page");
+  setCoords(e, "screen");
+}
+
+inner.addEventListener("mouseenter", update, false);
+inner.addEventListener("mousemove", update, false);
+inner.addEventListener("mouseleave", update, false);
+ +

Le gestionnaire d'évènement update() appelle setCoords() pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.

+ +

Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.

+ +

HTML

+ +

Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <div> avec l'identifiant "log", on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.

+ +
<div class="outer">
+  <div class="inner">
+    <div class="log">
+      <p>
+        Système de coordonnées Offset : <span id="offsetX">0</span>,
+        <span id="offsetY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Client : <span id="clientX">0</span>,
+        <span id="clientY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Page : <span id="pageX">0</span>,
+        <span id="pageY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Écran : <span id="screenX">0</span>,
+        <span id="screenY">0</span>
+      </p>
+    </div>
+  </div>
+</div>
+ +
+

CSS

+ + +

Le code CSS est uniquement utilisé à des fins stylistiques. La classe "outer" est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir scroller horizontalement. La boîte "inner" est celle sur laquelle on suit les évènements.

+ +
.outer {
+  width: 1000px;
+  height: 200px;
+  background-color: red;
+}
+
+.inner {
+  position: relative;
+  width: 500px;
+  height: 150px;
+  top: 25px;
+  left: 100px;
+  background-color: blue;
+  color: white;
+  cursor: crosshair;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.log {
+  position: relative;
+  width: 100%;
+  text-align: center;
+}
+
+ +

Résultat

+ +

Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur pageX.

+ +

{{EmbedLiveSample("Exemples", 600, 250)}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" "b/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" deleted file mode 100644 index 543167b1b6..0000000000 --- "a/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Systèmes de coordonnées -slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées -tags: - - CSS - - CSSOM - - Coordonnées - - Guide -translation_of: Web/CSS/CSSOM_View/Coordinate_systems ---- -
{{cssref}}
- -

Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.

- -

Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.

- -

Dimensions

- -

Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).

- -

L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.

- -

Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.

- -
-

Note : Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.

-
- -

Les systèmes de coordonnées CSSOM standard

- -

Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.

- -

Offset

- -

Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.

- -

Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.

- -

Client

- -

Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (viewport) ou du contexte de navigation comme origine.

- -

Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.

- -

Page

- -

Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).

- -

Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.

- -

Écran

- -

Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).

- -

Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.

- -

Exemples

- -

Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.

- -

JavaScript

- -

Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.

- -

Afficher les coordonnées

- -

Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.

- -
let inner = document.querySelector(".inner");
-let log = document.querySelector(".log");
-
-function setCoords(e, type) {
-  let idX = type + "X";
-  let idY = type + "Y";
-
-  document.getElementById(idX).innerText = e[idX];
-  document.getElementById(idY).innerText = e[idY];
-}
-
- -

Dans inner On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.

- -

La fonction setCoords() prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables idX et idY sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si type vaut "page", alors idX vaudra "pageX" et idY vaudra "pageY".

- -

Gérer les évènements liés à la souris

- -

setCoords() est appelé par le gestionnaire d'évènements update() qui est lui même utilisé sur les différents évènements :

- -
function update(e) {
-  setCoords(e, "offset");
-  setCoords(e, "client");
-  setCoords(e, "page");
-  setCoords(e, "screen");
-}
-
-inner.addEventListener("mouseenter", update, false);
-inner.addEventListener("mousemove", update, false);
-inner.addEventListener("mouseleave", update, false);
- -

Le gestionnaire d'évènement update() appelle setCoords() pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.

- -

Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.

- -

HTML

- -

Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <div> avec l'identifiant "log", on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.

- -
<div class="outer">
-  <div class="inner">
-    <div class="log">
-      <p>
-        Système de coordonnées Offset : <span id="offsetX">0</span>,
-        <span id="offsetY">0</span>
-      </p>
-      <p>
-        Système de coordonnées Client : <span id="clientX">0</span>,
-        <span id="clientY">0</span>
-      </p>
-      <p>
-        Système de coordonnées Page : <span id="pageX">0</span>,
-        <span id="pageY">0</span>
-      </p>
-      <p>
-        Système de coordonnées Écran : <span id="screenX">0</span>,
-        <span id="screenY">0</span>
-      </p>
-    </div>
-  </div>
-</div>
- -
-

CSS

- - -

Le code CSS est uniquement utilisé à des fins stylistiques. La classe "outer" est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir scroller horizontalement. La boîte "inner" est celle sur laquelle on suit les évènements.

- -
.outer {
-  width: 1000px;
-  height: 200px;
-  background-color: red;
-}
-
-.inner {
-  position: relative;
-  width: 500px;
-  height: 150px;
-  top: 25px;
-  left: 100px;
-  background-color: blue;
-  color: white;
-  cursor: crosshair;
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.log {
-  position: relative;
-  width: 100%;
-  text-align: center;
-}
-
- -

Résultat

- -

Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur pageX.

- -

{{EmbedLiveSample("Exemples", 600, 250)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/descendant_combinator/index.html b/files/fr/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..5690dd95e7 --- /dev/null +++ b/files/fr/web/css/descendant_combinator/index.html @@ -0,0 +1,109 @@ +--- +title: Sélecteurs descendant +slug: Web/CSS/Sélecteurs_descendant +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme sélecteur₁ sélecteur₂) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.

+ +
/* Les éléments <li> qui sont des descendants */
+/* d'un <ul class="mon-truc"> */
+ul.mon-truc li {
+  margin: 2em;
+}
+ +

Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.

+ +

Syntaxe

+ +
selecteur1 selecteur2 { /* déclarations CSS */ }
+
+ +

Exemples

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Élément 1</div>
+    <ul>
+      <li>Sous-élément A</li>
+      <li>Sous-élément B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Élément 2</div>
+    <ul>
+      <li>Sous-élément A</li>
+      <li>Sous-élément B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.descendant")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/easing-function/index.html b/files/fr/web/css/easing-function/index.html new file mode 100644 index 0000000000..4170f065b1 --- /dev/null +++ b/files/fr/web/css/easing-function/index.html @@ -0,0 +1,275 @@ +--- +title: +slug: Web/CSS/timing-function +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/easing-function +translation_of_original: Web/CSS/timing-function +--- +
{{CSSRef}}
+ +

Le type de donnée <timing-function> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « easing functions » (en anglais).

+ +

Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("<number>")}}) allant également de 0.0 à 1.0.

+ +

+ +

Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de rebondissement.

+ +

Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).

+ +

Valeurs

+ +
+

CSS prend en charge deux types de fonctions de temporisation :

+ +
    +
  • un sous-ensemble des courbes de Bézier cubiques
    • +
  • des fonctions en escalier.
    • +
+ +

Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.

+ +

La classe de fonctions cubic-bezier()

+ +

+ +

La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.

+ +

Une courbe de Bézier cubique se définit par quatre points P0, P1, P2, et P3. P0 et P3 correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P0 est donc (0, 0) (instant initial et état initial) et P3 est (1, 1) (instant final et état final).

+ +

Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P0 et P3 sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P1 et P2 sont toutes les deux comprises dans l'intervalle [0, 1].

+ +

Les courbes de Bézier cubiques pour lesquelles les ordonnées de P1 et/ou P2 sont situées en dehors de l'intervalle [0, 1] génèreront un effet de rebondissement.

+ +

Lorsqu'on définit une courbe de Bézier invalide en CSS via cubic-bezier, le moteur ignore la déclaration dans son intégralité.

+
+ +

Syntaxe

+ +
cubic-bezier(x1, y1, x2, y2)
+
+ +

avec

+ +
+
x1, y1, x2, y2
+
qui sont des valeurs de type {{cssxref("<number>")}} représentant les abscisses et les ordonnées des points P1 et P2 définissant la courbe de Bézier cubique. x1 et x2 doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.
+
+ +

Exemples

+ +

Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :

+ +
cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+cubic-bezier(0, 0, 1, 1)
+
+/* Des valeurs négatives pour les ordonnées pour */
+/* créer du rebondissement                       */
+cubic-bezier(0.1, -0.6, 0.2, 0)
+
+/* Idem avec des valeurs > 1                     */
+cubic-bezier(0, 1.1, 0.8, 4)
+ +

En revanche, ces définitions sont invalides :

+ +
/* Bien que le type de sortie puisse être une couleur */
+/* les courbes de Bézier fonctionnent avec des ratios */
+/* numériques */
+cubic-bezier(0.1, red, 1.0, green)
+
+/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
+/* car sinon la courbe n'est pas une fonction temporelle. */
+cubic-bezier(2.45, 0.6, 4, 0.1)
+
+/* Il faut définir les deux points, il n'y a pas de valeur */
+/* par défaut. */
+cubic-bezier(0.3, 2.1)
+
+/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
+/* car sinon la courbe n'est pas une fonction temporelle. */
+cubic-bezier(-1.9, 0.3, -0.2, 2.1)
+
+ +

La classe de fonction steps()

+ +

La notation fonctionnelle steps() permet de définir une fonction en escalier qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.

+ +

+ +

steps(2, start)

+ +

+ +

steps(4, end)

+ +

Syntaxe

+ +
steps(nombre_de_marche, direction)
+
+ +

avec

+ +
+
nombre_de_marche
+
Un entier (valeur de type {{cssxref("<integer>")}} qui représente le nombre de marches composant la fonction en escalier.
+
direction
+
Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite : +
    +
  • start indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation
    • +
  • end indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.
    • +
+ end est la valeur par défaut.
+
+ +

Exemples

+ +

Voici des exemples de fonction de temporisation en escalier valides :

+ +
/* Il y a cinq marches et la dernière est utilisée */
+/* avant la fin de l'animation.                    */
+steps(5, end)
+
+/* Une fonction à deux marches dont la première se */
+/* déroule au début de l'animation.                */
+steps(2, start)
+
+/* Le deuxième paramètre est facultatif. */
+steps(2)
+
+ +

En revanche, celles-ci sont invalides :

+ +
/* Le premier paramètre doit être un entier (type */
+/* <integer>)                                     */
+steps(2.0, end)
+
+/* Le nombre d'étapes ne peut pas être négatif. */
+steps(-3, start)
+
+/* Il ne peut pas être nul.*/
+steps(0, end)
+
+ +

La classe de fonction frames()

+ +
+

Note : Le nom "frames" est actuellement en discussion et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.

+
+ +

La notation fonctionnelle frames() définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre frames() et steps() est que frames() considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.

+ +

frames(2), frames(4)

+ +

 

+ +

 

+ +

Syntaxe

+ +
steps(nombre_etapes)
+
+ +

où :

+ +
+
nombre_etapes
+
Est un entier ({{cssxref("<integer>")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.
+
+ +

Exemples

+ +

Ces fonctions de temporisation sont valides :

+ +
/* Le paramètre est un entier positif. */
+frames(10)
+
+ +
+

Note : une démo de la fonction frames() avec un exemple fonctionnel est disponible sur notre dépôt GitHub.

+
+ +

Ces fonctions de temporisation sont invalides :

+ +
/* Le paramètre passé à la fonction doit être un entier
+   et pas une valeur décimale, même si cette dernière est
+   égale à un entier. */
+frames(2.0)
+
+/* Le nombre de frames doit être positif. */
+frames(-3)
+
+/* Il doit y avoir au moins une frame. */
+frames(0)
+
+ +

Mots-clés pour les fonctions de temporisation usuelles

+ +

linear

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 1.0, 1.0). Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.

+ +

ease

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.25, 0.1, 0.25, 1.0). Cette fonction est semblable à ease-in-out sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..

+ +

ease-in

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 1.0, 1.0). L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.

+ +

ease-in-out

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 0.58, 1.0). L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.

+ +

ease-out

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 0.58, 1.0). L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.

+ +

step-start

+ +

Ce mot-clé représente la fonction de temporisation steps(1, start) (ou steps(1, jump-start)). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.

+ +

step-end

+ +

Ce mot-clé représente la fonction de temporisation steps(1, end) (ou steps(1, jump-end)). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}{{Spec2('CSS3 Animations')}}Définition de <single-timing-function> comme synonyme de <single-transition-timing-function> selon le module CSS pour les transitions.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.timing-function", 2)}}

+ +

Voir aussi

+ +
    +
  • Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <timing-function>
    • +
  • Les animations CSS
    • +
  • Les transitions CSS
    • +
diff --git a/files/fr/web/css/extensions_css_microsoft/index.html b/files/fr/web/css/extensions_css_microsoft/index.html deleted file mode 100644 index 017958249c..0000000000 --- a/files/fr/web/css/extensions_css_microsoft/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Extensions CSS de Microsoft -slug: Web/CSS/Extensions_CSS_Microsoft -tags: - - CSS - - Non-standard - - Reference -translation_of: Web/CSS/Microsoft_Extensions ---- -
{{CSSRef}}
- -

Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à CSS. Ces extensions sont préfixées par -ms.

- -

Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)

- -
-

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.

-
- -
-
    -
  • {{CSSxRef("-ms-accelerator")}}
    • -
  • {{CSSxRef("-ms-block-progression")}}
    • -
  • {{CSSxRef("-ms-content-zoom-chaining")}}
    • -
  • {{CSSxRef("-ms-content-zooming")}}
    • -
  • {{CSSxRef("-ms-content-zoom-limit")}}
    • -
  • {{CSSxRef("-ms-content-zoom-limit-max")}}
    • -
  • {{CSSxRef("-ms-content-zoom-limit-min")}}
    • -
  • {{CSSxRef("-ms-content-zoom-snap")}}
    • -
  • {{CSSxRef("-ms-content-zoom-snap-points")}}
    • -
  • {{CSSxRef("-ms-content-zoom-snap-type")}}
    • -
  • {{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-flow-from")}}
    • -
  • {{CSSxRef("-ms-flow-into")}}
    • -
  • {{CSSxRef("-ms-high-contrast-adjust")}}
    • -
  • {{CSSxRef("-ms-hyphenate-limit-chars")}}
    • -
  • {{CSSxRef("-ms-hyphenate-limit-lines")}}
    • -
  • {{CSSxRef("-ms-hyphenate-limit-zone")}}
    • -
  • {{CSSxRef("-ms-ime-align")}}
    • -
  • {{CSSxRef("-ms-overflow-style")}}
    • -
  • {{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scroll-chaining")}}
    • -
  • {{CSSxRef("-ms-scroll-limit")}}
    • -
  • {{CSSxRef("-ms-scroll-limit-x-max")}}
    • -
  • {{CSSxRef("-ms-scroll-limit-x-min")}}
    • -
  • {{CSSxRef("-ms-scroll-limit-y-max")}}
    • -
  • {{CSSxRef("-ms-scroll-limit-y-min")}}
    • -
  • {{CSSxRef("-ms-scroll-rails")}}
    • -
  • {{CSSxRef("-ms-scroll-snap-points-x")}}
    • -
  • {{CSSxRef("-ms-scroll-snap-points-y")}}
    • -
  • {{CSSxRef("-ms-scroll-snap-x")}}
    • -
  • {{CSSxRef("-ms-scroll-snap-y")}}
    • -
  • {{CSSxRef("-ms-scroll-translation")}}
    • -
  • {{CSSxRef("-ms-text-autospace")}}
    • -
  • {{CSSxRef("-ms-touch-select")}}
    • -
  • {{CSSxRef("-ms-wrap-flow")}}
    • -
  • {{CSSxRef("-ms-wrap-margin")}}
    • -
  • {{CSSxRef("-ms-wrap-through")}}
    • -
  • {{CSSxRef("zoom")}}
    • -
-
- -

Pseudo-éléments

- -
-
    -
  • {{CSSxRef("::-ms-browse")}}
    • -
  • {{CSSxRef("::-ms-check")}}
    • -
  • {{CSSxRef("::-ms-clear")}}
    • -
  • {{CSSxRef("::-ms-expand")}}
    • -
  • {{CSSxRef("::-ms-fill")}}
    • -
  • {{CSSxRef("::-ms-fill-lower")}}
    • -
  • {{CSSxRef("::-ms-fill-upper")}}
    • -
  • {{CSSxRef("::-ms-reveal")}}
    • -
  • {{CSSxRef("::-ms-thumb")}}
    • -
  • {{CSSxRef("::-ms-ticks-after")}}
    • -
  • {{CSSxRef("::-ms-ticks-before")}}
    • -
  • {{CSSxRef("::-ms-tooltip")}}
    • -
  • {{CSSxRef("::-ms-track")}}
    • -
  • {{CSSxRef("::-ms-value")}}
    • -
-
- -

Caractéristiques média

- -
-
    -
  • {{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}
    • -
-
- -

API DOM relatives à CSS

- -
-
    -
  • {{DOMxRef("msContentZoomFactor")}}
    • -
  • {{DOMxRef("msGetPropertyEnabled")}}
    • -
  • {{DOMxRef("msGetRegionContent")}}
    • -
  • {{DOMxRef("MSRangeCollection")}}
    • -
  • {{DOMxRef("msRegionOverflow")}}
    • -
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/extensions_mozilla/index.html b/files/fr/web/css/extensions_mozilla/index.html deleted file mode 100644 index 3d9acbff04..0000000000 --- a/files/fr/web/css/extensions_mozilla/index.html +++ /dev/null @@ -1,678 +0,0 @@ ---- -title: Extensions CSS de Mozilla -slug: Web/CSS/Extensions_Mozilla -tags: - - CSS - - Mozilla - - Non-standard - - Reference -translation_of: Web/CSS/Mozilla_Extensions ---- -
{{CSSRef}}
- -

Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à CSS : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe -moz.

- -

Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)

- -
-

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments XUL.

-
- -
-

B

- -
    -
  • {{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}
    • -
  • {{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-moz-box-align")}}
    • -
  • {{CSSxRef("-moz-box-direction")}}
    • -
  • {{CSSxRef("-moz-box-flex")}}
    • -
  • {{CSSxRef("-moz-box-ordinal-group")}}
    • -
  • {{CSSxRef("-moz-box-orient")}}
    • -
  • {{CSSxRef("-moz-box-pack")}}
    • -
- -

C – I

- -
    -
  • {{CSSxRef("-moz-context-properties")}}
    • -
  • {{CSSxRef("-moz-float-edge")}}
    • -
  • {{CSSxRef("-moz-force-broken-image-icon")}}
    • -
  • {{CSSxRef("-moz-image-region")}}
    • -
- -

O

- -
    -
  • {{CSSxRef("-moz-orient")}}
    • -
  • {{CSSxRef("-moz-osx-font-smoothing")}}
    • -
  • {{CSSxRef("-moz-outline-radius")}}
    • -
  • {{CSSxRef("-moz-outline-radius-bottomleft")}}
    • -
  • {{CSSxRef("-moz-outline-radius-bottomright")}}
    • -
  • {{CSSxRef("-moz-outline-radius-topleft")}}
    • -
  • {{CSSxRef("-moz-outline-radius-topright")}}
    • -
  • {{CSSxRef("overflow-clip-box")}}
    • -
  • {{CSSxRef("overflow-clip-box-block")}}
    • -
  • {{CSSxRef("overflow-clip-box-inline")}}
    • -
- -

S – Z

- -
    -
  • {{CSSxRef("-moz-stack-sizing")}}
    • -
  • {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • -
  • {{CSSxRef("-moz-user-focus")}}
    • -
  • {{CSSxRef("-moz-user-input")}}
    • -
  • {{CSSxRef("-moz-user-modify")}}
    • -
  • {{CSSxRef("-moz-window-dragging")}}
    • -
  • {{CSSxRef("-moz-window-shadow")}}
    • -
-
- -

Anciennes propriétés spécifiques, désormais standardisées

- -
-

Note : Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.

-
- -
-
    -
  • -

    A

    -
    • -
  • {{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}
    • -
  • -

    B

    -
    • -
  • {{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}
    • -
  • {{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}
    • -
  • {{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]
    • -
  • {{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}
    • -
  • {{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]
    • -
  • {{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]
    • -
  • {{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]
    • -
  • {{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]
    • -
  • {{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}
    • -
  • {{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start")}}]
    • -
  • {{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]
    • -
  • {{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]
    • -
  • {{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]
    • -
  • {{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • -

    C

    -
    • -
  • {{CSSxRef("clip-path")}} {{Experimental_Inline}} [Applying to more than SVG]
    • -
  • {{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}
    • -
  • -

    F – M

    -
    • -
  • {{CSSxRef("filter")}} {{Experimental_Inline}} [Applying to more than SVG]
    • -
  • {{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]
    • -
  • {{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]
    • -
  • {{CSSxRef("mask")}} {{Experimental_Inline}} [Applying to more than SVG]
    • -
  • -

    O

    -
    • -
  • {{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}
    • -
  • {{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • {{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • {{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • {{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • {{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • -

    P

    -
    • -
  • {{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]
    • -
  • {{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]
    • -
  • {{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Applying to more than SVG]
    • -
  • -

    T – U

    -
    • -
  • {{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}
    • -
  • {{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}
    • -
  • {{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}
    • -
  • {{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}
    • -
  • {{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}
    • -
-
- -

Valeurs

- -

Valeurs globales

- -
-
    -
  • {{cssxref("initial","-moz-initial")}}
    • -
-
- -

{{Cssxref("-moz-appearance")}}

- -
-
    -
  • button
    • -
  • button-arrow-down
    • -
  • button-arrow-next
    • -
  • button-arrow-previous
    • -
  • button-arrow-up
    • -
  • button-bevel
    • -
  • checkbox
    • -
  • checkbox-container
    • -
  • checkbox-label
    • -
  • checkmenuitem
    • -
  • dialog
    • -
  • groupbox
    • -
  • listbox
    • -
  • menuarrow
    • -
  • menucheckbox
    • -
  • menuimage
    • -
  • menuitem
    • -
  • menuitemtext
    • -
  • menulist
    • -
  • menulist-button
    • -
  • menulist-text
    • -
  • menulist-textfield
    • -
  • menupopup
    • -
  • menuradio
    • -
  • menuseparator
    • -
  • -moz-mac-unified-toolbar{{Fx_minversion_inline(3.5)}}
    • -
  • -moz-win-borderless-glass
    • -
  • -moz-win-browsertabbar-toolbox{{Fx_minversion_inline(3)}}
    • -
  • -moz-win-communications-toolbox{{Fx_minversion_inline(3)}}
    • -
  • -moz-win-glass
    • -
  • -moz-win-media-toolbox{{Fx_minversion_inline(3)}}
    • -
  • -moz-window-button-box
    • -
  • -moz-window-button-box-maximized
    • -
  • -moz-window-button-close
    • -
  • -moz-window-button-maximize
    • -
  • -moz-window-button-minimize
    • -
  • -moz-window-button-restore
    • -
  • -moz-window-titlebar
    • -
  • -moz-window-titlebar-maximized
    • -
  • progressbar
    • -
  • progresschunk
    • -
  • radio
    • -
  • radio-container
    • -
  • radio-label
    • -
  • radiomenuitem
    • -
  • resizer
    • -
  • resizerpanel
    • -
  • scale-horizontal
    • -
  • scalethumb-horizontal
    • -
  • scalethumb-vertical
    • -
  • scale-vertical
    • -
  • scrollbarbutton-down
    • -
  • scrollbarbutton-left
    • -
  • scrollbarbutton-right
    • -
  • scrollbarbutton-up
    • -
  • scrollbar-small
    • -
  • scrollbarthumb-horizontal
    • -
  • scrollbarthumb-vertical
    • -
  • scrollbartrack-horizontal
    • -
  • scrollbartrack-vertical
    • -
  • separator
    • -
  • spinner
    • -
  • spinner-downbutton
    • -
  • spinner-textfield
    • -
  • spinner-upbutton
    • -
  • statusbar
    • -
  • statusbarpanel
    • -
  • tab
    • -
  • tabpanels
    • -
  • tab-scroll-arrow-back
    • -
  • tab-scroll-arrow-forward
    • -
  • textfield
    • -
  • textfield-multiline
    • -
  • toolbar
    • -
  • toolbarbutton-dropdown
    • -
  • toolbox
    • -
  • tooltip
    • -
  • treeheadercell
    • -
  • treeheadersortarrow
    • -
  • treeitem
    • -
  • treetwisty
    • -
  • treetwistyopen
    • -
  • treeview
    • -
  • window
    • -
-
- -

{{cssxref("background-image")}}

- -
-
    -
  • -

    Dégradés {{Gecko_minversion_inline("1.9.2")}}

    - -
      -
    • {{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}
      • -
    • {{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}
      • -
    -
    • -
  • -

    Éléments {{gecko_minversion_inline("2.0")}}

    - -
      -
    • {{cssxref("-moz-element")}}
      • -
    -
    • -
  • -

    Sub-images {{gecko_minversion_inline("2.0")}}

    - -
      -
    • {{cssxref("-moz-image-rect")}}
      • -
    -
    • -
-
- -

{{Cssxref("border-color")}}

- -
-
    -
  • -moz-use-text-color {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; currentcolor doit être utilisée à la place.
    • -
-
- -

{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}

- -
-
    -
  • -moz-bg-inset{{Obsolete_Inline(1.9)}}
    • -
  • -moz-bg-outset{{Obsolete_Inline(1.9)}}
    • -
  • -moz-bg-solid{{Obsolete_Inline(1.9)}}
    • -
-
- -

Mots-clés pour {{cssxref("<color>")}}

- -
-
    -
  • -moz-activehyperlinktext
    • -
  • -moz-hyperlinktext
    • -
  • -moz-visitedhyperlinktext
    • -
  • -moz-buttondefault
    • -
  • -moz-buttonhoverface
    • -
  • -moz-buttonhovertext
    • -
  • -moz-default-background-color{{Gecko_minversion_inline("5.0")}}
    • -
  • -moz-default-color{{Gecko_minversion_inline("5.0")}}
    • -
  • -moz-cellhighlight
    • -
  • -moz-cellhighlighttext
    • -
  • -moz-field
    • -
  • -moz-fieldtext
    • -
  • -moz-dialog
    • -
  • -moz-dialogtext
    • -
  • -moz-dragtargetzone
    • -
  • -moz-mac-accentdarkestshadow
    • -
  • -moz-mac-accentdarkshadow
    • -
  • -moz-mac-accentface
    • -
  • -moz-mac-accentlightesthighlight
    • -
  • -moz-mac-accentlightshadow
    • -
  • -moz-mac-accentregularhighlight
    • -
  • -moz-mac-accentregularshadow
    • -
  • -moz-mac-chrome-active{{Gecko_minversion_inline("1.9.1")}}
    • -
  • -moz-mac-chrome-inactive{{Gecko_minversion_inline("1.9.1")}}
    • -
  • -moz-mac-focusring
    • -
  • -moz-mac-menuselect
    • -
  • -moz-mac-menushadow
    • -
  • -moz-mac-menutextselect
    • -
  • -moz-menuhover
    • -
  • -moz-menuhovertext
    • -
  • -moz-win-communicationstext{{Fx_minversion_inline(3)}}
    • -
  • -moz-win-mediatext{{gecko_minversion_inline(1.9)}}
    • -
  • -moz-nativehyperlinktext{{Gecko_minversion_inline("1.9.1")}}
    • -
-
- -

{{Cssxref("display")}}

- -
-
    -
  • -moz-box {{Deprecated_Inline}}
    • -
  • -moz-inline-block {{Obsolete_Inline}}
    • -
  • -moz-inline-box {{Deprecated_Inline}}
    • -
  • -moz-inline-grid{{Obsolete_Inline(62)}}
    • -
  • -moz-inline-stack{{Obsolete_Inline(62)}}
    • -
  • -moz-inline-table {{Obsolete_Inline}}
    • -
  • -moz-grid{{Obsolete_Inline(62)}}
    • -
  • -moz-grid-group{{Obsolete_Inline(62)}}
    • -
  • -moz-grid-line{{Obsolete_Inline(62)}}
    • -
  • -moz-groupbox{{Obsolete_Inline}}
    • -
  • -moz-deck{{Obsolete_Inline(62)}}
    • -
  • -moz-popup{{Obsolete_Inline(62)}}
    • -
  • -moz-stack{{Obsolete_Inline(62)}}
    • -
  • -moz-marker{{Obsolete_Inline(62)}}
    • -
-
- -

{{cssxref("empty-cells")}}

- -
-
    -
  • -moz-show-background (valeur par défaut en quirks mode)
    • -
-
- -

{{Cssxref("font")}}

- -
-
    -
  • -moz-button
    • -
  • -moz-info
    • -
  • -moz-desktop
    • -
  • -moz-dialog (également une couleur)
    • -
  • -moz-document
    • -
  • -moz-workspace
    • -
  • -moz-window
    • -
  • -moz-list
    • -
  • -moz-pull-down-menu
    • -
  • -moz-field (également une couleur)
    • -
-
- -

{{Cssxref("font-family")}}

- -
-
    -
  • -moz-fixed
    • -
-
- -

{{Cssxref("image-rendering")}}

- -
-
    -
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • -
-
- -

{{cssxref("<length>")}}

- -
-
    -
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • -
-
- -

{{Cssxref("list-style-type")}}

- -
-
    -
  • -moz-arabic-indic
    • -
  • -moz-bengali
    • -
  • -moz-cjk-earthly-branch
    • -
  • -moz-cjk-heavenly-stem
    • -
  • -moz-devanagari
    • -
  • -moz-ethiopic-halehame
    • -
  • -moz-ethiopic-halehame-am
    • -
  • -moz-ethiopic-halehame-ti-er
    • -
  • -moz-ethiopic-halehame-ti-et
    • -
  • -moz-ethiopic-numeric
    • -
  • -moz-gujarati
    • -
  • -moz-gurmukhi
    • -
  • -moz-hangul
    • -
  • -moz-hangul-consonant
    • -
  • -moz-japanese-formal
    • -
  • -moz-japanese-informal
    • -
  • -moz-kannada
    • -
  • -moz-khmer
    • -
  • -moz-lao
    • -
  • -moz-malayalam
    • -
  • -moz-myanmar
    • -
  • -moz-oriya
    • -
  • -moz-persian
    • -
  • -moz-simp-chinese-formal
    • -
  • -moz-simp-chinese-informal
    • -
  • -moz-tamil
    • -
  • -moz-telugu
    • -
  • -moz-thai
    • -
  • -moz-trad-chinese-formal
    • -
  • -moz-trad-chinese-informal
    • -
  • -moz-urdu
    • -
-
- -

{{Cssxref("overflow")}}

- -
-
    -
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • -
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • -
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • -
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • -
-
- -

{{Cssxref("text-align")}}

- -
-
    -
  • -moz-center
    • -
  • -moz-left
    • -
  • -moz-right
    • -
-
- -

{{Cssxref("text-decoration")}}

- -
-
    -
  • -moz-anchor-decoration
    • -
-
- -

{{Cssxref("-moz-user-select")}}

- -
-
    -
  • -moz-all
    • -
  • -moz-none
    • -
-
- -

{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}

- -
-
    -
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • -
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • -
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • -
  • -moz-available {{Fx_minversion_inline(3)}}
    • -
-
- -

Pseudo-éléments et pseudo-classes

- -
-
    -
  • -

    A – D

    -
    • -
  • {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
    • -
  • {{CSSxRef("::-moz-anonymous-positioned-block")}}
    • -
  • {{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-any-link")}} [Matches :link and :visited]
    • -
  • {{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef("::-moz-canvas")}}
    • -
  • {{CSSxRef("::-moz-color-swatch")}}
    • -
  • {{CSSxRef("::-moz-cell-content")}}
    • -
  • {{CSSxRef(":-moz-drag-over")}}
    • -
  • -

    F – I

    -
    • -
  • {{CSSxRef(":-moz-first-node")}}
    • -
  • {{CSSxRef("::-moz-focus-inner")}}
    • -
  • {{CSSxRef("::-moz-focus-outer")}}
    • -
  • {{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}
    • -
  • {{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}
    • -
  • {{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}
    • -
  • {{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}
    • -
  • {{CSSxRef("::-moz-inline-table")}}
    • -
  • -

    L

    -
    • -
  • {{CSSxRef(":-moz-last-node")}}
    • -
  • {{CSSxRef(":-moz-list-bullet")}}
    • -
  • {{CSSxRef(":-moz-list-number")}}
    • -
  • {{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • -

    N – R

    -
    • -
  • {{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}
    • -
  • {{CSSxRef(":-moz-only-whitespace")}}
    • -
  • {{CSSxRef("::-moz-page")}}
    • -
  • {{CSSxRef("::-moz-page-sequence")}}
    • -
  • {{CSSxRef("::-moz-pagebreak")}}
    • -
  • {{CSSxRef("::-moz-pagecontent")}}
    • -
  • {{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}
    • -
  • {{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}
    • -
  • {{CSSxRef("::-moz-progress-bar")}}
    • -
  • {{CSSxRef("::-moz-range-progress")}}
    • -
  • {{CSSxRef("::-moz-range-thumb")}}
    • -
  • {{CSSxRef("::-moz-range-track")}}
    • -
  • {{CSSxRef(":-moz-read-only")}}
    • -
  • {{CSSxRef(":-moz-read-write")}}
    • -
  • -

    S

    -
    • -
  • {{CSSxRef("::-moz-scrolled-canvas")}}
    • -
  • {{CSSxRef("::-moz-scrolled-content")}}
    • -
  • {{CSSxRef("::-moz-scrolled-page-sequence")}}
    • -
  • {{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}
    • -
  • {{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef("::-moz-svg-foreign-content")}}
    • -
  • -

    T

    -
    • -
  • {{CSSxRef("::-moz-table")}}
    • -
  • {{CSSxRef("::-moz-table-cell")}}
    • -
  • {{CSSxRef("::-moz-table-column")}}
    • -
  • {{CSSxRef("::-moz-table-column-group")}}
    • -
  • {{CSSxRef("::-moz-table-outer")}}
    • -
  • {{CSSxRef("::-moz-table-row")}}
    • -
  • {{CSSxRef("::-moz-table-row-group")}}
    • -
  • {{CSSxRef(":-moz-tree-cell")}}
    • -
  • {{CSSxRef(":-moz-tree-cell-text")}}
    • -
  • {{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-tree-checkbox")}}
    • -
  • {{CSSxRef(":-moz-tree-column")}}
    • -
  • {{CSSxRef(":-moz-tree-drop-feedback")}}
    • -
  • {{CSSxRef(":-moz-tree-image")}}
    • -
  • {{CSSxRef(":-moz-tree-indentation")}}
    • -
  • {{CSSxRef(":-moz-tree-line")}}
    • -
  • {{CSSxRef(":-moz-tree-progressmeter")}}
    • -
  • {{CSSxRef(":-moz-tree-row")}}
    • -
  • {{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-tree-separator")}}
    • -
  • {{CSSxRef(":-moz-tree-twisty")}}
    • -
  • -

    U – X

    -
    • -
  • {{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef("::-moz-viewport")}}
    • -
  • {{CSSxRef("::-moz-viewport-scroll")}}
    • -
  • {{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef("::-moz-xul-anonymous-block")}}
    • -
-
- -

Règles @

- -
-
    -
  • {{Cssxref("@-moz-document")}}
    • -
-
- -

Caractéristiques

- -
-
    -
  • {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}
    • -
  • {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}
    • -
  • {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}
    • -
-
- -

Autres

- -
-
    -
  • {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
    • -
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/feuilles_de_style_alternatives/index.html b/files/fr/web/css/feuilles_de_style_alternatives/index.html deleted file mode 100644 index cc96a123e1..0000000000 --- a/files/fr/web/css/feuilles_de_style_alternatives/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Feuilles de style alternatives -slug: Web/CSS/Feuilles_de_style_alternatives -tags: - - CSS - - NeedsCompatTable - - Reference -translation_of: Web/CSS/Alternative_style_sheets ---- -
{{CSSRef}}
- -

En proposant des feuilles de style alternatives, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.

- -

Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage > Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage > Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.

- -

Exemple d'application : définir des feuilles de style alternatives

- -

Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs rel="stylesheet alternate" et title="...". Ainsi :

- -
<link href="reset.css" rel="stylesheet" type="text/css">
-
-<link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut">
-<link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli">
-<link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique">
-
- -

Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante alternate pour l'attribut rel) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.

- -

Quel que soit la mise en forme choisie, les règles provenant de la feuille reset.css seront toujours appliquées.

- -

Détails

- -

Une feuille de style fera partie d'une de ces trois catégories :

- -
    -
  • Persistante (aucun rel="alternate", aucun title="") : la feuille de style s'applique au document quoi qu'il arrive
    • -
  • Préférée (aucun rel="alternate", un attribut title="..." défini) : la feuille de style est appliquée par défaut mais est désactivée si une autre feuille de style est sélectionnée. Il ne peut y avoir qu'une seule feuille de style préférée. Si plusieurs feuilles de style sont fournies avec différentes valeurs pour l'attribut title, certaines seront ignorées.
    • -
  • Alternative (rel="stylesheet alternate", un attribut title="..." défini) : la feuille de style est désactivée par défaut mais peut être sélectionnée.
    • -
- -

Lorsqu'une feuille de style contient un attribut title sur l'élément {{HTMLElement("link", "<link rel=\"stylesheet\">")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (title a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut title seront toujours appliquées.

- -

On utilisera rel="stylesheet" pour pointer vers la feuille de style par défaut et rel="alternate stylesheet" pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}La spécification CSS OM définit les concepts de nom d'ensemble de feuilles de style, le marqueur « désactivé » et le nom d'ensemble de feuilles de style CSS préférées.
- Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir quand est créée une feuille de style CSS.
-

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
- {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
- {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

- 		{{Spec2('HTML WHATWG')}}La spécification HTML définit quand et comment créer un algorithme déterminant la feuille de style CSS et qui gère les éléments <link> et <style>. Elle définit également le comportement de <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}La spécification HTML définit le concept de feuilles de style préférées et alternatives.
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 ---- -
{{CSSRef}}
- -

La fonction url() permet d'utiliser un filtre SVG afin de modifier l'apparence d'une image.

- -

Syntaxe

- -
url(emplacement)
- -

Paramètres

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

Exemple

- -
url(ressources.svg#c1)
- -

Voir aussi

- -
    -
  • {{cssxref("<filter-function>")}}
    • -
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 ---- -
{{CSSRef}}
- -

Filter Effects (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.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("filter")}}
    • -
-
- -

Fonctions CSS

- -
-
    -
  • {{cssxref("filter", "blur()", "#blur()")}}
    • -
  • {{cssxref("filter", "brightness()", "#brightness()")}}
    • -
  • {{cssxref("filter", "contrast()", "#contrast()")}}
    • -
  • {{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}
    • -
  • {{cssxref("filter", "grayscale()", "#grayscale()")}}
    • -
  • {{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}
    • -
  • {{cssxref("filter", "invert()", "#invert()")}}
    • -
  • {{cssxref("filter", "opacity()", "#opacity()")}}
    • -
  • {{cssxref("filter", "saturate()", "#saturate()")}}
    • -
  • {{cssxref("filter", "sepia()", "#sepia()")}}
    • -
  • {{cssxref("filter", "url()", "#url()")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}{{Spec2('Filters 1.0')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)EdgeIE MobileOpera MobileSafari Mobile
Support simle{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}{{CompatVersionUnknown}}{{CompatNo}}22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}} -

6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

-
-
diff --git a/files/fr/web/css/general_sibling_combinator/index.html b/files/fr/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..ea97bdbf67 --- /dev/null +++ b/files/fr/web/css/general_sibling_combinator/index.html @@ -0,0 +1,81 @@ +--- +title: Sélecteurs de voisins généraux +slug: Web/CSS/Sélecteurs_de_voisins_généraux +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.

+ +
/* Parmi tous les éléments <img>, cibler tous
+   éléments <p> qui les suivent. */
+img ~ p {
+  color: red;
+}
+ +

Syntaxe

+ +
premier_element ~ second_element { propriétés de style }
+
+ +

Exemples

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>Ici, ce n'est pas rouge.</span>
+<p>Voici un paragraphe.</p>
+<code>Un peu de code.</code>
+<span>Et un autre span.</span>
+<code>Encore du code</code>
+<span>Ici aussi, c'est rouge</span>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 280, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Ce combinateur est renommé en « subsequent-sibling combinator ».
{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.general_sibling")}}

+ +

Voir aussi

+ + 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 ---- -
{{CSSRef}}{{Deprecated_Header}}
- -
-

Note : La propriété grid-column-gap a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.

-
- -

La propriété grid-column-gap définit l'espacement entre les colonnes d'une grille.

- -
{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}
- - - -

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.

- -

Syntaxe

- -
/* 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;
-
- -

Valeurs

- -
-
<length-percentage>
-
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.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -

CSS

- -
#grid {
-  display: grid;
-  height: 100px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px;
-  grid-column-gap: 20px;
-}
-
-#grid > div {
-  background-color: lime;
-}
- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%", "100px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Box Alignment")}}Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.
{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.properties.grid-column-gap")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/h\303\251ritage/index.html" "b/files/fr/web/css/h\303\251ritage/index.html" deleted file mode 100644 index c5595da1e4..0000000000 --- "a/files/fr/web/css/h\303\251ritage/index.html" +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Héritage -slug: Web/CSS/Héritage -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/inheritance ---- -
{{CSSRef}}
- -

Pour chaque propriété CSS, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.

- -

Propriétés héritées

- -

Lorsqu'aucune valeur n'est spécifiée pour une propriété héritée sur un élément, l'élément récupère la valeur calculée de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède la valeur initiale donnée via la spécification.

- -

Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :

- -
 p { color: green; }
-
- -

Sur le fragment HTML suivant :

- -
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
-
- -

On obtient le résultat suivant :

- -

{{EmbedLiveSample("Propriétés_héritées")}}

- -

Les mots « texte mis en emphase » apparaîtront en vert, car l'élément em a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément p. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).

- -

Propriétés non héritées

- -

Lorsqu'aucune valeur n'est définie pour un élément, pour une propriété non héritée, l'élément prendra la valeur initiale de cette propriété (telle qu'indiquée par la spécification).

- -

Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :

- -
 p { border: medium solid; }
-
- -

Sur le fragment de code HTML :

- -
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
-
- -

On obtient le résultat suivant :

- -

{{EmbedLiveSample("Propriétés_non_héritées")}}

- -

Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est none).

- -

Notes

- -

Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.

- -

Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.

- -

Ainsi :

- -
font: {
-  all: revert;
-  font-size: 200%;
-  font-weight: bold;
-}
- -

permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.

- -

Voir aussi

- - diff --git a/files/fr/web/css/id_selectors/index.html b/files/fr/web/css/id_selectors/index.html new file mode 100644 index 0000000000..aa9a2141bc --- /dev/null +++ b/files/fr/web/css/id_selectors/index.html @@ -0,0 +1,87 @@ +--- +title: Sélecteurs d'ID +slug: Web/CSS/Sélecteurs_d_ID +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.

+ +
/* L'élément avec l'identifiant id="demo" */
+#demo {
+  border: red 2px solid;
+}
+ +

Syntaxe

+ +
#valeur_identifiant { déclarations }
+ +
+

Note : Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:

+ +
[id=valeur_identifiant] { déclarations }
+
+ +

Exemples

+ +

CSS

+ +
#identifie {
+  background-color: blue;
+}
+
+ +

HTML

+ +
<span id="identifie">Voici un span avec du texte.</span>
+<span>Et un autre (mais sans identifiant).</span>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 200, 50)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.id")}}

diff --git "a/files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" "b/files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" deleted file mode 100644 index 98f3c88b72..0000000000 --- "a/files/fr/web/css/impl\303\251mentation_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 ---- -
{{CSSRef}}{{Draft}}
- -
-

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

- - -
- -

Mozilla gère un certain nombre d'extensions CSS préfixées par -moz-. 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.

- -

Propriétés

- -

...

- -

Valeurs

- -

...

- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

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

{{Index("/fr/docs/Web/CSS")}}

diff --git a/files/fr/web/css/inheritance/index.html b/files/fr/web/css/inheritance/index.html new file mode 100644 index 0000000000..c5595da1e4 --- /dev/null +++ b/files/fr/web/css/inheritance/index.html @@ -0,0 +1,76 @@ +--- +title: Héritage +slug: Web/CSS/Héritage +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/inheritance +--- +
{{CSSRef}}
+ +

Pour chaque propriété CSS, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.

+ +

Propriétés héritées

+ +

Lorsqu'aucune valeur n'est spécifiée pour une propriété héritée sur un élément, l'élément récupère la valeur calculée de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède la valeur initiale donnée via la spécification.

+ +

Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :

+ +
 p { color: green; }
+
+ +

Sur le fragment HTML suivant :

+ +
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
+
+ +

On obtient le résultat suivant :

+ +

{{EmbedLiveSample("Propriétés_héritées")}}

+ +

Les mots « texte mis en emphase » apparaîtront en vert, car l'élément em a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément p. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).

+ +

Propriétés non héritées

+ +

Lorsqu'aucune valeur n'est définie pour un élément, pour une propriété non héritée, l'élément prendra la valeur initiale de cette propriété (telle qu'indiquée par la spécification).

+ +

Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :

+ +
 p { border: medium solid; }
+
+ +

Sur le fragment de code HTML :

+ +
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
+
+ +

On obtient le résultat suivant :

+ +

{{EmbedLiveSample("Propriétés_non_héritées")}}

+ +

Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est none).

+ +

Notes

+ +

Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.

+ +

Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.

+ +

Ainsi :

+ +
font: {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/initial_value/index.html b/files/fr/web/css/initial_value/index.html new file mode 100644 index 0000000000..eedda54344 --- /dev/null +++ b/files/fr/web/css/initial_value/index.html @@ -0,0 +1,53 @@ +--- +title: Valeur initiale +slug: Web/CSS/Valeur_initiale +tags: + - CSS + - Reference +translation_of: Web/CSS/initial_value +--- +
{{CSSRef}}
+ +

La valeur initiale d'une propriété CSS est définie par la spécification et varie selon qu'une propriété est héritée ou non.

+ + + +

Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
CSS Cascade 4 Définition formelle.
{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}{{Spec2("CSS2.1")}}Définition implicite.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/inline_formatting_context/index.html b/files/fr/web/css/inline_formatting_context/index.html new file mode 100644 index 0000000000..bb40bcce6d --- /dev/null +++ b/files/fr/web/css/inline_formatting_context/index.html @@ -0,0 +1,63 @@ +--- +title: Contexte de formatage en ligne (inline/incise) +slug: Web/CSS/Contexte_de_formatage_en_ligne +tags: + - CSS + - Guide +translation_of: Web/CSS/Inline_formatting_context +--- +

{{CSSRef}}

+ +

Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (inline formatting context).

+ +

Concepts-clés

+ +

Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :

+ +
    +
  • Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.
    • +
  • Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.
    • +
+ +

Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns un contexte de formatage de bloc au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}

+ +

Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (line box). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.

+ +

Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (padding) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <span> est coupée au passage à la ligne.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}

+ +

Les marges, les bordures et le remplissage (padding) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <span> qui a été ajouté.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}

+ +
+

Note : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir les propriétés et les valeurs logiques en CSS.

+
+ +

Alignement sur la direction de bloc (block)

+ +

Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, vertical-align ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser vertical-align afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur top mais vous pouvez le modifier en utilisant middle, bottom ou encore baseline.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}

+ +

Alignement le long de la direction en ligne (inline)

+ +

S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de text-align afin d'utiliser end.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}

+ +

Effets du flottement (float)

+ +

Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

Voir aussi

+ + 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..42385f1590 --- /dev/null +++ b/files/fr/web/css/inset-block-end/index.html @@ -0,0 +1,126 @@ +--- +title: inset-block-end +slug: inset-block-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-block-end définit la fin du décalage logique en bloc (block) 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")}}.

+ +
+

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-block-end. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification.

+
+ +
/* 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;
+
+ +

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.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-block-end peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-end: 20px;
+  background-color: #c8c800;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-block-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("top")}}
      • +
    • {{cssxref("right")}}
      • +
    • {{cssxref("bottom")}}
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • Les autres propriétés qui définissent les décalages logiques +
      +
    • {{cssxref("inset-block-start")}}
      • +
    • {{cssxref("inset-inline-start")}}
      • +
    • {{cssxref("inset-inline-end")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
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..a37255de60 --- /dev/null +++ b/files/fr/web/css/inset-block-start/index.html @@ -0,0 +1,124 @@ +--- +title: inset-block-start +slug: inset-block-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-block-start définit le début du décalage logique en bloc (block) 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")}}.

+ +
+

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-block-start. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

+
+ +
/* 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;
+
+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-block-start peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-block-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("top")}}
      • +
    • {{cssxref("right")}}
      • +
    • {{cssxref("bottom")}}
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • Les propriétés qui définissent les autres décalages logiques +
      +
    • {{cssxref("inset-block-end")}}
      • +
    • {{cssxref("offset-inline-end")}}
      • +
    • {{cssxref("offset-inline-start")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
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..0ca3f374a9 --- /dev/null +++ b/files/fr/web/css/inset-inline-end/index.html @@ -0,0 +1,126 @@ +--- +title: inset-inline-end +slug: inset-inline-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-inline-end définit la fin du décalage logique en ligne (inline) 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")}}.

+ +
+

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-inline-end. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

+
+ +
/* 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;
+
+ +

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.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-inline-end peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-inline-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("top")}}
      • +
    • {{cssxref("right")}}
      • +
    • {{cssxref("bottom")}}
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • Les propriétés qui définissent les autres décalages : +
      +
    • {{cssxref("inset-block-start")}},
      • +
    • {{cssxref("inset-block-end")}},
      • +
    • {{cssxref("inset-inline-start")}}
      • +
    +
    • +
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..5bd6fd70f9 --- /dev/null +++ b/files/fr/web/css/inset-inline-start/index.html @@ -0,0 +1,120 @@ +--- +title: inset-inline-start +slug: inset-inline-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-inline-start définit le début du décalage logique en ligne (inline) 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")}}.

+ +
+

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-inline-start. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

+
+ +
/* 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;
+
+ +

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.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-inline-start peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-inline-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("top")}}
      • +
    • {{cssxref("right")}}
      • +
    • {{cssxref("bottom")}}
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • 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")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git "a/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" "b/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" deleted file mode 100644 index a7c76a2c4e..0000000000 --- "a/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Jeux de caractères CSS -slug: Web/CSS/Jeux_de_caractères_CSS -tags: - - Aperçu - - CSS - - CSS Charsets - - Reference -translation_of: Web/CSS/CSS_Charsets ---- -
{{CSSRef}}
- -

Les jeux de caractères pour CSS est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.

- -

Référence

- -

Règles @

- -
-
    -
  • {{cssxref("@charset")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

Règle-@ @charset

- - - -

{{Compat("css.at-rules.charset")}}

diff --git "a/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" "b/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" deleted file mode 100644 index be032d79cd..0000000000 --- "a/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Bas de page adhérant -slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant -tags: - - CSS - - Guide - - Recette -translation_of: Web/CSS/Layout_cookbook/Sticky_footers ---- -
{{CSSRef}}
- -

Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.

- -

A sticky footer pushed to the bottom of a box

- -

Spécifications sommaires

- -

Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :

- -
    -
  • Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit
    • -
  • Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.
    • -
- -

Recette

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

- -
-

Note : Télécharger cet example

-
- -
-

Note : Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec min-height: 100% afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur 100vh sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.

-
- -

Choix effectués

- -

Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément .wrapper a une hauteur minimale de 100%, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.

- -

Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste 1fr et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec 1fr, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.

- -

Méthodes alternatives

- -

Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (flexbox) pour avoir une note de bas de page adhérante.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

- -

On commence de la même façon mais on utilise display:flex plutôt que display:grid sur .wrapper. On définit flex-direction avec la valeur column afin d'avoir une organisation verticale. Pour le contenu principal, on utilise flex-grow: 1 et pour les deux autres éléments, on utilise flex-shrink: 0. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.

- -

Compatibilité des navigateurs

- -

grid-template-rows

- -

{{Compat("css.properties.grid-template-rows")}}

- -

flex-direction

- -

{{Compat("css.properties.flex-direction")}}

- -

flex-grow

- -

{{Compat("css.properties.flex-grow")}}

- -

flex-shrink

- -

{{Compat("css.properties.flex-shrink")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html new file mode 100644 index 0000000000..8ba8d1ea7e --- /dev/null +++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -0,0 +1,49 @@ +--- +title: Fil d'Ariane (breadcrumb) +slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb +tags: + - CSS + - Navigation +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{CSSRef}}
+ +

La navigation avec un fil d'Ariane (breadcrumb) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane qui permette de revenir à la page de départ.

+ +

Links displayed inline with separators

+ +

Spécifications sommaires

+ +

Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Choix effectués

+ +

L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.

+ +

Accessibilité

+ +

On utilise ici les attributs aria-label et aria-current afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.

+ +

Compatibilité des navigateurs

+ + + +

Boîtes flexibles

+ +

{{Compat("css.properties.flex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/card/index.html b/files/fr/web/css/layout_cookbook/card/index.html new file mode 100644 index 0000000000..f363a49f0d --- /dev/null +++ b/files/fr/web/css/layout_cookbook/card/index.html @@ -0,0 +1,81 @@ +--- +title: Carte +slug: Web/CSS/Layout_cookbook/Carte +tags: + - CSS + - CSS Grid + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Card +--- +

{{CSSRef}}

+ +

Dans ce guide, nous verrons comment créer des cartes (cards en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.

+ +

Three card components in a row

+ +

Spécifications sommaires

+ +

Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.

+ +

Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.

+ +

Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.

+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Chaque carte est organisée en utilisant une grille CSS bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :

+ +
.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}
+ +

La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de 1fr. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.

+ +

Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.

+ +
+

Note : Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (subgrid), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.

+
+ +

Méthodes alternatives

+ +

On pourrait également utiliser les boîtes flexibles pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.

+ +

Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser une disposition multi-colonnes où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).

+ +

Voir la recette sur les colonnes pour observer ces méthodes en action.

+ +

Accessibilité

+ +

Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article Inclusive Components: Card (en anglais), écrit par Heydon Pickering, pour des explications détaillées à ce propos.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/carte/index.html deleted file mode 100644 index f363a49f0d..0000000000 --- a/files/fr/web/css/layout_cookbook/carte/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Carte -slug: Web/CSS/Layout_cookbook/Carte -tags: - - CSS - - CSS Grid - - Guide - - Recette -translation_of: Web/CSS/Layout_cookbook/Card ---- -

{{CSSRef}}

- -

Dans ce guide, nous verrons comment créer des cartes (cards en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.

- -

Three card components in a row

- -

Spécifications sommaires

- -

Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.

- -

Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.

- -

Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.

- -

Recette

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

- -
-

Note : Télécharger cet exemple.

-
- -

Choix effectués

- -

Chaque carte est organisée en utilisant une grille CSS bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :

- -
.card {
-  display: grid;
-  grid-template-rows: max-content 200px 1fr;
-}
- -

La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de 1fr. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.

- -

Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.

- -
-

Note : Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (subgrid), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.

-
- -

Méthodes alternatives

- -

On pourrait également utiliser les boîtes flexibles pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.

- -

Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser une disposition multi-colonnes où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).

- -

Voir la recette sur les colonnes pour observer ces méthodes en action.

- -

Accessibilité

- -

Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article Inclusive Components: Card (en anglais), écrit par Heydon Pickering, pour des explications détaillées à ce propos.

- -

Compatibilité des navigateurs

- -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

- - - -

grid-template-columns

- -

{{Compat("css.properties.grid-template-columns")}}

- -

grid-template-rows

- -

{{Compat("css.properties.grid-template-rows")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.html b/files/fr/web/css/layout_cookbook/center_an_element/index.html new file mode 100644 index 0000000000..c4d1fb52c3 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.html @@ -0,0 +1,59 @@ +--- +title: Centrer un élément +slug: Web/CSS/Layout_cookbook/Centrer_un_element +tags: + - Alignement + - CSS + - Layout + - centrer + - flexbox + - recettes +translation_of: Web/CSS/Layout_cookbook/Center_an_element +--- +
{{CSSRef}}
+ +

Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.

+ +

an element centered inside a larger box

+ +

Spécifications sommaires

+ +

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Choix effectués

+ +

Pour centrer une boîte dans une autre, on a donné au contenant une propriété display: flex.

+ +

Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur center pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur center pour centrer horizontalement.

+ +

À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.
+ Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.

+ + + +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html deleted file mode 100644 index c4d1fb52c3..0000000000 --- a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Centrer un élément -slug: Web/CSS/Layout_cookbook/Centrer_un_element -tags: - - Alignement - - CSS - - Layout - - centrer - - flexbox - - recettes -translation_of: Web/CSS/Layout_cookbook/Center_an_element ---- -
{{CSSRef}}
- -

Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.

- -

an element centered inside a larger box

- -

Spécifications sommaires

- -

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

- -

Recette

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

Choix effectués

- -

Pour centrer une boîte dans une autre, on a donné au contenant une propriété display: flex.

- -

Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur center pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur center pour centrer horizontalement.

- -

À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.
- Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.

- -

Compatibilité des navigateurs

- -

Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.

- - - -

align-items

- -

{{Compat("css.properties.align-items")}}

- -

justify-content

- -

{{Compat("css.properties.justify-content")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.html b/files/fr/web/css/layout_cookbook/column_layouts/index.html new file mode 100644 index 0000000000..140cc9a35a --- /dev/null +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.html @@ -0,0 +1,129 @@ +--- +title: Disposition en colonnes +slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes +tags: + - CSS + - Guide + - Multi-col + - flexbox + - grid +translation_of: Web/CSS/Layout_cookbook/Column_layouts +--- +
{{CSSRef}}
+ +

Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.

+ +

three different styles of layouts which have two columns in the container.

+ +

Prérequis

+ +

Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :

+ +
    +
  • Un fil continu qui se divise en colonne, à la façon d'un journal papier.
    • +
  • Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.
    • +
  • Plusieurs lignes et colonnes qui sont alignées.
    • +
+ +

Les « recettes »

+ +

Selon le scénario souhaité, on utilisera différentes méthodes de disposition.

+ +

Un fil continu de contenu - Disposition multi-colonnes

+ +

En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.

+ +

L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utilisera une disposition multi-colonnes lorsque :

+ +
    +
  • On souhaite organiser le texte à la façon d'un journal imprimé
    • +
  • On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes
    • +
  • Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.
    • +
+ +

Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles

+ +

Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur row. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.

+ +

À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur wrap sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utilisera les boîtes flexibles pour :

+ +
    +
  • Organiser des lignes ou colonnes d'objets indépendantes
    • +
  • Aligner les objets sur l'axe orthogonal au sens de lecture
    • +
  • Les cas où l'alignement d'une ligne sur l'autre n'est pas important
    • +
+ +

Aligner des objets en lignes et colonnes — Utilisation d'une grille

+ +

Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utiliser les grilles CSS lorsque :

+ +
    +
  • On a des éléments/objets à organiser sur plusieurs lignes et colonnes
    • +
  • On souhaite pouvoir aligner les éléments sur les deux axes
    • +
+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

column-width

+ +

{{Compat("css.properties.column-width")}}

+ +

column-rule

+ +

{{Compat("css.properties.column-rule")}}

+ +

flex

+ +

{{Compat("css.properties.flex")}}

+ +

flex-wrap

+ +

{{Compat("css.properties.flex-wrap")}}

+ +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" deleted file mode 100644 index 7223cde7ef..0000000000 --- "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Cookbook template -slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template -tags: - - CSS - - Meta -translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template ---- -

{{CSSRef}}

- -
Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.
-Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.
- -

Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.

- -

Spécifications sommaires

- -

Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.

- -

Recette

- -

Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

- -

Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.

- -
-

Note : Télécharger cet exemple.

-
- -

Choix effectués

- -

Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.

- -

Méthodes de recours ou alternatives

- -

S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.

- -

Accessibilité

- -

Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.

- -

Compatibilité des navigateurs

- -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

- - - -

Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant align-items.

- -

align-items

- -

{{Compat("css.properties.align-items")}}

- -

Voir aussi

- -
    -
  • Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}
    • -
  • Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte
    • -
  • Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.
    • -
diff --git "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" deleted file mode 100644 index b356d20339..0000000000 --- "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Contribuer à une recette -slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette -tags: - - CSS - - Guide - - MDN - - Meta -translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe ---- -
{{CSSRef}}
- -

Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.

- -

Qu'est-ce qu'une « bonne » recette ?

- -

Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web. Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.

- -
-

Note quant à la traduction et aux recettes en anglais : Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.

-
- -

Les étapes pour la publication

- -

Une recette se décompose comme suit :

- -
    -
  1. Un exemple interactif, stocké sur le dépôt GitHub des exemples CSS
    2. -
  2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.
    3. -
  3. Une page MDN, rattachée à la section Livre de recettes CSS qui contient : -
      -
    1. Les spécifications sommaires
      2. -
    2. La recette
      3. -
    3. Les choix effectués
      4. -
    4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)
      5. -
    5. Les points relatifs à l'accessibilité
      6. -
    6. La compatibilité des navigateurs
      7. -
    7. D'éventuelles ressources additionnelles
      8. -
    -
    4. -
- -

1. Construire le motif

- -

Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.

- -

Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.

- -

2. Créer un exemple interactif

- -

Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.

- -

Créez un fork du dépôt des exemples CSS puis étudiez le dossier css-cookbook. Ce dernier contient un fichier cookbook-template.html dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire css-cookbook avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.

- -

Voici les quelques éléments importants.

- -

Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.

- -

Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.

- -

Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe preview puis dans l'élément textarea playable-html.

- -

Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  playable-css.

- -

Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter center.html qui est utilisé sur la page Comment centrer un élément.

- -

Si vous avez créé un fork du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.

- -

Quelques conseils

- -
    -
  1. N'indentez pas le code CSS et HTML à l'intérieur des textarea par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir center.html par exemple).
    2. -
  2. Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.
    3. -
  3. Vous pouvez ajuster la hauteur des textarea en modifiant la hauteur dans les styles inline/en incise.
    4. -
- -

3. Créer une version téléchargeable

- -

L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant --download au nom. Ainsi, center.html possède une version téléchargeable intitulée center--download.html. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à body et qui sont dans la feuille de style intégrée. Vous pouvez consulter cookbook-template--download.html comme exemple et point de départ.

- -

4. Réaliser une pull request avec votre exemple

- -

Ouvrez une pull request depuis votre fork vers le dépôt des exemples CSS. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la pull request, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.

- -

5. Créer la page sur MDN

- -

Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et des permissions pour la création de page. Vous pourrez alors créer une page comme sous-page de la section. Cette page modèle pourra vous servir de point de départ pour votre contenu.

- -

Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.

- -
-

Note de traduction : Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter la page modèle en français.

-
- -

Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.

- -

Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur le forum Discourse de MDN ou à venir discuter sur IRC (ces deux canaux sont principalement anglophones).

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html new file mode 100644 index 0000000000..7223cde7ef --- /dev/null +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html @@ -0,0 +1,62 @@ +--- +title: Cookbook template +slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template +tags: + - CSS + - Meta +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +--- +

{{CSSRef}}

+ +
Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.
+Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.
+ +

Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.

+ +

Spécifications sommaires

+ +

Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.

+ +

Recette

+ +

Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +

Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.

+ +

Méthodes de recours ou alternatives

+ +

S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.

+ +

Accessibilité

+ +

Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant align-items.

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

Voir aussi

+ +
    +
  • Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}
    • +
  • Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte
    • +
  • Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.
    • +
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html new file mode 100644 index 0000000000..b356d20339 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html @@ -0,0 +1,104 @@ +--- +title: Contribuer à une recette +slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette +tags: + - CSS + - Guide + - MDN + - Meta +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe +--- +
{{CSSRef}}
+ +

Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.

+ +

Qu'est-ce qu'une « bonne » recette ?

+ +

Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web. Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.

+ +
+

Note quant à la traduction et aux recettes en anglais : Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.

+
+ +

Les étapes pour la publication

+ +

Une recette se décompose comme suit :

+ +
    +
  1. Un exemple interactif, stocké sur le dépôt GitHub des exemples CSS
    2. +
  2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.
    3. +
  3. Une page MDN, rattachée à la section Livre de recettes CSS qui contient : +
      +
    1. Les spécifications sommaires
      2. +
    2. La recette
      3. +
    3. Les choix effectués
      4. +
    4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)
      5. +
    5. Les points relatifs à l'accessibilité
      6. +
    6. La compatibilité des navigateurs
      7. +
    7. D'éventuelles ressources additionnelles
      8. +
    +
    4. +
+ +

1. Construire le motif

+ +

Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.

+ +

Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.

+ +

2. Créer un exemple interactif

+ +

Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.

+ +

Créez un fork du dépôt des exemples CSS puis étudiez le dossier css-cookbook. Ce dernier contient un fichier cookbook-template.html dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire css-cookbook avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.

+ +

Voici les quelques éléments importants.

+ +

Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.

+ +

Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.

+ +

Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe preview puis dans l'élément textarea playable-html.

+ +

Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  playable-css.

+ +

Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter center.html qui est utilisé sur la page Comment centrer un élément.

+ +

Si vous avez créé un fork du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.

+ +

Quelques conseils

+ +
    +
  1. N'indentez pas le code CSS et HTML à l'intérieur des textarea par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir center.html par exemple).
    2. +
  2. Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.
    3. +
  3. Vous pouvez ajuster la hauteur des textarea en modifiant la hauteur dans les styles inline/en incise.
    4. +
+ +

3. Créer une version téléchargeable

+ +

L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant --download au nom. Ainsi, center.html possède une version téléchargeable intitulée center--download.html. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à body et qui sont dans la feuille de style intégrée. Vous pouvez consulter cookbook-template--download.html comme exemple et point de départ.

+ +

4. Réaliser une pull request avec votre exemple

+ +

Ouvrez une pull request depuis votre fork vers le dépôt des exemples CSS. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la pull request, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.

+ +

5. Créer la page sur MDN

+ +

Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et des permissions pour la création de page. Vous pourrez alors créer une page comme sous-page de la section. Cette page modèle pourra vous servir de point de départ pour votre contenu.

+ +

Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.

+ +
+

Note de traduction : Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter la page modèle en français.

+
+ +

Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.

+ +

Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur le forum Discourse de MDN ou à venir discuter sur IRC (ces deux canaux sont principalement anglophones).

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html deleted file mode 100644 index 140cc9a35a..0000000000 --- a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Disposition en colonnes -slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes -tags: - - CSS - - Guide - - Multi-col - - flexbox - - grid -translation_of: Web/CSS/Layout_cookbook/Column_layouts ---- -
{{CSSRef}}
- -

Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.

- -

three different styles of layouts which have two columns in the container.

- -

Prérequis

- -

Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :

- -
    -
  • Un fil continu qui se divise en colonne, à la façon d'un journal papier.
    • -
  • Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.
    • -
  • Plusieurs lignes et colonnes qui sont alignées.
    • -
- -

Les « recettes »

- -

Selon le scénario souhaité, on utilisera différentes méthodes de disposition.

- -

Un fil continu de contenu - Disposition multi-colonnes

- -

En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.

- -

L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

On utilisera une disposition multi-colonnes lorsque :

- -
    -
  • On souhaite organiser le texte à la façon d'un journal imprimé
    • -
  • On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes
    • -
  • Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.
    • -
- -

Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles

- -

Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur row. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.

- -

À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur wrap sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

On utilisera les boîtes flexibles pour :

- -
    -
  • Organiser des lignes ou colonnes d'objets indépendantes
    • -
  • Aligner les objets sur l'axe orthogonal au sens de lecture
    • -
  • Les cas où l'alignement d'une ligne sur l'autre n'est pas important
    • -
- -

Aligner des objets en lignes et colonnes — Utilisation d'une grille

- -

Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

On utiliser les grilles CSS lorsque :

- -
    -
  • On a des éléments/objets à organiser sur plusieurs lignes et colonnes
    • -
  • On souhaite pouvoir aligner les éléments sur les deux axes
    • -
- -

Compatibilité des navigateurs

- -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

- - - -

column-width

- -

{{Compat("css.properties.column-width")}}

- -

column-rule

- -

{{Compat("css.properties.column-rule")}}

- -

flex

- -

{{Compat("css.properties.flex")}}

- -

flex-wrap

- -

{{Compat("css.properties.flex-wrap")}}

- -

grid-template-columns

- -

{{Compat("css.properties.grid-template-columns")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html new file mode 100644 index 0000000000..6c3f1d171f --- /dev/null +++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html @@ -0,0 +1,53 @@ +--- +title: Liste de groupes avec indicateurs +slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/Layout_cookbook/List_group_with_badges +--- +

{{CSSRef}}

+ +

Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (badge).

+ +

A list of items with a badge indicating a count displayed to the right of the text.

+ +

Spécifications sommaires

+ +

Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}

+ +

Note : Télécharger l'exemple.

+ +

Choix effectués

+ +

Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.

+ +

Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété justify-content avec la valeur space-between. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.

+ +

Pour aligner le contenu horizontalement, on utilise la propriété align-items afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser align-items: flex-start à la place.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.

+ + + +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html deleted file mode 100644 index 6c3f1d171f..0000000000 --- a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Liste de groupes avec indicateurs -slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/Layout_cookbook/List_group_with_badges ---- -

{{CSSRef}}

- -

Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (badge).

- -

A list of items with a badge indicating a count displayed to the right of the text.

- -

Spécifications sommaires

- -

Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.

- -

Exemple appliqué

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}

- -

Note : Télécharger l'exemple.

- -

Choix effectués

- -

Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.

- -

Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété justify-content avec la valeur space-between. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.

- -

Pour aligner le contenu horizontalement, on utilise la propriété align-items afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser align-items: flex-start à la place.

- -

Compatibilité des navigateurs

- -

Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.

- - - -

justify-content

- -

{{Compat("css.properties.justify-content")}}

- -

align-items

- -

{{Compat("css.properties.align-items")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html deleted file mode 100644 index 8ba8d1ea7e..0000000000 --- a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Fil d'Ariane (breadcrumb) -slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb -tags: - - CSS - - Navigation -translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation ---- -
{{CSSRef}}
- -

La navigation avec un fil d'Ariane (breadcrumb) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane qui permette de revenir à la page de départ.

- -

Links displayed inline with separators

- -

Spécifications sommaires

- -

Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.

- -

Exemple appliqué

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

- -
-

Note : Télécharger cet exemple

-
- -

Choix effectués

- -

L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.

- -

Accessibilité

- -

On utilise ici les attributs aria-label et aria-current afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.

- -

Compatibilité des navigateurs

- - - -

Boîtes flexibles

- -

{{Compat("css.properties.flex")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" "b/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" deleted file mode 100644 index 24cc872422..0000000000 --- "a/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Navigation segmentée -slug: Web/CSS/Layout_cookbook/Navigation_segmentée -tags: - - CSS - - Navigation - - flexbox -translation_of: Web/CSS/Layout_cookbook/Split_Navigation ---- -
{{CSSRef}}
- -

Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.

- -

Items separated into two groups.

- -

Spécifications sommaires

- -

Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.

- -

Exemple appliqué

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

- -
-

Note : Télécharger cet exemple.

-
- -

Choix effectués

- -

Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.

- -

Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et pousse le bloc au milieu.

- -

Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe push à n'importe quel élément de la liste.

- -

Compatibilité des navigateurs

- - - -

Boîtes flexibles

- -

{{Compat("css.properties.flex")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/split_navigation/index.html b/files/fr/web/css/layout_cookbook/split_navigation/index.html new file mode 100644 index 0000000000..24cc872422 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/split_navigation/index.html @@ -0,0 +1,48 @@ +--- +title: Navigation segmentée +slug: Web/CSS/Layout_cookbook/Navigation_segmentée +tags: + - CSS + - Navigation + - flexbox +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.

+ +

Items separated into two groups.

+ +

Spécifications sommaires

+ +

Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.

+ +

Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et pousse le bloc au milieu.

+ +

Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe push à n'importe quel élément de la liste.

+ +

Compatibilité des navigateurs

+ + + +

Boîtes flexibles

+ +

{{Compat("css.properties.flex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/sticky_footers/index.html b/files/fr/web/css/layout_cookbook/sticky_footers/index.html new file mode 100644 index 0000000000..be032d79cd --- /dev/null +++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.html @@ -0,0 +1,73 @@ +--- +title: Bas de page adhérant +slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant +tags: + - CSS + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Sticky_footers +--- +
{{CSSRef}}
+ +

Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.

+ +

A sticky footer pushed to the bottom of a box

+ +

Spécifications sommaires

+ +

Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :

+ +
    +
  • Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit
    • +
  • Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.
    • +
+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

+ +
+

Note : Télécharger cet example

+
+ +
+

Note : Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec min-height: 100% afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur 100vh sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.

+
+ +

Choix effectués

+ +

Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément .wrapper a une hauteur minimale de 100%, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.

+ +

Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste 1fr et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec 1fr, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.

+ +

Méthodes alternatives

+ +

Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (flexbox) pour avoir une note de bas de page adhérante.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

+ +

On commence de la même façon mais on utilise display:flex plutôt que display:grid sur .wrapper. On définit flex-direction avec la valeur column afin d'avoir une organisation verticale. Pour le contenu principal, on utilise flex-grow: 1 et pour les deux autres éléments, on utilise flex-shrink: 0. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.

+ +

Compatibilité des navigateurs

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

flex-direction

+ +

{{Compat("css.properties.flex-direction")}}

+ +

flex-grow

+ +

{{Compat("css.properties.flex-grow")}}

+ +

flex-shrink

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_mode/index.html b/files/fr/web/css/layout_mode/index.html new file mode 100644 index 0000000000..377b162194 --- /dev/null +++ b/files/fr/web/css/layout_mode/index.html @@ -0,0 +1,25 @@ +--- +title: Mode de mise en page +slug: Web/CSS/Mode_de_mise_en_page +tags: + - CSS + - Reference +translation_of: Web/CSS/Layout_mode +--- +
{{CSSRef}}
+ +

Un mode de disposition CSS (layout mode), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :

+ + + +
+

Note : Les propriétés CSS ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.

+
diff --git a/files/fr/web/css/list_of_proprietary_css_features/index.html b/files/fr/web/css/list_of_proprietary_css_features/index.html new file mode 100644 index 0000000000..2c88258187 --- /dev/null +++ b/files/fr/web/css/list_of_proprietary_css_features/index.html @@ -0,0 +1,173 @@ +--- +title: Liste de fonctionnalités CSS propriétaires +slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires +tags: + - CSS + - Draft + - NeedsContent +translation_of: Web/CSS/List_of_Proprietary_CSS_Features +--- +

{{CSSRef}}{{Draft}}

+ +
+

Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.

+
+ +
+

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

+ + +
+ +
BROUILLON + +
Cette page est incomplète.
+
+ +

Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir Implémentation des fonctionnalités CSS à l'état de brouillon pour une liste de ces dernières).

+ +

Gecko

+ +

Propriétés

+ +
    +
  • {{ Cssxref("-moz-force-broken-image-icon") }}
    • +
  • {{ Cssxref("-moz-image-region") }}
    • +
  • {{ Cssxref("-moz-margin-end") }}
    • +
  • {{ Cssxref("-moz-margin-start") }}
    • +
  • {{ Cssxref("-moz-orient") }}
    • +
  • {{ Cssxref("-moz-padding-end") }}
    • +
  • {{ Cssxref("-moz-padding-start") }}
    • +
  • {{ Cssxref("-moz-stack-sizing") }}
    • +
  • {{ Cssxref("-moz-window-shadow") }}
    • +
+ +

Valeurs

+ +

{{ cssxref("background-image") }}

+ +
    +
  • Portions d'images +
      +
    • {{ cssxref("-moz-image-rect") }}
      • +
    +
    • +
+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

Opera

+ +

Propriétés

+ +

...

+ +

Valeurs

+ +

{{ cssxref("background-image") }}

+ +
    +
  • {{ cssxref("-o-double-rainbow") }}
    • +
+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

Trident (IE)

+ +

Propriétés

+ +
    +
  • {{ cssxref("-ms-accelerator") }}
    • +
+ +

Valeurs

+ +

...

+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

WebKit

+ +

Propriétés

+ +
    +
  • {{ Cssxref("-webkit-box-reflect") }}
    • +
  • {{ Cssxref("-webkit-mask") }}
    • +
  • {{ Cssxref("-webkit-mask-attachment") }}
    • +
  • {{ Cssxref("-webkit-mask-composite") }}
    • +
  • {{ Cssxref("-webkit-mask-image") }}
    • +
  • {{ Cssxref("-webkit-mask-origin") }}
    • +
  • {{ Cssxref("-webkit-mask-repeat") }}
    • +
  • {{ Cssxref("-webkit-tap-highlight-color") }}
    • +
  • {{ Cssxref("-webkit-text-decorations-in-effect") }}
    • +
  • {{ Cssxref("-webkit-text-stroke") }}
    • +
  • {{ Cssxref("-webkit-text-stroke-color") }}
    • +
  • {{ Cssxref("-webkit-text-stroke-width") }}
    • +
  • {{ Cssxref("-webkit-touch-callout") }}
    • +
+ +

Valeurs

+ +

...

+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

diff --git "a/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" "b/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" deleted file mode 100644 index 2c88258187..0000000000 --- "a/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Liste de fonctionnalités CSS propriétaires -slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires -tags: - - CSS - - Draft - - NeedsContent -translation_of: Web/CSS/List_of_Proprietary_CSS_Features ---- -

{{CSSRef}}{{Draft}}

- -
-

Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.

-
- -
-

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

- - -
- -
BROUILLON - -
Cette page est incomplète.
-
- -

Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir Implémentation des fonctionnalités CSS à l'état de brouillon pour une liste de ces dernières).

- -

Gecko

- -

Propriétés

- -
    -
  • {{ Cssxref("-moz-force-broken-image-icon") }}
    • -
  • {{ Cssxref("-moz-image-region") }}
    • -
  • {{ Cssxref("-moz-margin-end") }}
    • -
  • {{ Cssxref("-moz-margin-start") }}
    • -
  • {{ Cssxref("-moz-orient") }}
    • -
  • {{ Cssxref("-moz-padding-end") }}
    • -
  • {{ Cssxref("-moz-padding-start") }}
    • -
  • {{ Cssxref("-moz-stack-sizing") }}
    • -
  • {{ Cssxref("-moz-window-shadow") }}
    • -
- -

Valeurs

- -

{{ cssxref("background-image") }}

- -
    -
  • Portions d'images -
      -
    • {{ cssxref("-moz-image-rect") }}
      • -
    -
    • -
- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

- -

Opera

- -

Propriétés

- -

...

- -

Valeurs

- -

{{ cssxref("background-image") }}

- -
    -
  • {{ cssxref("-o-double-rainbow") }}
    • -
- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

- -

Trident (IE)

- -

Propriétés

- -
    -
  • {{ cssxref("-ms-accelerator") }}
    • -
- -

Valeurs

- -

...

- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

- -

WebKit

- -

Propriétés

- -
    -
  • {{ Cssxref("-webkit-box-reflect") }}
    • -
  • {{ Cssxref("-webkit-mask") }}
    • -
  • {{ Cssxref("-webkit-mask-attachment") }}
    • -
  • {{ Cssxref("-webkit-mask-composite") }}
    • -
  • {{ Cssxref("-webkit-mask-image") }}
    • -
  • {{ Cssxref("-webkit-mask-origin") }}
    • -
  • {{ Cssxref("-webkit-mask-repeat") }}
    • -
  • {{ Cssxref("-webkit-tap-highlight-color") }}
    • -
  • {{ Cssxref("-webkit-text-decorations-in-effect") }}
    • -
  • {{ Cssxref("-webkit-text-stroke") }}
    • -
  • {{ Cssxref("-webkit-text-stroke-color") }}
    • -
  • {{ Cssxref("-webkit-text-stroke-width") }}
    • -
  • {{ Cssxref("-webkit-touch-callout") }}
    • -
- -

Valeurs

- -

...

- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

diff --git "a/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" "b/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" deleted file mode 100644 index e3927a94d8..0000000000 --- "a/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Liste des propriétés CSS animées -slug: Web/CSS/Liste_propriétés_CSS_animées -tags: - - Animations - - CSS - - Reference - - Transitions -translation_of: Web/CSS/CSS_animated_properties ---- -
{{CSSRef}}
- -

Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux animations CSS ou aux transitions CSS.

- -

Voici la liste des propriétés qui peuvent être animées :

- -

{{CSSAnimatedProperties}}

diff --git a/files/fr/web/css/media_queries/index.html b/files/fr/web/css/media_queries/index.html new file mode 100644 index 0000000000..58c6cdc73e --- /dev/null +++ b/files/fr/web/css/media_queries/index.html @@ -0,0 +1,86 @@ +--- +title: Media queries +slug: Web/CSS/Requêtes_média +tags: + - Aperçu + - CSS + - CSS Media Queries + - Reference +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

Les requêtes média, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou at-rule) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.

+ +

De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.

+ +

De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.

+ +

Vous pouvez en découvrir plus dans l'article Tester des requêtes media.

+ +

Référence

+ +

Règles @

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

Guides

+ +
+
Manipuler les requêtes média
+
Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
+
Tester les requêtes média
+
Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
+
Utiliser des requêtes média pour l'accessibilité
+
Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.
    • +
diff --git a/files/fr/web/css/media_queries/testing_media_queries/index.html b/files/fr/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..39539a5749 --- /dev/null +++ b/files/fr/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,79 @@ +--- +title: Tester les requêtes média en JavaScript +slug: Web/CSS/Requêtes_média/Tester_les_media_queries +tags: + - Avancé + - CSS + - DOM + - Guide +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +
{{CSSRef}}
+ +

Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (media query) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.

+ +

Créer une liste de requêtes média

+ +

Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.

+ +

Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :

+ +
var mql = window.matchMedia("(orientation: portrait)");
+
+ +

Vérifier le résultat d'une requête

+ +

Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété matches qui représente les résultat de la requête :

+ +
if (mql.matches) {
+  /* La zone d'affichage/viewport est en portrait */
+} else {
+  /* La zone d'affichage/viewport est en paysage */
+}
+
+ +

Recevoir des notifications liées à la requête

+ +

Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un listener plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode addListener() sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :

+ +
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+
+ +

Ce code crée la liste de requêtes média qui teste l'orientation (l'objet mql) puis ajoute un listener. Une fois qu'on a ajouté le listener, on l'invoque une fois. Cela permet d'ajuster l'état initial du listener selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).

+ +

La méthode handleOrientationChange() qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :

+ +
function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* La zone d'affichage/viewport est en portrait */
+  } else {
+    /* La zone d'affichage/viewport est en paysage */
+  }
+}
+
+ +

Terminer la réception des notifications

+ +

Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser removeListener() sur l'objet  {{domxref("MediaQueryList") }} :

+ +
mql.removeListener(handleOrientationChange);
+
+ +

Compatibilité des navigateurs

+ +

Interface MediaQueryList

+ + + +

{{Compat("api.MediaQueryList")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..4dc71551de --- /dev/null +++ b/files/fr/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,384 @@ +--- +title: Media queries +slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries +tags: + - Avancé + - CSS + - CSS3 + - Guide + - Media Queries + - Requêtes média + - Responsive Design +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{CSSRef}}
+ +

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

+ +

Les requêtes média sont utilisées afin :

+ +
    +
  • D'appliquer certains styles de façon conditionnelle grâce aux règles @ {{cssxref("@media")}} et {{cssxref("@import")}}.
    • +
  • De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments HTML grâce à l'attribut media=.
    • +
  • De tester et surveiller l'état d'un média grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.
    • +
+ +
+

Note : Les exemples de cet article utilisent @media à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.

+
+ +

Syntaxe

+ +

Une requête média se compose d'un type de média optionnel et d'une ou plusieurs expressions de caractéristiques de média. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.

+ +

Une requête média vaut true si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours false.

+ +
+

Note : Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.

+
+ +

Types de média

+ +

Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.

+ +
+
all
+
Correspond pour tous les appareils.
+
print
+
Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les média paginés.
+
screen
+
Correspond aux appareils dotés d'un écran.
+
speech
+
Correspond aux outils de synthèse vocale.
+
+ +
Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.
+ +

Caractéristiques média (media features)

+ +

Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomRésuméNotes
{{cssxref("@media/width","width")}}La largeur de la zone d'affichage (viewport)
{{cssxref("@media/height","height")}}La hauteur de la zone d'affichage
{{cssxref("@media/aspect-ratio","aspect-ratio")}}Le rapport largeur/hauteur de la zone d'affichage
{{cssxref("@media/orientation","orientation")}}L'orientation la zone d'affichage
{{cssxref("@media/resolution","resolution")}}La densité de pixel pour l'appareil d'affichage
{{cssxref("@media/scan","scan")}}Le processus de scan de l'appareil d'affichage
{{cssxref("@media/grid","grid")}}Le type d'écran de l'appareil : matriciel ou grille ?
{{cssxref("@media/update-frequency","update")}}La fréquence de modification du contenu par l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-block","overflow-block")}}La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de blocAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-inline","overflow-inline")}}La possibilité de faire défiler (scroll) le contenu qui dépasse de la zone d'affichage sur l'axe en ligneAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color","color")}}Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)
{{cssxref("@media/color-gamut","color-gamut")}}Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color-index","color-index")}}Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)
{{cssxref("@media/display-mode","display-mode")}}Le mode d'affichage de l'application, tel qu'indiqué par la propriété display du manifesteDéfinie dans la spécification pour les manifestes des applications web.
{{cssxref("@media/monochrome","monochrome")}}Le nombre de bits par pixel pour le frame buffer monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome
{{cssxref("@media/inverted-colors","inverted-colors")}}L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitationReportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/pointer","pointer")}}La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/hover","hover")}}La capacité du mécanisme de saisie principal à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-pointer","any-pointer")}}La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-hover","any-hover")}}La capacité d'un des mécanismes de saisie à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/light-level","light-level")}}Le niveau de luminosité de l'environnementAjoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}L'utilisateur préfère que la transparence utilisée sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}L'utilisateur préfère utiliser un thème clair ou un thème sombre.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/forced-colors", "forced-colors")}}Détecte si l'agent utilisateur restreint la palette de couleurs.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/scripting","scripting")}}La disponibilité des fonctions de script (JavaScript par exemple)Reportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}La largeur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}La hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
+ +

Opérateurs logiques

+ +

Les opérateurs logiques not, and et only peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.

+ +

and

+ +

L'opérateur and permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.

+ +

not

+ +

L'opérateur not est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie true si l'opérande renvoie false). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur not est utilisé, la requête doit nécessairement contenir un type de média.

+ +
+

Note : Pour la spécification de niveau 3, l'opérateur not ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.

+
+ +

only

+ +

L'opérateur only est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas only, un ancien navigateur interprètera screen and (max-width: 500px) comme screen uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur only est utilisé, la requête doit nécessairement contenir un type de média.

+ +

, (virgule)

+ +

Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie true, toute la requête combinée renverra true. En ce sens, l'opérateur , agit comme un opérateur booléen or.

+ +

Cibler des types de média

+ +

Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :

+ +
@media print { ... }
+ +

Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :

+ +
@media screen, print { ... }
+ +

Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.

+ +

Cibler des caractéristiques média

+ +

Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :

+ +
@media (hover: hover) { ... }
+ +

De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par min- ou max- afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px :

+ +
@media (max-width: 1250px) { ... }
+ +
+

Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.

+
+ +

Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou none pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :

+ +
@media (color) { ... }
+ +

Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront false. Ainsi, la requête suivante aura toujours la valeur false car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis le tableau ci-dessus.

+ +

Créer des requêtes média complexes

+ +

Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : not, and, only et la virgule (,) afin de combiner plusieurs requêtes média.

+ +

Dans l'exemple précédent, on a utilisé l'opérateur and afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur not permet d'obtenir la négation d'une requête média tandis que l'opérateur only empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.

+ +
+

Note : Dans la plupart des cas, le type de média all est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs not ou only, il est nécessaire de fournir un type de média explicite.

+
+ +

Combiner plusieurs types ou caractéristiques

+ +

Le mot-clé and permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média screen :

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+ +

Tester plusieurs requêtes

+ +

La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée true.

+ +

Opérer une négation

+ +

Le mot-clé not permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé not ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur not est évalué en dernier :

+ +
@media not all and (monochrome) { ... }
+
+ +

La requête précédente est donc équivalente à :

+ +
@media not (all and (monochrome)) { ... }
+
+ +

Mais elle n'est pas équivalente à :

+ +
@media (not all) and (monochrome) { ... }
+ +

De même :

+ +
@media not screen and (color), print and (color) { ... }
+
+ +

sera évaluée comme :

+ +
@media (not (screen and (color))), print and (color) { ... }
+ +

Améliorer la compatibilité avec les anciens navigateurs

+ +

Le mot-clé only empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes.

+ +
@media only screen and (color) { ... }
+
+ +

Améliorations syntaxiques avec la spécification de niveau 4

+ +

La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe max- pour les largeurs et écrire :

+ +
@media (max-width: 30em) { ... }
+ +

Avec les requêtes média de niveau 4, on peut écrire :

+ +
@media (width <= 30em) { ... }
+ +

Si on utilise min- et max- conjointement, on peut tester l'appartenance d'une valeur à un intervalle :

+ +
@media (min-width: 30em) and (max-width: 50em) { ... }
+ +

Avec les requêtes média de niveau 4, on peut écrire :

+ +
@media (30em <= width <= 50em ) { ... }
+
+ +

Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs and, not et or.

+ +

Tester l'absence d'une caractéristique avec not

+ +

On peut utiliser l'opérateur not() autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut not(hover) pour cibler les appareils qui ne permettent pas le survol d'un élément :

+ +
@media (not(hover)) { ... }
+ +

Tester plusieurs caractéristiques avec or

+ +

Il est possible d'utiliser l'opérateur or pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (not (color)) ou qui permettent de survoler les éléments (hover) :

+ +
@media (not (color)) or (hover) { ... }
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html new file mode 100644 index 0000000000..3ff2740bd8 --- /dev/null +++ b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html @@ -0,0 +1,96 @@ +--- +title: Utilisation des requêtes média pour l'accessibilité +slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité +tags: + - '@media' + - Accessibilité + - CSS +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}
+ +

Les requêtes média (media queries) peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.

+ +

Réduction de mouvement - prefers-reduced-motion

+ +

Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.

+ +

Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.
+
reduce
+
Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.
+
+ +

Exemple

+ +

Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Mode de contraste élevé{{Non-standard_inline}}

+ +

La caractéristique média -ms-high-contrast est spécifique à Microsoft mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.

+ +

Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).

+ +

Syntaxe

+ +

La caractéristique média -ms-high-contrast peut être définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
active
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.

+
+
black-on-white
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.

+
+
white-on-black
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.

+
+
+ +

Exemple

+ +

Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).

+ +
@media screen and (-ms-high-contrast: active) {
+  /* Toutes les règles appliquées en contraste élevé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+
diff --git a/files/fr/web/css/microsoft_extensions/index.html b/files/fr/web/css/microsoft_extensions/index.html new file mode 100644 index 0000000000..017958249c --- /dev/null +++ b/files/fr/web/css/microsoft_extensions/index.html @@ -0,0 +1,118 @@ +--- +title: Extensions CSS de Microsoft +slug: Web/CSS/Extensions_CSS_Microsoft +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/Microsoft_Extensions +--- +
{{CSSRef}}
+ +

Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à CSS. Ces extensions sont préfixées par -ms.

+ +

Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)

+ +
+

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.

+
+ +
+
    +
  • {{CSSxRef("-ms-accelerator")}}
    • +
  • {{CSSxRef("-ms-block-progression")}}
    • +
  • {{CSSxRef("-ms-content-zoom-chaining")}}
    • +
  • {{CSSxRef("-ms-content-zooming")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit-max")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit-min")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap-points")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap-type")}}
    • +
  • {{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-flow-from")}}
    • +
  • {{CSSxRef("-ms-flow-into")}}
    • +
  • {{CSSxRef("-ms-high-contrast-adjust")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-chars")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-lines")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-zone")}}
    • +
  • {{CSSxRef("-ms-ime-align")}}
    • +
  • {{CSSxRef("-ms-overflow-style")}}
    • +
  • {{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scroll-chaining")}}
    • +
  • {{CSSxRef("-ms-scroll-limit")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-x-max")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-x-min")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-y-max")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-y-min")}}
    • +
  • {{CSSxRef("-ms-scroll-rails")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-points-x")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-points-y")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-x")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-y")}}
    • +
  • {{CSSxRef("-ms-scroll-translation")}}
    • +
  • {{CSSxRef("-ms-text-autospace")}}
    • +
  • {{CSSxRef("-ms-touch-select")}}
    • +
  • {{CSSxRef("-ms-wrap-flow")}}
    • +
  • {{CSSxRef("-ms-wrap-margin")}}
    • +
  • {{CSSxRef("-ms-wrap-through")}}
    • +
  • {{CSSxRef("zoom")}}
    • +
+
+ +

Pseudo-éléments

+ +
+
    +
  • {{CSSxRef("::-ms-browse")}}
    • +
  • {{CSSxRef("::-ms-check")}}
    • +
  • {{CSSxRef("::-ms-clear")}}
    • +
  • {{CSSxRef("::-ms-expand")}}
    • +
  • {{CSSxRef("::-ms-fill")}}
    • +
  • {{CSSxRef("::-ms-fill-lower")}}
    • +
  • {{CSSxRef("::-ms-fill-upper")}}
    • +
  • {{CSSxRef("::-ms-reveal")}}
    • +
  • {{CSSxRef("::-ms-thumb")}}
    • +
  • {{CSSxRef("::-ms-ticks-after")}}
    • +
  • {{CSSxRef("::-ms-ticks-before")}}
    • +
  • {{CSSxRef("::-ms-tooltip")}}
    • +
  • {{CSSxRef("::-ms-track")}}
    • +
  • {{CSSxRef("::-ms-value")}}
    • +
+
+ +

Caractéristiques média

+ +
+
    +
  • {{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}
    • +
+
+ +

API DOM relatives à CSS

+ +
+
    +
  • {{DOMxRef("msContentZoomFactor")}}
    • +
  • {{DOMxRef("msGetPropertyEnabled")}}
    • +
  • {{DOMxRef("msGetRegionContent")}}
    • +
  • {{DOMxRef("MSRangeCollection")}}
    • +
  • {{DOMxRef("msRegionOverflow")}}
    • +
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/mode_de_mise_en_page/index.html b/files/fr/web/css/mode_de_mise_en_page/index.html deleted file mode 100644 index 377b162194..0000000000 --- a/files/fr/web/css/mode_de_mise_en_page/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Mode de mise en page -slug: Web/CSS/Mode_de_mise_en_page -tags: - - CSS - - Reference -translation_of: Web/CSS/Layout_mode ---- -
{{CSSRef}}
- -

Un mode de disposition CSS (layout mode), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :

- - - -
-

Note : Les propriétés CSS ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.

-
diff --git "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" deleted file mode 100644 index 3b14f121d8..0000000000 --- "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Fusion des marges -slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -
Les marges haute et basse des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle la fusion des marges.
- -

La fusion des marges se produit si on a l'un de ces trois cas :

- -
-
Des éléments voisins adjacents
-
Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements). Ainsi : - 
 <p>La marge basse de ce paragraphe est fusionnée…</p>
- <p>… avec la marge haute de celui-ci.</p>
-
-
-
Aucun contenu séparant le parent et ses descendants
-
S'il n'y a aucune bordure, remplissage, contenu en ligne (inline), lorsqu' un contexte de formatage de blocs est créé ou dégagement pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
-
Des blocs vides
-
S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.
-
- -

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.

- -

Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).

- -

Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).

- -

Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.

- -

Exemples

- -

HTML

- -
<p>La marge basse de ce paragraphe est fusionnée…</p>
-<p>… avec la marge haute de ce paragraphe. On a donc une marge
-   de <code>1.2rem</code> entre les deux.</p>
-
-<div>Cet élément contient deux paragraphes !
-  <p>Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.</p>
-  <p>La marge basse de cet élément fusionne avec la marge basse
-     de l'élément parent. On a donc <code>2rem</code> de marge.
-</p>
-</div>
-
-<p>Bip bap bop.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples','100%',250)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" deleted file mode 100644 index 77f236ac13..0000000000 --- "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" +++ /dev/null @@ -1,2887 +0,0 @@ ---- -title: Générateur de box-shadow -slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

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.

- -
-

box-shadow generator

- -

HTML Content

- -
<div id="container">
-    <div class="group section">
-        <div id="layer_manager">
-            <div class="group section">
-                <div class="button" data-type="add"> </div>
-                <div class="button" data-type="move-up"> </div>
-                <div class="button" data-type="move-down"> </div>
-            </div>
-            <div id="stack_container"></div>
-        </div>
-
-        <div id="preview_zone">
-            <div id="layer_menu" class="col span_12">
-                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
-                <div class="button" id="before" data-type="subject" data-title=":before">
-                    :before
-                    <span class="delete" data-type="disable"></span>
-                </div>
-                <div class="button" id="after" data-type="subject" data-title=":after">
-                    :after
-                    <span class="delete" data-type="disable"></span>
-                </div>
-                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
-                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
-            </div>
-
-            <div id="preview">
-                <div id="obj-element">
-                    <div class="content"> </div>
-                    <div id="obj-before"> </div>
-                    <div id="obj-after"> </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div id="controls" class="group section">
-        <div class="wrap-left">
-            <div class="colorpicker category">
-                <div class="title"> </div>
-                <div id="colorpicker" class="group">
-                    <div id="gradient" class="gradient">
-                        <div id="gradient_picker"> </div>
-                    </div>
-                    <div id="hue" data-topic="hue" class="hue">
-                        <div id="hue_selector"> </div>
-                    </div>
-                    <div class="info">
-                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
-                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
-                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
-                    </div>
-                    <div class="alpha">
-                        <div id="alpha" data-topic="alpha">
-                            <div id="alpha_selector"> </div>
-                        </div>
-                    </div>
-                    <div class="info">
-                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
-                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
-                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
-                    </div>
-                    <div class="preview block">
-                        <div id="output_color"> </div>
-                    </div>
-                    <div class="block info">
-                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
-                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="wrap-right">
-
-            <div id="shadow_properties" class="category">
-                <div class="title"> Propriétés d'ombre </div>
-                <div class="group">
-                    <div class="group property">
-                        <div class="ui-slider-name"> inset </div>
-                        <div class="ui-checkbox" data-topic='inset'></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Position x </div>
-                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Position y </div>
-                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Blur </div>
-                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Spread </div>
-                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="element_properties" class="category">
-                <div class="title"> Propriétés d'ombre </div>
-                <div class="group">
-                    <div class="group property">
-                        <div class="ui-slider-name"> border </div>
-                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
-                    </div>
-                    <div id="z-index" class="slidergroup">
-                        <div class="ui-slider-name"> z-index </div>
-                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"></div>
-                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="z-index"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> top </div>
-                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> left </div>
-                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
-                    </div>
-                    <div id="transform_rotate" class="slidergroup">
-                        <div class="ui-slider-name"> Rotate </div>
-                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Width </div>
-                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Height </div>
-                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="output" class="category">
-                <div id="menu" class="menu"></div>
-                <div class="title">    Code CSS </div>
-                <div class="group" style="border-top-left-radius: 0;">
-                    <div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow">
-                    </div>
-                    <div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
-                    </div>
-                    <div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
- -

CSS Content

- -
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-/*
- * UI Slider
- */
-
-.slidergroup {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.slidergroup * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-.ui-slider {
-	height: 10px;
-	width: 200px;
-	margin: 4px 10px;
-	display: block;
-	border: 1px solid #999;
-	border-radius: 3px;
-	background: #EEE;
-}
-
-.ui-slider:hover {
-	cursor: pointer;
-}
-
-.ui-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-slider-pointer {
-	width: 13px;
-	height: 13px;
-	background-color: #EEE;
-	border: 1px solid #2C9FC9;
-	border-radius: 3px;
-	position: relative;
-	top: -3px;
-	left: 0%;
-}
-
-.ui-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 3px;
-	color: #FFF;
-	font-weight: bold;
-	text-align: center;
-}
-
-.ui-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-.ui-slider-input > input {
-	margin: 0 10px;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*
- * BOX SHADOW GENERATOR TOOL
- */
-
-body {
-	max-width: 1000px;
-	height: 800px;
-	margin: 20px auto 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-#container {
-	width: 100%;
-	padding: 2px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* container with shadows stacks */
-#stack_container {
-	height: 400px;
-	overflow: hidden;
-	position: relative;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#stack_container .container {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	left: 100%;
-	transition-property: left;
-	transition-duration: 0.5s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-#stack_container .title {
-	text-align: center;
-	font-weight: bold;
-	line-height: 2em;
-	border-bottom: 1px solid #43A6E1;
-	color: #666;
-}
-
-
-/*
- * Stack of Layers for shadow
- */
-
-#layer_manager {
-	width: 17%;
-	background-color: #FEFEFE;
-	margin: 0 1% 0 0;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-
-#layer_manager .button {
-	width: 30%;
-	height: 25px;
-	margin:0 0 10px;
-	color: #333;
-	background-color: #EEE;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	display: block;
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-#layer_manager .button:hover {
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_manager [data-type='add'] {
-	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
-}
-
-#layer_manager [data-type='add']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
-}
-
-#layer_manager [data-type='move-up'] {
-	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
-	margin-left: 5%;
-	margin-right: 5%;
-}
-
-#layer_manager [data-type='move-up']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
-}
-
-#layer_manager [data-type='move-down'] {
-	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
-}
-
-#layer_manager [data-type='move-down']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
-}
-
-/* shadows classes */
-
-#layer_manager .node {
-	width: 100%;
-	margin: 5px 0;
-	padding: 5px;
-	text-align: center;
-	background-color: #EEE;
-	border: 1px solid #DDD;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	color: #333;
-	border-radius: 3px;
-
-	position: relative;
-	display: block;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_manager .node:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	cursor: pointer;
-}
-
-/* active element styling */
-
-#layer_manager [data-active='layer'] {
-	color: #FFF;
-	border: none;
-	background-color: #379B4A;
-}
-
-#layer_manager [data-active='subject'] {
-	color: #FFF;
-	background-color: #467FC9;
-}
-
-/* delete button */
-
-#layer_manager .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	display: none;
-}
-
-#layer_manager .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_manager .node:hover .delete {
-	display: block;
-}
-
-
-#layer_manager .stack {
-	padding: 0 5px;
-	max-height: 90%;
-	overflow: auto;
-	overflow-x: hidden;
-}
-
-
-/*
- * Layer Menu
- */
-
-#layer_menu {
-	margin: 0 0 10px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button {
-	width: 100px;
-	margin: 0 5px 0 0;
-	padding: 2.5px;
-	color: #333;
-	background-color: #EEE;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-
-	position: relative;
-	display: block;
-	float: left;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_menu .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	display: none;
-}
-
-#layer_menu .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_menu .button:hover .delete {
-	display: block;
-}
-
-
-/*
- * active element styling
- */
-
-#layer_menu [data-active='subject'] {
-	color: #FFF;
-	background-color: #379B4A;
-	border: 1px solid #379B4A;
-}
-
-
-/* Checkbox */
-
-#layer_menu .ui-checkbox > label {
-	height: 15px;
-	line-height: 17px;
-	font-weight: normal;
-	width: 46px;
-	margin: 0 5px 0 0;
-}
-
-#layer_menu .ui-checkbox > input:checked + label {
-	display: none;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview_zone {
-	width: 82%;
-	float: left;
-
-}
-
-
-#preview {
-	width: 100%;
-	height: 400px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	cursor: move;
-	float: left;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#obj-element {
-	width: 300px;
-	height: 100px;
-	border: 1px solid #CCC;
-	background: #FFF;
-	position: relative;
-}
-
-
-#obj-before {
-	height: 100%;
-	width: 100%;
-	background: #999;
-	border: 1px solid #CCC;
-	text-align: left;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-#obj-after {
-	height: 100%;
-	width: 100%;
-	background: #DDD;
-	border: 1px solid #CCC;
-	text-align: right;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/**
- * Controls
- */
-
-.wrap-left {
-	float: left;
-	overflow: hidden;
-}
-
-.wrap-right {
-	float: right;
-	overflow: hidden;
-}
-
-.wrap-left > * {
-	float: left;
-}
-
-.wrap-right > * {
-	float: right;
-}
-
-@media (min-width: 960px) {
-
-	.wrap-left {
-		width: 45%;
-	}
-
-	.wrap-right {
-		width: 55%;
-	}
-}
-
-
-@media (max-width: 959px) {
-
-	.wrap-left {
-		width: 30%;
-	}
-
-	.wrap-right {
-		width: 70%;
-	}
-}
-
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-
-#controls .category {
-	width: 500px;
-	margin: 0 auto 20px;
-	padding: 0;
-
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 1.5em;
-	line-height: 1.5em;
-	color: #AAA;
-	text-align: right;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-
-/**
- * 	Color Picker
- */
-
-@media (min-width: 960px) {
-	#controls .colorpicker {
-		width: 420px;
-	}
-}
-
-@media (max-width: 959px) {
-	#controls .colorpicker {
-		width: 210px;
-	}
-}
-
-#colorpicker {
-	width: 100%;
-	margin: 0 auto;
-}
-
-#colorpicker .gradient {
-	width: 200px;
-	height: 200px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background-color: #F00;
-	float: left;
-}
-
-#colorpicker .hue {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	float: left;
-}
-
-#colorpicker .alpha {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	border: 1px solid #CCC;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker #alpha {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
-	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
-}
-
-#colorpicker #gradient_picker {
-	width: 0.5em;
-	height: 0.5em;
-	border-radius: 0.4em;
-	border: 2px solid #CCC;
-	position: relative;
-	top: 20%;
-	left: 20%;
-}
-
-#colorpicker #hue_selector,
-#colorpicker #alpha_selector {
-	width: 3px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-	left: 0%;
-}
-
-/* input HSV and RGB */
-#colorpicker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-#colorpicker .info * {
-	float: left;
-}
-
-#colorpicker .info input {
-	margin: 0;
-	text-align: center;
-	width: 30px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#colorpicker .info span {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	line-height: 20px;
-	display: block;
-}
-
-/* Preview color */
-#colorpicker .block {
-	width: 95px;
-	height: 54px;
-	float: left;
-	position: relative;
-}
-
-#colorpicker .preview {
-	margin: 5px;
-	border: 1px solid #CCC;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-#colorpicker .preview > * {
-	width: 50%;
-	height: 100%;
-}
-
-#colorpicker #output_color {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
-}
-
-#colorpicker .block .input {
-	float: right;
-}
-
-#colorpicker [data-topic="a"] > span {
-	width: 50px;
-}
-
-#colorpicker [data-topic="hexa"] {
-	float: right;
-	margin: 10px 0 0 0;
-}
-
-#colorpicker [data-topic="hexa"] > span {
-	display: none;
-}
-
-#colorpicker [data-topic="hexa"] > input {
-	width: 85px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/*
- * UI Components
- */
-
-/* Property */
-
-.property {
-	height: 20px;
-	margin: 10px 0;
-}
-
-.property * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-#controls .ui-slider-name {
-	margin: 0 10px 0 0;
-}
-
-/*
- * Output code styling
- */
-
-#output {
-	position: relative;
-}
-
-#output .menu {
-	max-width: 70%;
-	height: 20px;
-	position: absolute;
-	top: 2px;
-}
-
-#output .button {
-	width: 90px;
-	height: 22px;
-	margin: 0 5px 0 0;
-	text-align: center;
-	line-height: 20px;
-	font-size: 14px;
-	color: #FFF;
-	background-color: #999;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	bottom: -5px;
-	float:left;
-}
-
-#output .button:hover {
-	color: #FFF;
-	background-color: #666;
-	cursor: pointer;
-}
-
-#output .menu [data-active="true"] {
-	color: #777;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-	border-bottom: none;
-}
-
-#output .menu [data-topic="before"] {
-	left: 100px;
-}
-
-#output .menu [data-topic="after"] {
-	left: 200px;
-}
-
-#output .output {
-	width: 480px;
-	margin: 10px;
-	padding: 10px;
-	overflow: hidden;
-	color: #555;
-	font-size: 14px;
-	border: 1px dashed #CCC;
-	border-radius: 3px;
-	display: none;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#output .css-property {
-	width: 100%;
-	float: left;
-	white-space: pre;
-}
-
-#output .name {
-	width: 35%;
-	float: left;
-}
-
-#output .value {
-	width: 65%;
-	float: left;
-}
-
-
- -

JavaScript Content

- -

-
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var SliderManager = (function SliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var Slider = function(node) {
-		var min = node.getAttribute('data-min') | 0;
-		var max = node.getAttribute('data-max') | 0;
-		var step = node.getAttribute('data-step') | 0;
-		var value = node.getAttribute('data-value') | 0;
-		var snap = node.getAttribute('data-snap');
-		var topic = node.getAttribute('data-topic');
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
-		this.snap = snap === "true" ? true : false;
-		this.topic = topic;
-		this.node = node;
-
-		var pointer = document.createElement('div');
-		pointer.className = 'ui-slider-pointer';
-		node.appendChild(pointer);
-		this.pointer = pointer;
-
-		setMouseTracking(node, updateSlider.bind(this));
-
-		sliders[topic] = this;
-		setValue(topic, this.value);
-	}
-
-	var setButtonComponent = function setButtonComponent(node) {
-		var type = node.getAttribute('data-type');
-		var topic = node.getAttribute('data-topic');
-		if (type === "sub") {
-			node.textContent = '-';
-			node.addEventListener("click", function() {
-				decrement(topic);
-			});
-		}
-		if (type === "add") {
-			node.textContent = '+';
-			node.addEventListener("click", function() {
-				increment(topic);
-			});
-		}
-	}
-
-	var setInputComponent = function setInputComponent(node) {
-		var topic		= node.getAttribute('data-topic');
-		var unit_type	= node.getAttribute('data-unit');
-
-		var input = document.createElement('input');
-		var unit = document.createElement('span');
-		unit.textContent = unit_type;
-
-		input.setAttribute('type', 'text');
-		node.appendChild(input);
-		node.appendChild(unit);
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			setValue(topic, e.target.value | 0);
-		});
-
-		subscribe(topic, function(value) {
-			node.children[0].value = value;
-		});
-	}
-
-	var increment = function increment(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value + slider.step <= slider.max) {
-			slider.value += slider.step;
-			setValue(slider.topic, slider.value)
-			notify.call(slider);
-		}
-	};
-
-	var decrement = function decrement(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value - slider.step >= slider.min) {
-			slider.value -= slider.step;
-			setValue(topic, slider.value)
-			notify.call(slider);
-		}
-	}
-
-	// this = Slider object
-	var updateSlider = function updateSlider(e) {
-		var node = this.node;
-		var pos = e.pageX - node.offsetLeft;
-		var width = node.clientWidth;
-		var delta = this.max - this.min;
-		var offset = this.pointer.clientWidth + 4; // border width * 2
-
-		if (pos < 0) pos = 0;
-		if (pos > width) pos = width;
-
-		var value = pos * delta / width | 0;
-		var precision = value % this.step;
-		value = value - precision + this.min;
-		if (precision > this.step / 2)
-			value = value + this.step;
-
-		if (this.snap)
-			pos =  (value - this.min) * width / delta;
-
-		this.pointer.style.left = pos - offset/2 + "px";
-		this.value = value;
-		node.setAttribute('data-value', value);
-		notify.call(this);
-	}
-
-	var setValue = function setValue(topic, value) {
-		var slider = sliders[topic];
-
-		if (value > slider.max || value < slider.min)
-			return;
-
-		var delta = slider.max - slider.min;
-		var width = slider.node.clientWidth;
-		var offset = slider.pointer.clientWidth;
-		var pos =  (value - slider.min) * width / delta;
-		slider.value = value;
-		slider.pointer.style.left = pos - offset / 2 + "px";
-		slider.node.setAttribute('data-value', value);
-		notify.call(slider);
-	}
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener("mousedown", function(e) {
-			callback(e);
-			document.addEventListener("mousemove", callback);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", callback);
-		});
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-slider-btn-set');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			setButtonComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider-input');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			setInputComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new Slider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-			notify.call(buttons[topic]);
-		}
-		catch(error) {
-			console.log(error, topic, value);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function(){
-	BoxShadow.init();
-});
-
-var BoxShadow = (function BoxShadow() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * RGBA Color class
-	 */
-
-	function Color() {
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log("Typeof instance not Color");
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-	}
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (red != undefined)
-			this.r = red | 0;
-		if (green != undefined)
-			this.g = green | 0;
-		if (blue != undefined)
-			this.b = blue | 0;
-		if (alpha != undefined)
-			this.a = alpha | 0;
-	}
-
-	/**
-	 * HSV/HSB (hue, saturation, value / brightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 */
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.updateRGB();
-	}
-
-	Color.prototype.updateRGB = function updateRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision;
-		X = (X + m) * precision;
-		m = m * precision;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	}
-
-	Color.prototype.updateHSV = function updateHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	}
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-	}
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	}
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
-		var a = '';
-		var v = '';
-		if (this.a !== 1) {
-			a = 'a';
-			v = ', ' + this.a;
-		}
-
-		var value = "rgb" + a + rgb + v + ")";
-		return value;
-	}
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	}
-
-	/**
-	 * Shadow Object
-	 */
-	function Shadow() {
-		this.inset  = false;
-		this.posX   = 5;
-		this.posY   = -5;
-		this.blur   = 5;
-		this.spread = 0;
-		this.color  = new Color();
-
-		var hue			= (Math.random() * 360) | 0;
-		var saturation	= (Math.random() * 75) | 0;
-		var value 		= (Math.random() * 50 + 50) | 0;
-		this.color.setHSV(hue, saturation, value, 1);
-	}
-
-	Shadow.prototype.computeCSS = function computeCSS() {
-		var value = "";
-		if (this.inset === true)
-			value += "inset ";
-		value += this.posX + "px ";
-		value += this.posY + "px ";
-		value += this.blur + "px ";
-		value += this.spread + "px ";
-		value += this.color.getColor();
-
-		return value;
-	}
-
-	Shadow.prototype.toggleInset = function toggleInset(value) {
-		if (value !== undefined || typeof value === "boolean")
-			this.inset = value;
-		else
-			this.inset = this.inset === true ? false : true;
-	}
-
-	Shadow.prototype.copy = function copy(obj) {
-		if(obj instanceof Shadow !== true) {
-			console.log("Typeof instance not Shadow");
-			return;
-		}
-
-		this.inset  = obj.inset;
-		this.posX   = obj.posX;
-		this.posY   = obj.posY;
-		this.blur   = obj.blur;
-		this.spread = obj.spread;
-		this.color.copy(obj.color);
-	}
-
-	/**
-	 * Color Picker
-	 */
-	var ColoPicker = (function ColoPicker() {
-
-		var colorpicker;
-		var hue_area;
-		var gradient_area;
-		var alpha_area;
-		var gradient_picker;
-		var hue_selector;
-		var alpha_selector;
-		var pick_object;
-		var info_rgb;
-		var info_hsv;
-		var info_hexa;
-		var output_color;
-		var color = new Color();
-		var subscribers = [];
-
-		var updateColor = function updateColor(e) {
-			var x = e.pageX - gradient_area.offsetLeft;
-			var y = e.pageY - gradient_area.offsetTop;
-
-			// width and height should be the same
-			var size = gradient_area.clientWidth;
-
-			if (x > size)
-				x = size;
-			if (y > size)
-				y = size;
-
-			if (x < 0) x = 0;
-			if (y < 0) y = 0;
-
-			var value = 100 - (y * 100 / size) | 0;
-			var saturation = x * 100 / size | 0;
-
-			color.setHSV(color.hue, saturation, value);
-			// should update just
-			// color pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateHue = function updateHue(e) {
-			var x = e.pageX - hue_area.offsetLeft;
-			var width = hue_area.clientWidth;
-
-			if (x < 0) x = 0;
-			if (x > width) x = width;
-
-			var hue = ((360 * x) / width) | 0;
-			if (hue === 360) hue = 359;
-
-			color.setHSV(hue, color.saturation, color.value);
-
-			// should update just
-			// hue pointer location
-			// picker area background
-			// alpha area background
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateAlpha = function updateAlpha(e) {
-			var x = e.pageX - alpha_area.offsetLeft;
-			var width = alpha_area.clientWidth;
-
-			if (x < 0) x = 0;
-			if (x > width) x = width;
-
-			color.a = (x / width).toFixed(2);
-
-			// should update just
-			// alpha pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var setHueGfx = function setHueGfx(hue) {
-			var sat = color.saturation;
-			var val = color.value;
-			var alpha = color.a;
-
-			color.setHSV(hue, 100, 100);
-			gradient_area.style.backgroundColor = color.getHexa();
-
-			color.a = 0;
-			var start = color.getRGBA();
-			color.a = 1;
-			var end = color.getRGBA();
-			color.a = alpha;
-
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-		}
-
-		var updateUI = function updateUI() {
-			var x, y;		// coordinates
-			var size;		// size of the area
-			var offset;		// pointer graphic selector offset
-
-			// Set color pointer location
-			size = gradient_area.clientWidth;
-			offset = gradient_picker.clientWidth / 2 + 2;
-
-			x = (color.saturation * size / 100) | 0;
-			y = size - (color.value * size / 100) | 0;
-
-			gradient_picker.style.left = x - offset + "px";
-			gradient_picker.style.top = y - offset + "px";
-
-			// Set hue pointer location
-			size = hue_area.clientWidth;
-			offset = hue_selector.clientWidth/2;
-			x = (color.hue * size / 360 ) | 0;
-			hue_selector.style.left = x - offset + "px";
-
-			// Set alpha pointer location
-			size = alpha_area.clientWidth;
-			offset = alpha_selector.clientWidth/2;
-			x = (color.a * size) | 0;
-			alpha_selector.style.left = x - offset + "px";
-
-			// Set picker area background
-			var nc = new Color();
-			nc.copy(color);
-			if (nc.hue === 360) nc.hue = 0;
-			nc.setHSV(nc.hue, 100, 100);
-			gradient_area.style.backgroundColor = nc.getHexa();
-
-			// Set alpha area background
-			nc.copy(color);
-			nc.a = 0;
-			var start = nc.getRGBA();
-			nc.a = 1;
-			var end = nc.getRGBA();
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-
-			// Update color info
-			notify("color", color);
-			notify("hue", color.hue);
-			notify("saturation", color.saturation);
-			notify("value", color.value);
-			notify("r", color.r);
-			notify("g", color.g);
-			notify("b", color.b);
-			notify("a", color.a);
-			notify("hexa", color.getHexa());
-			output_color.style.backgroundColor = color.getRGBA();
-		}
-
-		var setInputComponent = function setInputComponent(node) {
-			var topic = node.getAttribute('data-topic');
-			var title = node.getAttribute('data-title');
-			var action = node.getAttribute('data-action');
-			title = title === null ? '' : title;
-
-			var input = document.createElement('input');
-			var info = document.createElement('span');
-			info.textContent = title;
-
-			input.setAttribute('type', 'text');
-			input.setAttribute('data-action', 'set-' + action + '-' + topic);
-			node.appendChild(info);
-			node.appendChild(input);
-
-			input.addEventListener('click', function(e) {
-				this.select();
-			});
-
-			input.addEventListener('change', function(e) {
-				if (action === 'HSV')
-					inputChangeHSV(topic);
-				if (action === 'RGB')
-					inputChangeRGB(topic);
-				if (action === 'alpha')
-					inputChangeAlpha(topic);
-				if (action === 'hexa')
-					inputChangeHexa(topic);
-			});
-
-			subscribe(topic, function(value) {
-				node.children[1].value = value;
-			});
-		}
-
-		var inputChangeHSV = function actionHSV(topic) {
-			var selector = "[data-action='set-HSV-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value < 360)
-				color[topic] = value;
-
-			color.updateRGB();
-			updateUI();
-		}
-
-		var inputChangeRGB = function inputChangeRGB(topic) {
-			var selector = "[data-action='set-RGB-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value <= 255)
-				color[topic] = value;
-
-			color.updateHSV();
-			updateUI();
-		}
-
-		var inputChangeAlpha = function inputChangeAlpha(topic) {
-			var selector = "[data-action='set-alpha-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseFloat(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value <= 1)
-				color.a = value.toFixed(2);
-
-			updateUI();
-		}
-
-		var inputChangeHexa = function inputChangeHexa(topic) {
-			var selector = "[data-action='set-hexa-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = node.value;
-			color.setHexa(value);
-			color.updateHSV();
-			updateUI();
-		}
-
-		var setMouseTracking = function setMouseTracking(elem, callback) {
-
-			elem.addEventListener("mousedown", function(e) {
-				callback(e);
-				document.addEventListener("mousemove", callback);
-			});
-
-			document.addEventListener("mouseup", function(e) {
-				document.removeEventListener("mousemove", callback);
-			});
-		}
-
-		/*
-		 * Observer
-		 */
-		var setColor = function setColor(obj) {
-			if(obj instanceof Color !== true) {
-				console.log("Typeof instance not Color");
-				return;
-			}
-			color.copy(obj);
-			updateUI();
-		}
-
-		var subscribe = function subscribe(topic, callback) {
-			if (subscribers[topic] === undefined)
-				subscribers[topic] = [];
-
-			subscribers[topic].push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(topic, value) {
-			for (var i in subscribers[topic])
-				subscribers[topic][i](value);
-		}
-
-		var init = function init() {
-			colorpicker		= getElemById("colorpicker");
-			hue_area		= getElemById("hue");
-			gradient_area	= getElemById("gradient");
-			alpha_area		= getElemById("alpha");
-			gradient_picker	= getElemById("gradient_picker");
-			hue_selector	= getElemById("hue_selector");
-			alpha_selector	= getElemById("alpha_selector");
-			output_color	= getElemById("output_color");
-
-			var elem = document.querySelectorAll('#colorpicker .input');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				setInputComponent(elem[i]);
-
-			setMouseTracking(gradient_area, updateColor);
-			setMouseTracking(hue_area, updateHue);
-			setMouseTracking(alpha_area, updateAlpha);
-
-		}
-
-		return {
-			init : init,
-			setColor : setColor,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/*
-	 * Element Class
-	 */
-	var CssClass = function CssClass(id) {
-		this.left = 0;
-		this.top = 0;
-		this.rotate = 0;
-		this.width = 300;
-		this.height = 100;
-		this.display = true;
-		this.border = true;
-		this.zIndex = -1;
-		this.bgcolor = new Color();
-		this.id = id;
-		this.node = getElemById('obj-' + id);
-		this.object = getElemById(id);
-		this.shadowID = null;
-		this.shadows = []
-		this.render = [];
-		this.init();
-	}
-
-	CssClass.prototype.init = function init() {
-		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
-		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
-
-		this.setTop(this.top);
-		this.setLeft(this.left);
-		this.setHeight(this.height);
-		this.setWidth(this.width);
-		this.bgcolor.setHSV(0, 0, 100);
-		this.updateBgColor(this.bgcolor);
-	}
-
-	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
-		this.left += deltaX;
-		this.top += deltaY;
-		this.node.style.top = this.top + "px";
-		this.node.style.left = this.left + "px";
-		SliderManager.setValue("left", this.left);
-		SliderManager.setValue("top", this.top);
-	}
-
-	CssClass.prototype.setLeft = function setLeft(value) {
-		this.left = value;
-		this.node.style.left = this.left + "px";
-		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
-	}
-
-	CssClass.prototype.setTop = function setTop(value) {
-		this.top = value;
-		this.node.style.top = this.top + 'px';
-		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
-	}
-
-	CssClass.prototype.setWidth = function setWidth(value) {
-		this.width = value;
-		this.node.style.width = this.width + 'px';
-		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
-	}
-
-	CssClass.prototype.setHeight = function setHeight(value) {
-		this.height = value;
-		this.node.style.height = this.height + 'px';
-		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
-	}
-
-	// Browser support
-	CssClass.prototype.setRotate = function setRotate(value) {
-		var cssvalue = 'rotate(' + value +'deg)';
-
-		this.node.style.transform = cssvalue;
-		this.node.style.webkitTransform = cssvalue;
-		this.node.style.msTransform = cssvalue;
-
-		if (value !== 0) {
-			if (this.rotate === 0) {
-				OutputManager.toggleProperty(this.id, 'transform', true);
-				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
-				OutputManager.toggleProperty(this.id, '-ms-transform', true);
-			}
-		}
-		else {
-			OutputManager.toggleProperty(this.id, 'transform', false);
-			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
-			OutputManager.toggleProperty(this.id, '-ms-transform', false);
-		}
-
-		OutputManager.updateProperty(this.id, 'transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
-		this.rotate = value;
-	}
-
-	CssClass.prototype.setzIndex = function setzIndex(value) {
-		this.node.style.zIndex = value;
-		OutputManager.updateProperty(this.id, 'z-index', value);
-		this.zIndex = value;
-	}
-
-	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
-		if (typeof value !== "boolean" || this.display === value)
-			return;
-
-		this.display = value;
-		var display = this.display === true ? "block" : "none";
-		this.node.style.display = display;
-		this.object.style.display = display;
-	}
-
-	CssClass.prototype.toggleBorder = function toggleBorder(value) {
-		if (typeof value !== "boolean" || this.border === value)
-			return;
-
-		this.border = value;
-		var border = this.border === true ? "1px solid #CCC" : "none";
-		this.node.style.border = border;
-	}
-
-	CssClass.prototype.updateBgColor = function updateBgColor(color) {
-		this.bgcolor.copy(color);
-		this.node.style.backgroundColor = color.getColor();
-		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
-	}
-
-	CssClass.prototype.updateShadows = function updateShadows() {
-		if (this.render.length === 0)
-			OutputManager.toggleProperty(this.id, 'box-shadow', false);
-		if (this.render.length === 1)
-			OutputManager.toggleProperty(this.id, 'box-shadow', true);
-
-		this.node.style.boxShadow = this.render.join(", ");
-		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
-
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-
-		var preview;
-		var classes = [];
-		var active = null;
-		var animate = false;
-
-		/*
-		 * Toll actions
-		 */
-		var addCssClass = function addCssClass(id) {
-			classes[id] = new CssClass(id);
-		}
-
-		var setActiveClass = function setActiveClass(id) {
-			active = classes[id];
-			active.shadowID = null;
-			ColoPicker.setColor(classes[id].bgcolor);
-			SliderManager.setValue("top", active.top);
-			SliderManager.setValue("left", active.left);
-			SliderManager.setValue("rotate", active.rotate);
-			SliderManager.setValue("z-index", active.zIndex);
-			SliderManager.setValue("width", active.width);
-			SliderManager.setValue("height", active.height);
-			ButtonManager.setValue("border-state", active.border);
-			active.updateShadows();
-		}
-
-		var disableClass = function disableClass(topic) {
-			classes[topic].toggleDisplay(false);
-			ButtonManager.setValue(topic, false);
-		}
-
-		var addShadow = function addShadow(position) {
-			if (animate === true)
-				return -1;
-
-			active.shadows.splice(position, 0, new Shadow());
-			active.render.splice(position, 0, null);
-		}
-
-		var swapShadow = function swapShadow(id1, id2) {
-			var x = active.shadows[id1];
-			active.shadows[id1] = active.shadows[id2];
-			active.shadows[id2] = x;
-			updateShadowCSS(id1);
-			updateShadowCSS(id2);
-		}
-
-		var deleteShadow = function deleteShadow(position) {
-			active.shadows.splice(position, 1);
-			active.render.splice(position, 1);
-			active.updateShadows();
-		}
-
-		var setActiveShadow = function setActiveShadow(id, glow) {
-			active.shadowID = id;
-			ColoPicker.setColor(active.shadows[id].color);
-			ButtonManager.setValue("inset", active.shadows[id].inset);
-			SliderManager.setValue("blur", active.shadows[id].blur);
-			SliderManager.setValue("spread", active.shadows[id].spread);
-			SliderManager.setValue("posX", active.shadows[id].posX);
-			SliderManager.setValue("posY", active.shadows[id].posY);
-			if (glow === true)
-				addGlowEffect(id);
-		}
-
-		var addGlowEffect = function addGlowEffect(id) {
-			if (animate === true)
-				return;
-
-			animate = true;
-			var store = new Shadow();
-			var shadow = active.shadows[id];
-
-			store.copy(shadow);
-			shadow.color.setRGBA(40, 125, 200, 1);
-			shadow.blur = 10;
-			shadow.spread = 10;
-
-			active.node.style.transition = "box-shadow 0.2s";
-			updateShadowCSS(id);
-
-			setTimeout(function() {
-				shadow.copy(store);
-				updateShadowCSS(id);
-				setTimeout(function() {
-					active.node.style.removeProperty("transition");
-					animate = false;
-				}, 100);
-			}, 200);
-		}
-
-		var updateActivePos = function updateActivePos(deltaX, deltaY) {
-			if (active.shadowID === null)
-				active.updatePos(deltaX, deltaY);
-			else
-				updateShadowPos(deltaX, deltaY);
-		}
-
-		/*
-		 * Shadow properties
-		 */
-		var updateShadowCSS = function updateShadowCSS(id) {
-			active.render[id] = active.shadows[id].computeCSS();
-			active.updateShadows();
-		}
-
-		var toggleShadowInset = function toggleShadowInset(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].toggleInset(value);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
-			var shadow = active.shadows[active.shadowID];
-			shadow.posX += deltaX;
-			shadow.posY += deltaY;
-			SliderManager.setValue("posX", shadow.posX);
-			SliderManager.setValue("posY", shadow.posY);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosX = function setShadowPosX(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posX = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosY = function setShadowPosY(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posY = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowBlur = function setShadowBlur(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].blur = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowSpread = function setShadowSpread(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].spread = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowColor = function updateShadowColor(color) {
-			active.shadows[active.shadowID].color.copy(color);
-			updateShadowCSS(active.shadowID);
-		}
-
-		/*
-		 * Element Properties
-		 */
-		var updateColor = function updateColor(color) {
-			if (active.shadowID === null)
-				active.updateBgColor(color);
-			else
-				updateShadowColor(color);
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-
-			ColoPicker.subscribe("color", updateColor);
-			PreviewMouseTracking.subscribe(updateActivePos);
-
-			// Affects shadows
-			ButtonManager.subscribe("inset", toggleShadowInset);
-			SliderManager.subscribe("posX", setShadowPosX);
-			SliderManager.subscribe("posY", setShadowPosY);
-			SliderManager.subscribe("blur", setShadowBlur);
-			SliderManager.subscribe("spread", setShadowSpread);
-
-			// Affects element
-			SliderManager.subscribe("top", function(value){
-				active.setTop(value);
-			});
-			SliderManager.subscribe("left", function(value){
-				active.setLeft(value);
-			});
-			SliderManager.subscribe("rotate", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setRotate(value);
-			});
-
-			SliderManager.subscribe("z-index", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setzIndex(value);
-			});
-
-			SliderManager.subscribe("width", function(value) {
-				active.setWidth(value)
-			});
-
-			SliderManager.subscribe("height", function(value) {
-				active.setHeight(value)
-			});
-
-			// Actions
-			classes['before'].top = -30;
-			classes['before'].left = -30;
-			classes['after'].top = 30;
-			classes['after'].left = 30;
-			classes['before'].toggleDisplay(false);
-			classes['after'].toggleDisplay(false);
-			ButtonManager.setValue('before', false);
-			ButtonManager.setValue('after', false);
-
-			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
-			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
-
-			ButtonManager.subscribe("border-state", function(value) {
-				active.toggleBorder(value);
-			});
-
-		}
-
-		return {
-			init 			: init,
-			addShadow		: addShadow,
-			swapShadow		: swapShadow,
-			addCssClass		: addCssClass,
-			disableClass	: disableClass,
-			deleteShadow	: deleteShadow,
-			setActiveClass	: setActiveClass,
-			setActiveShadow : setActiveShadow
-		}
-
-	})();
-
-	/**
-	 * Layer Manager
-	 */
-	var LayerManager = (function LayerManager() {
-		var stacks = [];
-		var active = {
-			node : null,
-			stack : null
-		}
-		var elements = {};
-
-		var mouseEvents = function mouseEvents(e) {
-			var node = e.target;
-			var type = node.getAttribute('data-type');
-
-			if (type === 'subject')
-				setActiveStack(stacks[node.id]);
-
-			if (type === 'disable') {
-				Tool.disableClass(node.parentNode.id);
-				setActiveStack(stacks['element']);
-			}
-
-			if (type === 'add')
-				active.stack.addLayer();
-
-			if (type === 'layer')
-				active.stack.setActiveLayer(node);
-
-			if (type === 'delete')
-				active.stack.deleteLayer(node.parentNode);
-
-			if (type === 'move-up')
-				active.stack.moveLayer(1);
-
-			if (type === 'move-down')
-				active.stack.moveLayer(-1);
-		}
-
-		var setActiveStack = function setActiveStack(stackObj) {
-			active.stack.hide();
-			active.stack = stackObj;
-			active.stack.show();
-		}
-
-		/*
-		 * Stack object
-		 */
-		var Stack = function Stack(subject) {
-			var S = document.createElement('div');
-			var title = document.createElement('div');
-			var stack = document.createElement('div');
-
-			S.className = 'container';
-			stack.className = 'stack';
-			title.className = 'title';
-			title.textContent = subject.getAttribute('data-title');
-			S.appendChild(title);
-			S.appendChild(stack);
-
-			this.id = subject.id;
-			this.container = S;
-			this.stack = stack;
-			this.subject = subject;
-			this.order = [];
-			this.uid = 0;
-			this.count = 0;
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.addLayer = function addLayer() {
-			if (Tool.addShadow(this.layerID) == -1)
-				return;
-
-			var uid = this.getUID();
-			var layer = this.createLayer(uid);
-
-			if (this.layer === null && this.stack.children.length >= 1)
-				this.layer = this.stack.children[0];
-
-			this.stack.insertBefore(layer, this.layer);
-			this.order.splice(this.layerID, 0, uid);
-			this.count++;
-			this.setActiveLayer(layer);
-		}
-
-		Stack.prototype.createLayer = function createLayer(uid) {
-			var layer = document.createElement('div');
-			var del = document.createElement('span');
-
-			layer.className = 'node';
-			layer.setAttribute('data-shid', uid);
-			layer.setAttribute('data-type', 'layer');
-			layer.textContent = 'Ombre ' + uid;
-
-			del.className = 'delete';
-			del.setAttribute('data-type', 'delete');
-
-			layer.appendChild(del);
-			return layer;
-		}
-
-		Stack.prototype.getUID = function getUID() {
-			return this.uid++;
-		}
-
-		// SOLVE IE BUG
-		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count <= 1 || this.layer === null)
-				return;
-			if (direction === -1 && this.layerID === (this.count - 1) )
-				return;
-			if (direction === 1 && this.layerID === 0 )
-				return;
-
-			if (direction === -1) {
-				var before = null;
-				Tool.swapShadow(this.layerID, this.layerID + 1);
-				this.swapOrder(this.layerID, this.layerID + 1);
-				this.layerID += 1;
-
-				if (this.layerID + 1 !== this.count)
-					before = this.stack.children[this.layerID + 1];
-
-				this.stack.insertBefore(this.layer, before);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-
-			if (direction === 1) {
-				Tool.swapShadow(this.layerID, this.layerID - 1);
-				this.swapOrder(this.layerID, this.layerID - 1);
-				this.layerID -= 1;
-				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-		}
-
-		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
-			var x = this.order[pos1];
-			this.order[pos1] = this.order[pos2];
-			this.order[pos2] = x;
-		}
-
-		Stack.prototype.deleteLayer = function deleteLayer(node) {
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			var index = this.order.indexOf(shadowID);
-			this.stack.removeChild(this.stack.children[index]);
-			this.order.splice(index, 1);
-			this.count--;
-
-			Tool.deleteShadow(index);
-
-			if (index > this.layerID)
-				return;
-
-			if (index == this.layerID) {
-				if (this.count >= 1) {
-					this.layerID = 0;
-					this.setActiveLayer(this.stack.children[0], true);
-				}
-				else {
-					this.layer = null;
-					this.show();
-				}
-			}
-
-			if (index < this.layerID) {
-				this.layerID--;
-				Tool.setActiveShadow(this.layerID, true);
-			}
-
-		}
-
-		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
-			elements.shadow_properties.style.display = 'block';
-			elements.element_properties.style.display = 'none';
-
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = node;
-			this.layer.setAttribute('data-active', 'layer');
-
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			this.layerID = this.order.indexOf(shadowID);
-			Tool.setActiveShadow(this.layerID, true);
-		}
-
-		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.hide = function hide() {
-			this.unsetActiveLayer();
-			this.subject.removeAttribute('data-active');
-			var style = this.container.style;
-			style.left = '100%';
-			style.zIndex = '0';
-		}
-
-		Stack.prototype.show = function show() {
-			elements.shadow_properties.style.display = 'none';
-			elements.element_properties.style.display = 'block';
-
-			if (this.id === 'element') {
-				elements.zIndex.style.display = 'none';
-				elements.transform_rotate.style.display = 'none';
-			}
-			else {
-				elements.zIndex.style.display = 'block';
-				elements.transform_rotate.style.display = 'block';
-			}
-
-			this.subject.setAttribute('data-active', 'subject');
-			var style = this.container.style;
-			style.left = '0';
-			style.zIndex = '10';
-			Tool.setActiveClass(this.id);
-		}
-
-		function init() {
-
-			var elem, size;
-			var layerManager = getElemById("layer_manager");
-			var layerMenu = getElemById("layer_menu");
-			var container = getElemById("stack_container");
-
-			elements.shadow_properties = getElemById('shadow_properties');
-			elements.element_properties = getElemById('element_properties');
-			elements.transform_rotate = getElemById('transform_rotate');
-			elements.zIndex = getElemById('z-index');
-
-			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
-			size = elem.length;
-
-			for (var i = 0; i < size; i++) {
-				var S = new Stack(elem[i]);
-				stacks[elem[i].id] = S;
-				container.appendChild(S.container);
-				Tool.addCssClass(elem[i].id);
-			}
-
-			active.stack = stacks['element'];
-			stacks['element'].show();
-
-			layerManager.addEventListener("click", mouseEvents);
-			layerMenu.addEventListener("click", mouseEvents);
-
-			ButtonManager.subscribe("before", function(value) {
-				if (value === false && active.stack === stacks['before'])
-					setActiveStack(stacks['element'])
-				if (value === true && active.stack !== stacks['before'])
-					setActiveStack(stacks['before'])
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				if (value === false && active.stack === stacks['after'])
-					setActiveStack(stacks['element'])
-				if (value === true && active.stack !== stacks['after'])
-					setActiveStack(stacks['after'])
-			});
-		}
-
-		return {
-			init : init
-		}
-	})();
-
-	/*
-	 * OutputManager
-	 */
-	var OutputManager = (function OutputManager() {
-		var classes = [];
-		var buttons = [];
-		var active = null;
-		var menu = null;
-		var button_offset = 0;
-
-		var crateOutputNode = function(topic, property) {
-
-			var prop = document.createElement('div');
-			var name = document.createElement('span');
-			var value = document.createElement('span');
-
-			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
-
-			name.textContent = '\t' + pmatch[4];
-
-			if (pmatch[3] !== undefined) {
-				name.textContent = '\t' + pmatch[2];
-				value.textContent = pmatch[3] + ';';
-			}
-
-			name.textContent += ': ';
-			prop.className = 'css-property';
-			name.className = 'name';
-			value.className = 'value';
-			prop.appendChild(name);
-			prop.appendChild(value);
-
-			classes[topic].node.appendChild(prop);
-			classes[topic].line[property] = prop;
-			classes[topic].prop[property] = value;
-		}
-
-		var OutputClass = function OutputClass(node) {
-			var topic = node.getAttribute('data-topic');
-			var prop = node.getAttribute('data-prop');
-			var name = node.getAttribute('data-name');
-			var properties = prop.split(' ');
-
-			classes[topic] = {};
-			classes[topic].node = node;
-			classes[topic].prop = [];
-			classes[topic].line = [];
-			classes[topic].button = new Button(topic);
-
-			var open_decl = document.createElement('div');
-			var end_decl = document.createElement('div');
-
-			open_decl.textContent = name + ' {';
-			end_decl.textContent = '}';
-			node.appendChild(open_decl);
-
-			for (var i in properties)
-				crateOutputNode(topic, properties[i]);
-
-			node.appendChild(end_decl);
-		}
-
-		var Button = function Button(topic) {
-			var button = document.createElement('div');
-
-			button.className = 'button';
-			button.textContent = topic;
-			button.style.left = button_offset + 'px';
-			button_offset += 100;
-
-			button.addEventListener("click", function() {
-				toggleDisplay(topic);
-			})
-
-			menu.appendChild(button);
-			return button;
-		}
-
-		var toggleDisplay = function toggleDisplay(topic) {
-			active.button.removeAttribute('data-active');
-			active.node.style.display = 'none';
-			active = classes[topic];
-			active.node.style.display = 'block';
-			active.button.setAttribute('data-active', 'true');
-		}
-
-		var toggleButton = function toggleButton(topic, value) {
-			var display = (value === true) ? 'block' : 'none';
-			classes[topic].button.style.display = display;
-
-			if (value === true)
-				toggleDisplay(topic);
-			else
-				toggleDisplay('element');
-		}
-
-		var updateProperty = function updateProperty(topic, property, data) {
-			try {
-				classes[topic].prop[property].textContent = data + ';';
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ", topic, property, data);
-			}
-		}
-
-		var toggleProperty = function toggleProperty(topic, property, value) {
-			var display = (value === true) ? 'block' : 'none';
-			try {
-				classes[topic].line[property].style.display = display;
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ",classes, topic, property, value);
-			}
-		}
-
-		var init = function init() {
-
-			menu = getElemById('menu');
-
-			var elem = document.querySelectorAll('#output .output');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				OutputClass(elem[i]);
-
-			active = classes['element'];
-			toggleDisplay('element');
-
-			ButtonManager.subscribe("before", function(value) {
-				toggleButton('before', value);
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				toggleButton('after', value);
-			});
-		}
-
-		return {
-			init : init,
-			updateProperty : updateProperty,
-			toggleProperty : toggleProperty
-		}
-
-	})();
-
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		OutputManager.init();
-		ColoPicker.init();
-		SliderManager.init();
-		LayerManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
- -
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
- -

Voir aussi

- - diff --git "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" deleted file mode 100644 index 3bc62c03f1..0000000000 --- "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Modèle de boîte -slug: Web/CSS/Modèle_de_boîte_CSS -tags: - - Aperçu - - CSS - - CSS Box Model - - Overview - - Reference -translation_of: Web/CSS/CSS_Box_Model ---- -
{{CSSRef}}
- -

Le modèle de boîte CSS (Basic Box Model en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (padding) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.

- -

Référence

- -

Propriétés

- -

Les propriétés qui définissent le flux du contenu dans une boîte

- -
-
    -
  • {{cssxref("overflow")}}
    • -
  • {{cssxref("overflow-x")}}
    • -
  • {{cssxref("overflow-y")}}
    • -
-
- -

Les propriétés qui définissent la taille d'une boîte

- -
-
    -
  • {{cssxref("height")}}
    • -
  • {{cssxref("width")}}
    • -
  • {{cssxref("max-height")}}
    • -
  • {{cssxref("max-width")}}
    • -
  • {{cssxref("min-height")}}
    • -
  • {{cssxref("min-width")}}
    • -
-
- -

Les propriétés qui définissent les marges d'une boîte

- -
-
    -
  • {{cssxref("margin")}}
    • -
  • {{cssxref("margin-bottom")}}
    • -
  • {{cssxref("margin-left")}}
    • -
  • {{cssxref("margin-right")}}
    • -
  • {{cssxref("margin-top")}}
    • -
  • {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
    • -
-
- -

Les propriétés qui définissent le remplissage (padding) d'une boîte

- -
-
    -
  • {{cssxref("padding")}}
    • -
  • {{cssxref("padding-bottom")}}
    • -
  • {{cssxref("padding-left")}}
    • -
  • {{cssxref("padding-right")}}
    • -
  • {{cssxref("padding-top")}}
    • -
-
- -

Les autres propriétés

- -
-
    -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("visibility")}}
    • -
-
- -

Guides

- -
-
Une introduction au modèle de boîte CSS
-
Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (padding) ainsi que les différentes zones qui forment une boîte.
-
Maîtriser la fusion des marges
-
Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.
-
Le modèle de mise en forme visuel
-
Cet article explique le modèle de mise en forme visuel.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
diff --git "a/files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" "b/files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" deleted file mode 100644 index d9ac8b3f09..0000000000 --- "a/files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Modèle de mise en forme visuelle -slug: Web/CSS/Modèle_de_mise_en_forme_visuelle -tags: - - CSS - - Intermédiaire - - NeedsUpdate -translation_of: Web/CSS/Visual_formatting_model ---- -
{{CSSRef}}
- -

En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans le modèle de boîtes CSS. La disposition de chaque boîte est dictée par :

- -
    -
  • Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non
    • -
  • Le type de la boîte : en ligne, en ligne et de niveau (inline-level), atomique, en bloc
    • -
  • Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue
    • -
  • Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins
    • -
  • La taille et la position de la zone d'affichage (viewport)
    • -
  • Les dimensions intrinsèques des images qu'elle contient
    • -
  • Éventuellement d'autres informations externes.
    • -
- -

Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais overflow).

- -

Génération de la boîte

- -

Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.

- -

Les éléments de bloc et les boîtes de bloc

- -

Un élément est dit « de bloc » lorsque la valeur calculée de la propriété {{cssxref("display")}} qui lui est appliquée vaut : block, list-item ou table. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.

- -

Chaque boîte de bloc contribue au contexte de mise en forme des blocs. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.

- -

La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.

- -

venn_blocks.png

- -

Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.

- -

Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.

- -

Les boîtes de bloc anonymes

- -

Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc anonymes.

- -

Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur initial.

- -

Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.

- -

Si on prend le code HTML suivant, mis en forme avec les règles par défaut (display:block) :

- -
<div>
-   Some inline text
-   <p>followed by a paragraph</p>
-   followed by more inline text.
-</div>
-
- -

On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :
-   anonymous_block-level_boxes.png

- -

À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur initial.

- -

Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.

- -

S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.

- -

Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura display:inline et {{HTMLElement("span")}} aura display:block :

- -
<p>
-  Some <em>inline</em> text
-  <span>followed by a paragraph</span>
-  followed by more inline text.
-</p>
- -

Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <span> et une pour le texte qui suit cet élément. On a alors la structure suivante :

- -

- -

Les éléments en ligne et les boîtes en ligne

- -

Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : inline, inline-block ou inline-table. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).

- -

Les éléments en ligne génèrent des boîtes en lignes qui contribuent au contexte de mise en forme en ligne.

- -

Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.

- -
<style>
-  span {
-    /* La valeur par défaut */
-    display:inline;
-  }
-</style>
-<div style="width:20em;">
-   Le texte dans le span <span>peut être divisé
-   en plusieurs lignes</span> dans une boîte en
-   ligne.
-</div>
-
- -
<style>
-  span {
-    display:inline-block;
-  }
-</style>
-<div style="width:20em;">
-   Le texte dans le span <span>ne peut pas être
-   divisé en plusieurs lignes car</span> il est
-   dans une boîte de type inline-block.
-</div>
-
- -

Les boîtes en ligne anonymes

- -

Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété relative à l'élément parent, pour les autres, elles vaudront initial.

- -

La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.

- -

Les autres types de boîte

- -

Les boîtes de ligne

- -

Les boîtes de ligne sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.

- -

Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.

- -

Les types de boîtes liés au modèle CSS

- -

En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :

- -
    -
  • Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende
    • -
  • Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu.
    • -
  • Les modèles de contenu expérimentaux en grille (CSS Grid) ou avec les boîtes flexibles (flexbox) définissent d'autres types de boîtes.
    • -
- -

Modes de positionnement

- -

Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :

- -
    -
  • Le mode de positionnement normal positionne les boîtes les unes après les autres
    • -
  • Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante
    • -
  • Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.
    • -
- -

Le mode normal

- -

Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut static ou relative et si la propriété CSS {{cssxref("float")}} vaut none.

- -

On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.

- -
    -
  • En positionnement statique (obtenu avec la valeur static pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.
    • -
  • En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut relative), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.
    • -
- -

Le mode flottant

- -

Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).

- -

Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de none et la propriété {{cssxref("position")}} avec static ou relative. Si {{cssxref("float")}} vaut left, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut right, elle sera à la fin de la ligne.

- -

Le mode absolu

- -

En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.

- -

Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut absolute ou fixed.

- -

Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (viewport) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.

- -

Voir aussi

- - diff --git a/files/fr/web/css/motion_path/index.html b/files/fr/web/css/motion_path/index.html deleted file mode 100644 index e6740d2023..0000000000 --- a/files/fr/web/css/motion_path/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Motion Path -slug: Web/CSS/Motion_Path -tags: - - Aperçu - - CSS - - Experimental - - Motion Path - - Reference -translation_of: Web/CSS/CSS_Motion_Path ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Motion Path est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée chemin.

- -

Référence

- -

Propriétés

- -
-
    -
  • {{cssxref("offset")}}
    • -
  • {{cssxref("offset-distance")}}
    • -
  • {{cssxref("offset-path")}}
    • -
  • {{cssxref("offset-rotate")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

offset

- - - -

{{Compat("css.properties.offset")}}

diff --git a/files/fr/web/css/mozilla_extensions/index.html b/files/fr/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..3d9acbff04 --- /dev/null +++ b/files/fr/web/css/mozilla_extensions/index.html @@ -0,0 +1,678 @@ +--- +title: Extensions CSS de Mozilla +slug: Web/CSS/Extensions_Mozilla +tags: + - CSS + - Mozilla + - Non-standard + - Reference +translation_of: Web/CSS/Mozilla_Extensions +--- +
{{CSSRef}}
+ +

Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à CSS : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe -moz.

+ +

Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)

+ +
+

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments XUL.

+
+ +
+

B

+ +
    +
  • {{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-box-align")}}
    • +
  • {{CSSxRef("-moz-box-direction")}}
    • +
  • {{CSSxRef("-moz-box-flex")}}
    • +
  • {{CSSxRef("-moz-box-ordinal-group")}}
    • +
  • {{CSSxRef("-moz-box-orient")}}
    • +
  • {{CSSxRef("-moz-box-pack")}}
    • +
+ +

C – I

+ +
    +
  • {{CSSxRef("-moz-context-properties")}}
    • +
  • {{CSSxRef("-moz-float-edge")}}
    • +
  • {{CSSxRef("-moz-force-broken-image-icon")}}
    • +
  • {{CSSxRef("-moz-image-region")}}
    • +
+ +

O

+ +
    +
  • {{CSSxRef("-moz-orient")}}
    • +
  • {{CSSxRef("-moz-osx-font-smoothing")}}
    • +
  • {{CSSxRef("-moz-outline-radius")}}
    • +
  • {{CSSxRef("-moz-outline-radius-bottomleft")}}
    • +
  • {{CSSxRef("-moz-outline-radius-bottomright")}}
    • +
  • {{CSSxRef("-moz-outline-radius-topleft")}}
    • +
  • {{CSSxRef("-moz-outline-radius-topright")}}
    • +
  • {{CSSxRef("overflow-clip-box")}}
    • +
  • {{CSSxRef("overflow-clip-box-block")}}
    • +
  • {{CSSxRef("overflow-clip-box-inline")}}
    • +
+ +

S – Z

+ +
    +
  • {{CSSxRef("-moz-stack-sizing")}}
    • +
  • {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • +
  • {{CSSxRef("-moz-user-focus")}}
    • +
  • {{CSSxRef("-moz-user-input")}}
    • +
  • {{CSSxRef("-moz-user-modify")}}
    • +
  • {{CSSxRef("-moz-window-dragging")}}
    • +
  • {{CSSxRef("-moz-window-shadow")}}
    • +
+
+ +

Anciennes propriétés spécifiques, désormais standardisées

+ +
+

Note : Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.

+
+ +
+
    +
  • +

    A

    +
    • +
  • {{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}
    • +
  • +

    B

    +
    • +
  • {{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]
    • +
  • {{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]
    • +
  • {{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]
    • +
  • {{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]
    • +
  • {{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]
    • +
  • {{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start")}}]
    • +
  • {{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]
    • +
  • {{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]
    • +
  • {{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]
    • +
  • {{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • +

    C

    +
    • +
  • {{CSSxRef("clip-path")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • {{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}
    • +
  • +

    F – M

    +
    • +
  • {{CSSxRef("filter")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • {{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]
    • +
  • {{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]
    • +
  • {{CSSxRef("mask")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • +

    O

    +
    • +
  • {{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}
    • +
  • {{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • +

    P

    +
    • +
  • {{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]
    • +
  • {{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]
    • +
  • {{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • +

    T – U

    +
    • +
  • {{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}
    • +
  • {{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}
    • +
+
+ +

Valeurs

+ +

Valeurs globales

+ +
+
    +
  • {{cssxref("initial","-moz-initial")}}
    • +
+
+ +

{{Cssxref("-moz-appearance")}}

+ +
+
    +
  • button
    • +
  • button-arrow-down
    • +
  • button-arrow-next
    • +
  • button-arrow-previous
    • +
  • button-arrow-up
    • +
  • button-bevel
    • +
  • checkbox
    • +
  • checkbox-container
    • +
  • checkbox-label
    • +
  • checkmenuitem
    • +
  • dialog
    • +
  • groupbox
    • +
  • listbox
    • +
  • menuarrow
    • +
  • menucheckbox
    • +
  • menuimage
    • +
  • menuitem
    • +
  • menuitemtext
    • +
  • menulist
    • +
  • menulist-button
    • +
  • menulist-text
    • +
  • menulist-textfield
    • +
  • menupopup
    • +
  • menuradio
    • +
  • menuseparator
    • +
  • -moz-mac-unified-toolbar{{Fx_minversion_inline(3.5)}}
    • +
  • -moz-win-borderless-glass
    • +
  • -moz-win-browsertabbar-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-communications-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-glass
    • +
  • -moz-win-media-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-window-button-box
    • +
  • -moz-window-button-box-maximized
    • +
  • -moz-window-button-close
    • +
  • -moz-window-button-maximize
    • +
  • -moz-window-button-minimize
    • +
  • -moz-window-button-restore
    • +
  • -moz-window-titlebar
    • +
  • -moz-window-titlebar-maximized
    • +
  • progressbar
    • +
  • progresschunk
    • +
  • radio
    • +
  • radio-container
    • +
  • radio-label
    • +
  • radiomenuitem
    • +
  • resizer
    • +
  • resizerpanel
    • +
  • scale-horizontal
    • +
  • scalethumb-horizontal
    • +
  • scalethumb-vertical
    • +
  • scale-vertical
    • +
  • scrollbarbutton-down
    • +
  • scrollbarbutton-left
    • +
  • scrollbarbutton-right
    • +
  • scrollbarbutton-up
    • +
  • scrollbar-small
    • +
  • scrollbarthumb-horizontal
    • +
  • scrollbarthumb-vertical
    • +
  • scrollbartrack-horizontal
    • +
  • scrollbartrack-vertical
    • +
  • separator
    • +
  • spinner
    • +
  • spinner-downbutton
    • +
  • spinner-textfield
    • +
  • spinner-upbutton
    • +
  • statusbar
    • +
  • statusbarpanel
    • +
  • tab
    • +
  • tabpanels
    • +
  • tab-scroll-arrow-back
    • +
  • tab-scroll-arrow-forward
    • +
  • textfield
    • +
  • textfield-multiline
    • +
  • toolbar
    • +
  • toolbarbutton-dropdown
    • +
  • toolbox
    • +
  • tooltip
    • +
  • treeheadercell
    • +
  • treeheadersortarrow
    • +
  • treeitem
    • +
  • treetwisty
    • +
  • treetwistyopen
    • +
  • treeview
    • +
  • window
    • +
+
+ +

{{cssxref("background-image")}}

+ +
+
    +
  • +

    Dégradés {{Gecko_minversion_inline("1.9.2")}}

    + +
      +
    • {{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}
      • +
    • {{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}
      • +
    +
    • +
  • +

    Éléments {{gecko_minversion_inline("2.0")}}

    + +
      +
    • {{cssxref("-moz-element")}}
      • +
    +
    • +
  • +

    Sub-images {{gecko_minversion_inline("2.0")}}

    + +
      +
    • {{cssxref("-moz-image-rect")}}
      • +
    +
    • +
+
+ +

{{Cssxref("border-color")}}

+ +
+
    +
  • -moz-use-text-color {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; currentcolor doit être utilisée à la place.
    • +
+
+ +

{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}

+ +
+
    +
  • -moz-bg-inset{{Obsolete_Inline(1.9)}}
    • +
  • -moz-bg-outset{{Obsolete_Inline(1.9)}}
    • +
  • -moz-bg-solid{{Obsolete_Inline(1.9)}}
    • +
+
+ +

Mots-clés pour {{cssxref("<color>")}}

+ +
+
    +
  • -moz-activehyperlinktext
    • +
  • -moz-hyperlinktext
    • +
  • -moz-visitedhyperlinktext
    • +
  • -moz-buttondefault
    • +
  • -moz-buttonhoverface
    • +
  • -moz-buttonhovertext
    • +
  • -moz-default-background-color{{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-default-color{{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-cellhighlight
    • +
  • -moz-cellhighlighttext
    • +
  • -moz-field
    • +
  • -moz-fieldtext
    • +
  • -moz-dialog
    • +
  • -moz-dialogtext
    • +
  • -moz-dragtargetzone
    • +
  • -moz-mac-accentdarkestshadow
    • +
  • -moz-mac-accentdarkshadow
    • +
  • -moz-mac-accentface
    • +
  • -moz-mac-accentlightesthighlight
    • +
  • -moz-mac-accentlightshadow
    • +
  • -moz-mac-accentregularhighlight
    • +
  • -moz-mac-accentregularshadow
    • +
  • -moz-mac-chrome-active{{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-chrome-inactive{{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-focusring
    • +
  • -moz-mac-menuselect
    • +
  • -moz-mac-menushadow
    • +
  • -moz-mac-menutextselect
    • +
  • -moz-menuhover
    • +
  • -moz-menuhovertext
    • +
  • -moz-win-communicationstext{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-mediatext{{gecko_minversion_inline(1.9)}}
    • +
  • -moz-nativehyperlinktext{{Gecko_minversion_inline("1.9.1")}}
    • +
+
+ +

{{Cssxref("display")}}

+ +
+
    +
  • -moz-box {{Deprecated_Inline}}
    • +
  • -moz-inline-block {{Obsolete_Inline}}
    • +
  • -moz-inline-box {{Deprecated_Inline}}
    • +
  • -moz-inline-grid{{Obsolete_Inline(62)}}
    • +
  • -moz-inline-stack{{Obsolete_Inline(62)}}
    • +
  • -moz-inline-table {{Obsolete_Inline}}
    • +
  • -moz-grid{{Obsolete_Inline(62)}}
    • +
  • -moz-grid-group{{Obsolete_Inline(62)}}
    • +
  • -moz-grid-line{{Obsolete_Inline(62)}}
    • +
  • -moz-groupbox{{Obsolete_Inline}}
    • +
  • -moz-deck{{Obsolete_Inline(62)}}
    • +
  • -moz-popup{{Obsolete_Inline(62)}}
    • +
  • -moz-stack{{Obsolete_Inline(62)}}
    • +
  • -moz-marker{{Obsolete_Inline(62)}}
    • +
+
+ +

{{cssxref("empty-cells")}}

+ +
+
    +
  • -moz-show-background (valeur par défaut en quirks mode)
    • +
+
+ +

{{Cssxref("font")}}

+ +
+
    +
  • -moz-button
    • +
  • -moz-info
    • +
  • -moz-desktop
    • +
  • -moz-dialog (également une couleur)
    • +
  • -moz-document
    • +
  • -moz-workspace
    • +
  • -moz-window
    • +
  • -moz-list
    • +
  • -moz-pull-down-menu
    • +
  • -moz-field (également une couleur)
    • +
+
+ +

{{Cssxref("font-family")}}

+ +
+
    +
  • -moz-fixed
    • +
+
+ +

{{Cssxref("image-rendering")}}

+ +
+
    +
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • +
+
+ +

{{cssxref("<length>")}}

+ +
+
    +
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • +
+
+ +

{{Cssxref("list-style-type")}}

+ +
+
    +
  • -moz-arabic-indic
    • +
  • -moz-bengali
    • +
  • -moz-cjk-earthly-branch
    • +
  • -moz-cjk-heavenly-stem
    • +
  • -moz-devanagari
    • +
  • -moz-ethiopic-halehame
    • +
  • -moz-ethiopic-halehame-am
    • +
  • -moz-ethiopic-halehame-ti-er
    • +
  • -moz-ethiopic-halehame-ti-et
    • +
  • -moz-ethiopic-numeric
    • +
  • -moz-gujarati
    • +
  • -moz-gurmukhi
    • +
  • -moz-hangul
    • +
  • -moz-hangul-consonant
    • +
  • -moz-japanese-formal
    • +
  • -moz-japanese-informal
    • +
  • -moz-kannada
    • +
  • -moz-khmer
    • +
  • -moz-lao
    • +
  • -moz-malayalam
    • +
  • -moz-myanmar
    • +
  • -moz-oriya
    • +
  • -moz-persian
    • +
  • -moz-simp-chinese-formal
    • +
  • -moz-simp-chinese-informal
    • +
  • -moz-tamil
    • +
  • -moz-telugu
    • +
  • -moz-thai
    • +
  • -moz-trad-chinese-formal
    • +
  • -moz-trad-chinese-informal
    • +
  • -moz-urdu
    • +
+
+ +

{{Cssxref("overflow")}}

+ +
+
    +
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • +
+
+ +

{{Cssxref("text-align")}}

+ +
+
    +
  • -moz-center
    • +
  • -moz-left
    • +
  • -moz-right
    • +
+
+ +

{{Cssxref("text-decoration")}}

+ +
+
    +
  • -moz-anchor-decoration
    • +
+
+ +

{{Cssxref("-moz-user-select")}}

+ +
+
    +
  • -moz-all
    • +
  • -moz-none
    • +
+
+ +

{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}

+ +
+
    +
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-available {{Fx_minversion_inline(3)}}
    • +
+
+ +

Pseudo-éléments et pseudo-classes

+ +
+
    +
  • +

    A – D

    +
    • +
  • {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
    • +
  • {{CSSxRef("::-moz-anonymous-positioned-block")}}
    • +
  • {{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-any-link")}} [Matches :link and :visited]
    • +
  • {{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-canvas")}}
    • +
  • {{CSSxRef("::-moz-color-swatch")}}
    • +
  • {{CSSxRef("::-moz-cell-content")}}
    • +
  • {{CSSxRef(":-moz-drag-over")}}
    • +
  • +

    F – I

    +
    • +
  • {{CSSxRef(":-moz-first-node")}}
    • +
  • {{CSSxRef("::-moz-focus-inner")}}
    • +
  • {{CSSxRef("::-moz-focus-outer")}}
    • +
  • {{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}
    • +
  • {{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}
    • +
  • {{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef("::-moz-inline-table")}}
    • +
  • +

    L

    +
    • +
  • {{CSSxRef(":-moz-last-node")}}
    • +
  • {{CSSxRef(":-moz-list-bullet")}}
    • +
  • {{CSSxRef(":-moz-list-number")}}
    • +
  • {{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • +

    N – R

    +
    • +
  • {{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}
    • +
  • {{CSSxRef(":-moz-only-whitespace")}}
    • +
  • {{CSSxRef("::-moz-page")}}
    • +
  • {{CSSxRef("::-moz-page-sequence")}}
    • +
  • {{CSSxRef("::-moz-pagebreak")}}
    • +
  • {{CSSxRef("::-moz-pagecontent")}}
    • +
  • {{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}
    • +
  • {{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}
    • +
  • {{CSSxRef("::-moz-progress-bar")}}
    • +
  • {{CSSxRef("::-moz-range-progress")}}
    • +
  • {{CSSxRef("::-moz-range-thumb")}}
    • +
  • {{CSSxRef("::-moz-range-track")}}
    • +
  • {{CSSxRef(":-moz-read-only")}}
    • +
  • {{CSSxRef(":-moz-read-write")}}
    • +
  • +

    S

    +
    • +
  • {{CSSxRef("::-moz-scrolled-canvas")}}
    • +
  • {{CSSxRef("::-moz-scrolled-content")}}
    • +
  • {{CSSxRef("::-moz-scrolled-page-sequence")}}
    • +
  • {{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}
    • +
  • {{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-svg-foreign-content")}}
    • +
  • +

    T

    +
    • +
  • {{CSSxRef("::-moz-table")}}
    • +
  • {{CSSxRef("::-moz-table-cell")}}
    • +
  • {{CSSxRef("::-moz-table-column")}}
    • +
  • {{CSSxRef("::-moz-table-column-group")}}
    • +
  • {{CSSxRef("::-moz-table-outer")}}
    • +
  • {{CSSxRef("::-moz-table-row")}}
    • +
  • {{CSSxRef("::-moz-table-row-group")}}
    • +
  • {{CSSxRef(":-moz-tree-cell")}}
    • +
  • {{CSSxRef(":-moz-tree-cell-text")}}
    • +
  • {{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-tree-checkbox")}}
    • +
  • {{CSSxRef(":-moz-tree-column")}}
    • +
  • {{CSSxRef(":-moz-tree-drop-feedback")}}
    • +
  • {{CSSxRef(":-moz-tree-image")}}
    • +
  • {{CSSxRef(":-moz-tree-indentation")}}
    • +
  • {{CSSxRef(":-moz-tree-line")}}
    • +
  • {{CSSxRef(":-moz-tree-progressmeter")}}
    • +
  • {{CSSxRef(":-moz-tree-row")}}
    • +
  • {{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-tree-separator")}}
    • +
  • {{CSSxRef(":-moz-tree-twisty")}}
    • +
  • +

    U – X

    +
    • +
  • {{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-viewport")}}
    • +
  • {{CSSxRef("::-moz-viewport-scroll")}}
    • +
  • {{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef("::-moz-xul-anonymous-block")}}
    • +
+
+ +

Règles @

+ +
+
    +
  • {{Cssxref("@-moz-document")}}
    • +
+
+ +

Caractéristiques

+ +
+
    +
  • {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}
    • +
  • {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}
    • +
  • {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}
    • +
+
+ +

Autres

+ +
+
    +
  • {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
    • +
+
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" "b/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" deleted file mode 100644 index 9d114b8e9b..0000000000 --- "a/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Médias paginés -slug: Web/CSS/Média_paginés -tags: - - CSS - - Reference -translation_of: Web/CSS/Paged_Media ---- -
{{CSSRef}}
- -

Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :

- -
    -
  • {{cssxref("page-break-before")}}
    • -
  • {{cssxref("page-break-after")}}
    • -
  • {{cssxref("page-break-inside")}}
    • -
  • {{cssxref("orphans")}}
    • -
  • {{cssxref("widows")}}
    • -
  • {{cssxref("@page")}}
    • -
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 ---- -

{{ CSSRef() }}

-

Résumé

-

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

-

Utilisation

-
- 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.
-
    -
  • {{ Cssxref("animation-name") }}
    • -
  • {{ Cssxref("background-image") }}
    • -
  • {{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}
    • -
  • {{ Cssxref("clear") }}
    • -
  • {{ Cssxref("content") }}
    • -
  • {{ Cssxref("display") }}
    • -
  • {{ Cssxref("float") }}
    • -
  • {{ Cssxref("font-size-adjust") }}
    • -
  • {{ Cssxref("list-style-image") }}
    • -
  • {{ Cssxref("list-style-type") }}
    • -
  • {{ Cssxref("max-height") }}
    • -
  • {{ Cssxref("max-width") }}
    • -
  • {{ Cssxref("outline-style") }}
    • -
  • {{ Cssxref("quotes") }}
    • -
  • {{ Cssxref("resize") }}
    • -
  • {{ Cssxref("text-decoration") }}
    • -
  • {{ Cssxref("text-transform") }}
    • -
-

Extensions Mozilla :

-
    -
  • {{ Cssxref("-moz-transform") }}
    • -
  • {{ Cssxref("-moz-transition-property") }}
    • -
  • {{ Cssxref("-moz-text-blink") }}
    • -
  • {{ Cssxref("-moz-user-input") }}
    • -
  • {{ Cssxref("-moz-user-select") }}
    • -
  • {{ Cssxref("-moz-window-shadow") }}
    • -
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 ---- -

{{ CSSRef() }}

-

Résumé

-

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

-

Utilisation

-
- 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.
-
    -
  • {{ Cssxref("animation-direction") }}
    • -
  • {{ Cssxref("content") }}
    • -
  • {{ Cssxref("counter-increment") }}
    • -
  • {{ Cssxref("counter-reset") }}
    • -
  • {{ Cssxref("font-style") }}
    • -
  • {{ Cssxref("font-variant") }}
    • -
  • {{ Cssxref("font-weight") }}
    • -
  • {{ Cssxref("letter-spacing") }}
    • -
  • {{ Cssxref("white-space") }}
    • -
  • {{ Cssxref("word-spacing") }}
    • -
  • {{ Cssxref("word-wrap") }}
    • -
-

Extensions Mozilla :

-
    -
  • {{ Cssxref("-moz-appearance") }}
    • -
  • {{ Cssxref("-moz-box-direction") }}
    • -
  • {{ Cssxref("-moz-column-gap") }}
    • -
  • {{ Cssxref("-moz-column-rule-width") }}
    • -
-

{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}

diff --git "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" "b/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" deleted file mode 100644 index 6a4671d141..0000000000 --- "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Générateur de courbe de Bézier -slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier -tags: - - CSS - - Outils -translation_of: Web/CSS/Tools/Cubic_Bezier_Generator ---- -

{{Draft}}

- -
-

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

-
diff --git "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" "b/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" deleted file mode 100644 index ae2340fd73..0000000000 --- "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Générateur de dégradés linéaires -slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires -tags: - - CSS - - Outils -translation_of: Web/CSS/Tools/Linear-gradient_Generator ---- -

{{Draft}}

- -
-

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

-
diff --git a/files/fr/web/css/outils/index.html b/files/fr/web/css/outils/index.html deleted file mode 100644 index ac78261ad4..0000000000 --- a/files/fr/web/css/outils/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Outils -slug: Web/CSS/Outils -tags: - - CSS - - Outils -translation_of: Web/CSS/Tools ---- -

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.

- -

{{LandingPageListSubpages}}

- -

Autres outils

- -
    -
  • Stylie pour les animations
    • -
  • Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : mydevice.io
    • -
  • Construire des menus CSS - cssmenumaker.com
    • -
  • Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - stylelint
    • -
diff --git "a/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" "b/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" deleted file mode 100644 index e50bb21aa3..0000000000 --- "a/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 'Guide : ancrage du défilement (scroll anchoring)' -slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring ---- -
{{CSSRef}}
- -

Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).

- -

L'ancrage du défilement (ou scroll anchoring en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).

- -

Comment cela fonctionne ?

- -

L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (viewport). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).

- -

Comment activer l'ancrage du défilement ?

- -

Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.

- -

Si besoin, que faire pour le désactiver ?

- -

La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.

- -

Les valeurs utilisables pour cette propriété sont auto ou none :

- -
    -
  • auto correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.
    • -
  • none signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.
    • -
- -

Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :

- -
body {
-  overflow-anchor: none;
-}
- -

Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera overflow-anchor: none sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :

- -
.container {
-  overflow-anchor: none;
-}
- -
-

Note : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) overflow-anchor: auto à un autre endroit du document.

-
- -

Supression triggers

- -

La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.

- -

Les évènements en question sont les modifications des valeurs calculées des propriétés suivantes :

- -
    -
  • {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}
    • -
  • {{cssxref("margin")}} ou {{cssxref("padding")}}
    • -
  • Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}
    • -
  • {{cssxref("position")}}
    • -
  • {{cssxref("transform")}}
    • -
- -

Compatibilité des navigateurs

- -

Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser les requêtes de fonctionnalité afin de tester la prise en charge de la propriété overflow-anchor.

- - - -

{{Compat("css.properties.overflow-anchor")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html new file mode 100644 index 0000000000..e50bb21aa3 --- /dev/null +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -0,0 +1,79 @@ +--- +title: 'Guide : ancrage du défilement (scroll anchoring)' +slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring +--- +
{{CSSRef}}
+ +

Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).

+ +

L'ancrage du défilement (ou scroll anchoring en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).

+ +

Comment cela fonctionne ?

+ +

L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (viewport). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).

+ +

Comment activer l'ancrage du défilement ?

+ +

Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.

+ +

Si besoin, que faire pour le désactiver ?

+ +

La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.

+ +

Les valeurs utilisables pour cette propriété sont auto ou none :

+ +
    +
  • auto correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.
    • +
  • none signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.
    • +
+ +

Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :

+ +
body {
+  overflow-anchor: none;
+}
+ +

Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera overflow-anchor: none sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :

+ +
.container {
+  overflow-anchor: none;
+}
+ +
+

Note : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) overflow-anchor: auto à un autre endroit du document.

+
+ +

Supression triggers

+ +

La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.

+ +

Les évènements en question sont les modifications des valeurs calculées des propriétés suivantes :

+ +
    +
  • {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}
    • +
  • {{cssxref("margin")}} ou {{cssxref("padding")}}
    • +
  • Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("transform")}}
    • +
+ +

Compatibilité des navigateurs

+ +

Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser les requêtes de fonctionnalité afin de tester la prise en charge de la propriété overflow-anchor.

+ + + +

{{Compat("css.properties.overflow-anchor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/paged_media/index.html b/files/fr/web/css/paged_media/index.html new file mode 100644 index 0000000000..9d114b8e9b --- /dev/null +++ b/files/fr/web/css/paged_media/index.html @@ -0,0 +1,20 @@ +--- +title: Médias paginés +slug: Web/CSS/Média_paginés +tags: + - CSS + - Reference +translation_of: Web/CSS/Paged_Media +--- +
{{CSSRef}}
+ +

Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :

+ +
    +
  • {{cssxref("page-break-before")}}
    • +
  • {{cssxref("page-break-after")}}
    • +
  • {{cssxref("page-break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
  • {{cssxref("@page")}}
    • +
diff --git a/files/fr/web/css/position_value/index.html b/files/fr/web/css/position_value/index.html new file mode 100644 index 0000000000..03ddd68285 --- /dev/null +++ b/files/fr/web/css/position_value/index.html @@ -0,0 +1,129 @@ +--- +title: +slug: Web/CSS/Type_position +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/position_value +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <position> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <position>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.

+ +

Syntaxe

+ +

On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera left, right, top, bottom ou center (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).

+ +

Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).

+ +

Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est center.

+ +

Valeurs

+ +
/* Syntaxe avec une valeur */
+mot-clé                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
+<length> ou <percentage> /* La position sur l'axe */
+
+/* Syntaxe avec deux valeurs */
+mot-clé mot-clé          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
+mot-clé valeur           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
+valeur mot-clé           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
+valeur valeur            /* Une valeur pour chaque composante du décalage */
+
+/* Syntaxe avec quatre valeurs */
+mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
+
+ +

Syntaxe formelle

+ +
[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | <length> | <percentage> ]
+ [ top | center | bottom | <length> | <percentage> ]?
+|
+ [ [ left | right ] [ <length> | <percentage> ] ] &&
+ [ [ top | bottom ] [ <length> | <percentage> ] ]
+]
+
+ +

Interpolation

+ +

Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("<timing-function>")}}) et le point se déplacera donc sur une ligne.

+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+.exemple{
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
+  // Ici un exemple de valeur <position>
+  background-position:  2.5cm bottom;
+}
+ +

HTML

+ +
<div class="exemple">Exemple</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 120, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  <position> qui doit être utilisée.
{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}{{Spec2('CSS3 Backgrounds')}}<position> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}<position> est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.position")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html new file mode 100644 index 0000000000..5f5a3655e8 --- /dev/null +++ b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html @@ -0,0 +1,73 @@ +--- +title: 'Le sélecteur :visited et la vie privée' +slug: 'Web/CSS/:visited_et_la_vie_privée' +tags: + - CSS + - Guide + - Sécurité +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{CSSRef}}
+ +

Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.

+ +

Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.

+ +

Quelques petits mensonges pour se protéger

+ +

La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances. 

+ +
    +
  • window.getComputedStyle() et les fonctions analogues comme {{domxref("element.querySelector()")}} renverront toujours des valeurs indiquant que l'utilisateur n'a jamais visité aucun des liens présents sur une page.
    • +
  • Si on utilise un sélecteur d'élément voisin comme :visited + span, l'élément {{htmlelement("span")}} sera mis en forme comme si le lien n'avait pas été visité.
    • +
  • Enfin, dans quelques rares scénarios, si on utilise des liens imbriqués et que l'élément ciblé par CSS diffère du lien dont on souhaite savoir s'il a été visité, cet élément sera dessiné comme si le lien n'avait pas été visité.
    • +
+ +

Les limites de la mise en forme applicable aux liens visités

+ +

On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :

+ +
    +
  • {{cssxref("color")}},
    • +
  • {{cssxref("background-color")}},
    • +
  • {{cssxref("border-color")}} (et les propriétés détaillées associées),
    • +
  • {{cssxref("column-rule-color")}},
    • +
  • {{cssxref("outline-color")}},
    • +
  • Les composantes de couleur liées aux attributs SVG {{SVGAttr("fill")}} et {{SVGAttr("stroke")}}.
    • +
+ +

De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec rgba() ou hsla() ou avec le mot-clé transparent).

+ +

Voici un exemple de mise en forme prenant en compte ces restrictions :

+ +
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* La valeur par défaut de background-color est 'transparent'.
+     et il faut donc une valeur différente, sinon les modifications
+     pour :visited ne s'appliqueront pas. */
+}
+
+:visited {
+  outline-color: orange;     /* Les liens visités auront un contour orange */
+  color: yellow;             /* Le texte des liens visités sera en jaune   */
+  background-color: green;   /* L'arrière-plan des liens visités sera vert */
+}
+
+ +

Impact sur les développeurs web

+ +

De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :

+ +
    +
  • L'utilisation d'images d'arrière-plan pour la mise en forme des liens visités ne fonctionnera plus car seules les couleurs peuvent être utilisées pour les mettre en avant.
    • +
  • Les couleurs qui seraient transparentes de façon normale ne seront pas affichées si elles participent à la mise en forme d'un sélecteur :visited.
    • +
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" "b/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" deleted file mode 100644 index 6c390b9dc8..0000000000 --- "a/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Propriétés raccourcies -slug: Web/CSS/Propriétés_raccourcies -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/Shorthand_properties ---- -
{{CSSRef}}
- -

Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité.

- -

La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (font) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.

- -

Quelques cas aux limites épineux

- -

Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :

- -
    -
  1. Une valeur qui n'est pas définie pour la propriété raccourcie sera réinitialisée avec sa valeur initiale. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : - - 
    background-color: red;
-background: url(images/bg.gif) no-repeat top right;
-
    - ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} transparent car la deuxième déclaration prend le pas sur la première.
    2. -
  2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé inherit.
    3. -
  3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes : -
      -
    1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - -
      border1.png1 valeur : border-width: 1em — La valeur unique s'adresse à tous les côtés.
      border2.png2 valeurs : border-width: 1em 2em — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.
      border3.png3 valeurs : border-width: 1em 2em 3em — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.
      border4.png -

      4 valeurs : border-width: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).

      -
      -
      2. -
    2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - -
      corner1.png1 valeur : border-radius: 1em — La valeur s'applique à tous les coins.
      corner2.png2 valeurs : border-radius: 1em 2em — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.
      corner3.png3 valeurs : border-radius: 1em 2em 3em — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.
      corner4.png -

      4 valeurs : border-radius: 1em 2em 3em 4em — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).

      -
      -
      3. -
    -
    4. -
- -

Les propriétés concernant l'arrière-plan

- -

Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :

- -
background-color: #000;
-background-image: url(images/bg.gif);
-background-repeat: no-repeat;
-background-position: top right;
- -

On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :

- -
background: #000 url(images/bg.gif) no-repeat top right;
- -
-

Note : Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute background-attachment: scroll et d'autres propriétés avec CSS3).

-
- -

Pour plus d'informations, voir {{cssxref("background")}}.

- -

Les propriétés liées à la police (font)

- -

Les déclarations suivantes :

- -
font-style: italic;
-font-weight: bold;
-font-size: .8em;
-line-height: 1.2;
-font-family: Arial, sans-serif;
- -

Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :

- -
font: italic bold .8em/1.2 Arial, sans-serif;
- -
-

Note : Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera font-variant: normal et font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

-
- -

Les propriétés liées aux bordures

- -

Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,

- -
border-width: 1px;
-border-style: solid;
-border-color: #000;
- -

peut être écrit ainsi :

- -
border: 1px solid #000;
- -

Les propriétés liées à la marge et au remplissage (padding)

- -

Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (padding) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :

- -
margin-top: 10px;
-margin-right: 5px;
-margin-bottom: 10px;
-margin-left: 5px;
- -

sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à trouble) :

- -
margin: 10px 5px 10px 5px;
- -

La propriété raccourcie universelle

- -

CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.

- -

Voir l'article sur la cascade et l'héritage pour plus d'informations sur le fonctionnement de l'héritage.

- -

Voir aussi

- -
    -
  • La référence CSS
    • -
  • Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • -
diff --git a/files/fr/web/css/pseudo-elements/index.html b/files/fr/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..4f9ce9eeb9 --- /dev/null +++ b/files/fr/web/css/pseudo-elements/index.html @@ -0,0 +1,132 @@ +--- +title: Pseudo-éléments +slug: Web/CSS/Pseudo-éléments +tags: + - CSS + - Pseudo-element + - Reference + - Sélecteur +translation_of: Web/CSS/Pseudo-elements +--- +
{{CSSRef}}
+ +

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.

+ +
/* La première ligne de chaque élément <p>. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+
+ + + +
+

Note: À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

+
+ +

Syntaxe

+ +
sélecteur::pseudo-élément {
+  propriété: valeur;
+}
+ +

On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration

+ +

Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».

+ +

Liste des pseudo-éléments

+ +
+
    +
  • {{CSSxRef("::after", "::after (:after)")}}
    • +
  • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::before", "::before (:before)")}}
    • +
  • {{CSSxRef("::cue", "::cue (:cue)")}}
    • +
  • {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
    • +
  • {{CSSxRef("::first-line", "::first-line (:first-line)")}}
    • +
  • {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::marker")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::part")}} {{Experimental_inline}}
    • +
  • {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::selection")}}
    • +
  • {{CSSxRef("::slotted", "::slotted()")}}
    • +
  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
    • +
+
+ +

Exemples

+ +

CSS

+ +
p::first-line {
+  color: blue;
+}
+ +

HTML

+ +
<p>
+  C’était le Lapin Blanc qui revenait en trottinant,
+  et qui cherchait de tous côtés, d’un air inquiet,
+  comme s’il avait perdu quelque chose ; Alice
+  l’entendit qui marmottait : « La Duchesse ! La
+  Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe
+  et mes moustaches ! Elle me fera guillotiner aussi
+  vrai que des furets sont des furets ! Où pourrais-je
+  bien les avoir perdus ? » Alice devina tout de suite
+  qu’il cherchait l’éventail et la paire de gants paille,
+  et, comme elle avait bon cœur, elle se mit à les
+  chercher aussi ; mais pas moyen de les trouver.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 250, 200)}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimalePrise en charge de :
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" "b/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" deleted file mode 100644 index 4f9ce9eeb9..0000000000 --- "a/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Pseudo-éléments -slug: Web/CSS/Pseudo-éléments -tags: - - CSS - - Pseudo-element - - Reference - - Sélecteur -translation_of: Web/CSS/Pseudo-elements ---- -
{{CSSRef}}
- -

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.

- -
/* La première ligne de chaque élément <p>. */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
-
- - - -
-

Note: À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

-
- -

Syntaxe

- -
sélecteur::pseudo-élément {
-  propriété: valeur;
-}
- -

On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration

- -

Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».

- -

Liste des pseudo-éléments

- -
-
    -
  • {{CSSxRef("::after", "::after (:after)")}}
    • -
  • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("::before", "::before (:before)")}}
    • -
  • {{CSSxRef("::cue", "::cue (:cue)")}}
    • -
  • {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
    • -
  • {{CSSxRef("::first-line", "::first-line (:first-line)")}}
    • -
  • {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("::marker")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("::part")}} {{Experimental_inline}}
    • -
  • {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("::selection")}}
    • -
  • {{CSSxRef("::slotted", "::slotted()")}}
    • -
  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
    • -
-
- -

Exemples

- -

CSS

- -
p::first-line {
-  color: blue;
-}
- -

HTML

- -
<p>
-  C’était le Lapin Blanc qui revenait en trottinant,
-  et qui cherchait de tous côtés, d’un air inquiet,
-  comme s’il avait perdu quelque chose ; Alice
-  l’entendit qui marmottait : « La Duchesse ! La
-  Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe
-  et mes moustaches ! Elle me fera guillotiner aussi
-  vrai que des furets sont des furets ! Où pourrais-je
-  bien les avoir perdus ? » Alice devina tout de suite
-  qu’il cherchait l’éventail et la paire de gants paille,
-  et, comme elle avait bon cœur, elle se mit à les
-  chercher aussi ; mais pas moyen de les trouver.
-</p>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 250, 200)}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion minimalePrise en charge de :
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

Voir aussi

- - diff --git "a/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" "b/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" deleted file mode 100644 index ecd528838c..0000000000 --- "a/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Redimensionnement d'arrière-plans SVG -slug: Web/CSS/Redimensionnement_arrière-plans_SVG -tags: - - CSS - - Guide - - SVG -translation_of: Web/CSS/Scaling_of_SVG_backgrounds ---- -

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.

- -

Un algorithme simple

- -

Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :

- -
    -
  1. Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.
    2. -
  2. Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.
    3. -
  3. Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.
    4. -
  4. Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.
    5. -
- -

On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.

- -

Fichiers d'exemples

- -

Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.

- -

Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.

- -

Image sans dimension ni proportion

- -

Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.

- -

no-dimensions-or-ratio.png

- -

Fichier source SVG

- -

Image sans proportion avec une dimension fixée

- -

Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.

- -

100px-wide-no-height-or-ratio.png

- -

Fichier source SVG

- -

Image avec une dimension fixée et des proportions intrinsèques

- -

Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.

- -

On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.

- -

100px-height-3x4-ratio.png

- -

Fichier source SVG

- -

Image sans largeur ni hauteur mais avec des proportions intrinsèques

- -

Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.

- -

no-dimensions-1x1-ratio.png

- -

Fichier source SVG

- -

Exemples de redimensionnement

- -

Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec no-repeat pour plus de clarté..

- -
Note : Les images montrées ci-après illustrent le rendu attendu. Les navigateurs peuvent ne pas produire le bon résultat.
- -

Indiquer des dimensions fixées sur les deux axes

- -

Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.

- -

SVG source : Aucune dimension ni proportion

- -

Avec ces déclarations CSS :

- -
background: url(no-dimensions-or-ratio.svg);
-background-size: 125px 175px;
-
- -

On doit obtenir un résultat semblable à :

- -

fixed-no-dimensions-or-ratio.png

- -

SVG source : Une dimension définie et aucune proportion

- -

Avec ces déclarations CSS :

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: 250px 150px;
-
- -

On doit obtenir un résultat semblable à :

- -

fixed-100px-wide-no-height-or-ratio.png

- -

SVG source : Une dimension définie et des proportions intrinsèques

- -

Avec ces déclarations CSS :

- -
background: url(100px-height-3x4-ratio.svg);
-background-size: 275px 125px;
-
- -

On doit obtenir un résultat semblable à :

- -

fixed-100px-height-3x4-ratio.png

- -

SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques

- -

Avec ces déclarations CSS :

- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: 250px 100px;
-
- -

On doit obtenir un résultat semblable à :

- -

fixed-no-dimensions-1x1-ratio.png

- -

Utiliser contain ou cover

- -

En utilisant la valeur cover pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. contain fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.

- -

Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour cover/contain. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.

- -

SVG source : Aucune dimension ni proportion

- -

Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).

- -
background: url(no-dimensions-or-ratio.svg);
-background-size: contain;
-
- -

Le résultat obtenu sera :

- -

no-dimensions-or-ratio-contain.png

- -

SVG source : Une dimension définie et aucune proportion

- -

De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: contain;
-
- -

Le résultat obtenu sera :

- -

100px-wide-no-height-or-ratio-contain.png

- -

SVG source : Une dimension définie et des proportions intrinsèques

- -

Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de contain ou cover). Ainsi, avec contain, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.

- -
contain
- -
background: url(100px-height-3x4-ratio.svg);
-background-size: contain;
-
- -

Le résultat obtenu sera :

- -

100px-height-3x4-ratio-contain.png

- -

On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.

- -
cover
- -
background: url(100px-height-3x4-ratio.svg);
-background-size: cover;
-
- -

Le résultat obtenu sera :

- -

100px-height-3x4-ratio-cover.png

- -

Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

- -

SVG source : Aucune dimension mais des proportions intrinsèques

- -

On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.

- -
contain
- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: contain;
-
- -

Le résultat ressemblera à :

- -

no-dimensions-1x1-ratio-contain.png

- -

On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.

- -
cover
- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: cover;
-
- -

Le résultat ressemblera à :

- -

no-dimensions-1x1-ratio-cover.png

- -

Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.

- -

Utiliser auto pour les deux axes

- -

Si {{cssxref("background-size")}} vaut auto ou auto auto, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.

- -

SVG source : Aucune dimension ni proportion intrinsèque

- -

Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.

- -
background: url(no-dimensions-or-ratio.svg);
-background-size: auto auto;
-
- -

Voici le résultat obtenu :

- -

auto-no-dimensions-or-ratio.png

- -

SVG source : une dimension mais aucune proportion intrinsèque

- -

S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: auto auto;
-
- -

Voici le résultat obtenu :

- -

auto-100px-wide-no-height-or-ratio.png

- -

Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).

- -

SVG source : une dimension et des proportions intrinsèques

- -

Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.

- -
background: url(100px-height-3x4-ratio.svg);
-background-size: auto auto;
-
- -

Le résultat sera le suivant :

- -

auto-100px-height-3x4-ratio.png

- -

Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec auto.

- -

SVG source : Aucune dimension définie mais des proportions intrinsèques

- -

Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour contain.

- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: auto auto;
-
- -

Le résultat ressemblera à :

- -

auto-no-dimensions-1x1-ratio.png

- -

Utiliser auto et une dimension fixée

- -

Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.

- -

SVG source : aucune dimension ni proportion intrinsèque

- -

Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour auto.

- -
background: url(no-dimensions-or-ratio.svg);
-background-size: auto 140px;
-
- -

1auto-no-dimensions-or-ratio.png

- -

Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).

- -

SVG source : une dimension intrinsèque mais pas de proportion intrinsèque

- -

Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut auto dans le code CSS.

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: 200px auto;
-
- -

100px-wide-no-height-or-ratio-length-auto.png

- -

Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur auto, l'image fera la même hauteur que la zone pour l'arrière-plan.

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: auto 125px;
-
- -

100px-wide-no-height-or-ratio-auto-length.png

- -

Ici, c'est la largeur qui vaut auto et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.

- -

SVG source : une dimension définie et des proportions intrinsèques

- -

Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.

- -
background: url(100px-height-3x4-ratio.svg);
-background-size: 150px auto;
-
- -

1auto-100px-height-3x4-ratio.png

- -

Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (auto dans la feuille de style).

- -

SVG source : aucune dimension mais des proportions intrinsèques

- -

Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).

- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: 150px auto;
-
- -

1auto-no-dimensions-1x1-ratio.png

- -

La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.

- -

Voir aussi

- - diff --git a/files/fr/web/css/replaced_element/index.html b/files/fr/web/css/replaced_element/index.html new file mode 100644 index 0000000000..eaa2f4d82a --- /dev/null +++ b/files/fr/web/css/replaced_element/index.html @@ -0,0 +1,62 @@ +--- +title: Élément remplacé +slug: Web/CSS/Élément_remplacé +tags: + - CSS + - Reference +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef}}
+ +

En CSS, un élément remplacé est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.

+ +

Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du documents. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.

+ +

Éléments remplacés

+ +

Les éléments remplacés caractéristiques sont :

+ +
    +
  • {{HTMLElement("img")}},
    • +
  • {{HTMLElement("object")}},
    • +
  • {{HTMLElement("video")}},
    • +
  • {{HTMLElement("iframe")}}
    • +
  • les éléments {{HTMLElement("input")}} de type image
    • +
+ +

Par ailleurs, certains éléments comme :

+ +
    +
  • {{HTMLElement("option")}}
    • +
  • {{HTMLElement("audio")}}
    • +
  • {{HTMLElement("canvas")}}
    • +
  • {{HTMLElement("object")}}
    • +
  • {{HTMLElement("applet")}}
    • +
+ +

sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type "image" notamment).

+ +

Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des éléments remplacés anonymes (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).

+ +

Utiliser CSS avec les éléments remplacés

+ +

Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs auto.

+ +

On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.

+ +

Contrôler la position des objets au sein de la boîte de contenu

+ +

Certaines propriétés CSS permet d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :

+ +
+
{{cssxref("object-fit")}}
+
Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.
+
{{cssxref("object-position")}}
+
Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.
+
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" deleted file mode 100644 index 58c6cdc73e..0000000000 --- "a/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Media queries -slug: Web/CSS/Requêtes_média -tags: - - Aperçu - - CSS - - CSS Media Queries - - Reference -translation_of: Web/CSS/Media_Queries ---- -
{{CSSRef}}
- -

Les requêtes média, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou at-rule) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.

- -

De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.

- -

De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.

- -

Vous pouvez en découvrir plus dans l'article Tester des requêtes media.

- -

Référence

- -

Règles @

- -
-
    -
  • {{cssxref("@import")}}
    • -
  • {{cssxref("@media")}}
    • -
-
- -

Guides

- -
-
Manipuler les requêtes média
-
Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
-
Tester les requêtes média
-
Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
-
Utiliser des requêtes média pour l'accessibilité
-
Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Voir aussi

- -
    -
  • La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.
    • -
diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" deleted file mode 100644 index 39539a5749..0000000000 --- "a/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Tester les requêtes média en JavaScript -slug: Web/CSS/Requêtes_média/Tester_les_media_queries -tags: - - Avancé - - CSS - - DOM - - Guide -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -
{{CSSRef}}
- -

Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (media query) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.

- -

Créer une liste de requêtes média

- -

Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.

- -

Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :

- -
var mql = window.matchMedia("(orientation: portrait)");
-
- -

Vérifier le résultat d'une requête

- -

Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété matches qui représente les résultat de la requête :

- -
if (mql.matches) {
-  /* La zone d'affichage/viewport est en portrait */
-} else {
-  /* La zone d'affichage/viewport est en paysage */
-}
-
- -

Recevoir des notifications liées à la requête

- -

Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un listener plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode addListener() sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :

- -
var mql = window.matchMedia("(orientation: portrait)");
-mql.addListener(handleOrientationChange);
-handleOrientationChange(mql);
-
- -

Ce code crée la liste de requêtes média qui teste l'orientation (l'objet mql) puis ajoute un listener. Une fois qu'on a ajouté le listener, on l'invoque une fois. Cela permet d'ajuster l'état initial du listener selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).

- -

La méthode handleOrientationChange() qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :

- -
function handleOrientationChange(mql) {
-  if (mql.matches) {
-    /* La zone d'affichage/viewport est en portrait */
-  } else {
-    /* La zone d'affichage/viewport est en paysage */
-  }
-}
-
- -

Terminer la réception des notifications

- -

Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser removeListener() sur l'objet  {{domxref("MediaQueryList") }} :

- -
mql.removeListener(handleOrientationChange);
-
- -

Compatibilité des navigateurs

- -

Interface MediaQueryList

- - - -

{{Compat("api.MediaQueryList")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" deleted file mode 100644 index 3ff2740bd8..0000000000 --- "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Utilisation des requêtes média pour l'accessibilité -slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité -tags: - - '@media' - - Accessibilité - - CSS -translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}
- -

Les requêtes média (media queries) peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.

- -

Réduction de mouvement - prefers-reduced-motion

- -

Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.

- -

Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).

- -

Syntaxe

- -
-
no-preference
-
Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.
-
reduce
-
Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.
-
- -

Exemple

- -

Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.

- -

HTML

- -
<div class="animation">animated box</div>
-
- -

CSS

- -
.animation {
-  -webkit-animation: vibrate 0.3s linear infinite both;
-  animation: vibrate 0.3s linear infinite both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animation {
-    animation: none;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -

Mode de contraste élevé{{Non-standard_inline}}

- -

La caractéristique média -ms-high-contrast est spécifique à Microsoft mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.

- -

Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).

- -

Syntaxe

- -

La caractéristique média -ms-high-contrast peut être définie avec l'une des valeurs suivantes.

- -

Valeurs

- -
-
active
-
-

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.

-
-
black-on-white
-
-

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.

-
-
white-on-black
-
-

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.

-
-
- -

Exemple

- -

Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).

- -
@media screen and (-ms-high-contrast: active) {
-  /* Toutes les règles appliquées en contraste élevé */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
-}
-
diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" deleted file mode 100644 index 4dc71551de..0000000000 --- "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" +++ /dev/null @@ -1,384 +0,0 @@ ---- -title: Media queries -slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries -tags: - - Avancé - - CSS - - CSS3 - - Guide - - Media Queries - - Requêtes média - - Responsive Design -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -
{{CSSRef}}
- -

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

- -

Les requêtes média sont utilisées afin :

- -
    -
  • D'appliquer certains styles de façon conditionnelle grâce aux règles @ {{cssxref("@media")}} et {{cssxref("@import")}}.
    • -
  • De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments HTML grâce à l'attribut media=.
    • -
  • De tester et surveiller l'état d'un média grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.
    • -
- -
-

Note : Les exemples de cet article utilisent @media à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.

-
- -

Syntaxe

- -

Une requête média se compose d'un type de média optionnel et d'une ou plusieurs expressions de caractéristiques de média. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.

- -

Une requête média vaut true si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours false.

- -
-

Note : Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.

-
- -

Types de média

- -

Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.

- -
-
all
-
Correspond pour tous les appareils.
-
print
-
Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les média paginés.
-
screen
-
Correspond aux appareils dotés d'un écran.
-
speech
-
Correspond aux outils de synthèse vocale.
-
- -
Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.
- -

Caractéristiques média (media features)

- -

Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomRésuméNotes
{{cssxref("@media/width","width")}}La largeur de la zone d'affichage (viewport)
{{cssxref("@media/height","height")}}La hauteur de la zone d'affichage
{{cssxref("@media/aspect-ratio","aspect-ratio")}}Le rapport largeur/hauteur de la zone d'affichage
{{cssxref("@media/orientation","orientation")}}L'orientation la zone d'affichage
{{cssxref("@media/resolution","resolution")}}La densité de pixel pour l'appareil d'affichage
{{cssxref("@media/scan","scan")}}Le processus de scan de l'appareil d'affichage
{{cssxref("@media/grid","grid")}}Le type d'écran de l'appareil : matriciel ou grille ?
{{cssxref("@media/update-frequency","update")}}La fréquence de modification du contenu par l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-block","overflow-block")}}La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de blocAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-inline","overflow-inline")}}La possibilité de faire défiler (scroll) le contenu qui dépasse de la zone d'affichage sur l'axe en ligneAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color","color")}}Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)
{{cssxref("@media/color-gamut","color-gamut")}}Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color-index","color-index")}}Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)
{{cssxref("@media/display-mode","display-mode")}}Le mode d'affichage de l'application, tel qu'indiqué par la propriété display du manifesteDéfinie dans la spécification pour les manifestes des applications web.
{{cssxref("@media/monochrome","monochrome")}}Le nombre de bits par pixel pour le frame buffer monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome
{{cssxref("@media/inverted-colors","inverted-colors")}}L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitationReportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/pointer","pointer")}}La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/hover","hover")}}La capacité du mécanisme de saisie principal à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-pointer","any-pointer")}}La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-hover","any-hover")}}La capacité d'un des mécanismes de saisie à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/light-level","light-level")}}Le niveau de luminosité de l'environnementAjoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}L'utilisateur préfère que la transparence utilisée sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}L'utilisateur préfère utiliser un thème clair ou un thème sombre.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/forced-colors", "forced-colors")}}Détecte si l'agent utilisateur restreint la palette de couleurs.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/scripting","scripting")}}La disponibilité des fonctions de script (JavaScript par exemple)Reportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}La largeur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}La hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
- -

Opérateurs logiques

- -

Les opérateurs logiques not, and et only peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.

- -

and

- -

L'opérateur and permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.

- -

not

- -

L'opérateur not est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie true si l'opérande renvoie false). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur not est utilisé, la requête doit nécessairement contenir un type de média.

- -
-

Note : Pour la spécification de niveau 3, l'opérateur not ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.

-
- -

only

- -

L'opérateur only est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas only, un ancien navigateur interprètera screen and (max-width: 500px) comme screen uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur only est utilisé, la requête doit nécessairement contenir un type de média.

- -

, (virgule)

- -

Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie true, toute la requête combinée renverra true. En ce sens, l'opérateur , agit comme un opérateur booléen or.

- -

Cibler des types de média

- -

Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :

- -
@media print { ... }
- -

Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :

- -
@media screen, print { ... }
- -

Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.

- -

Cibler des caractéristiques média

- -

Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :

- -
@media (hover: hover) { ... }
- -

De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par min- ou max- afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px :

- -
@media (max-width: 1250px) { ... }
- -
-

Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.

-
- -

Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou none pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :

- -
@media (color) { ... }
- -

Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront false. Ainsi, la requête suivante aura toujours la valeur false car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :

- -
@media speech and (aspect-ratio: 11/5) { ... }
- -

Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis le tableau ci-dessus.

- -

Créer des requêtes média complexes

- -

Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : not, and, only et la virgule (,) afin de combiner plusieurs requêtes média.

- -

Dans l'exemple précédent, on a utilisé l'opérateur and afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur not permet d'obtenir la négation d'une requête média tandis que l'opérateur only empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.

- -
-

Note : Dans la plupart des cas, le type de média all est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs not ou only, il est nécessaire de fournir un type de média explicite.

-
- -

Combiner plusieurs types ou caractéristiques

- -

Le mot-clé and permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :

- -
@media (min-width: 30em) and (orientation: landscape) { ... }
- -

Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média screen :

- -
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
- -

Tester plusieurs requêtes

- -

La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :

- -
@media (min-height: 680px), screen and (orientation: portrait) { ... }
- -

Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée true.

- -

Opérer une négation

- -

Le mot-clé not permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé not ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur not est évalué en dernier :

- -
@media not all and (monochrome) { ... }
-
- -

La requête précédente est donc équivalente à :

- -
@media not (all and (monochrome)) { ... }
-
- -

Mais elle n'est pas équivalente à :

- -
@media (not all) and (monochrome) { ... }
- -

De même :

- -
@media not screen and (color), print and (color) { ... }
-
- -

sera évaluée comme :

- -
@media (not (screen and (color))), print and (color) { ... }
- -

Améliorer la compatibilité avec les anciens navigateurs

- -

Le mot-clé only empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes.

- -
@media only screen and (color) { ... }
-
- -

Améliorations syntaxiques avec la spécification de niveau 4

- -

La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe max- pour les largeurs et écrire :

- -
@media (max-width: 30em) { ... }
- -

Avec les requêtes média de niveau 4, on peut écrire :

- -
@media (width <= 30em) { ... }
- -

Si on utilise min- et max- conjointement, on peut tester l'appartenance d'une valeur à un intervalle :

- -
@media (min-width: 30em) and (max-width: 50em) { ... }
- -

Avec les requêtes média de niveau 4, on peut écrire :

- -
@media (30em <= width <= 50em ) { ... }
-
- -

Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs and, not et or.

- -

Tester l'absence d'une caractéristique avec not

- -

On peut utiliser l'opérateur not() autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut not(hover) pour cibler les appareils qui ne permettent pas le survol d'un élément :

- -
@media (not(hover)) { ... }
- -

Tester plusieurs caractéristiques avec or

- -

Il est possible d'utiliser l'opérateur or pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (not (color)) ou qui permettent de survoler les éléments (hover) :

- -
@media (not (color)) or (hover) { ... }
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/resolved_value/index.html b/files/fr/web/css/resolved_value/index.html new file mode 100644 index 0000000000..8ce7a5b45a --- /dev/null +++ b/files/fr/web/css/resolved_value/index.html @@ -0,0 +1,40 @@ +--- +title: Valeur résolue +slug: Web/CSS/valeur_résolue +tags: + - CSS + - Reference +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

La valeur résolue d'une propriété CSS est la valeur renvoyée par {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Pour la plupart des propriétés, il s'agit de la valeur calculée mais pour un tout petit nombre d'anciennes propriétés (dont {{cssxref("width")}} et {{cssxref("height")}}), il s'agit par contre de la valeur utilisée. Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Définition initiale
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/r\303\250gles_@/index.html" "b/files/fr/web/css/r\303\250gles_@/index.html" deleted file mode 100644 index e298cf9028..0000000000 --- "a/files/fr/web/css/r\303\250gles_@/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Règles @ -slug: Web/CSS/Règles_@ -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/At-rule ---- -
{{cssref}}
- -

Une règle @ est une expression CSS commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain bloc CSS trouvé en premier.

- -
/* Forme générique */
-@IDENTIFIANT (RÈGLE);
-
-/* Exemple : indiquer au navigateur d'utiliser */
-/* UTF-8 comme jeu de caractères */
-@charset "utf-8";
- -

Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :

- -
    -
  • {{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.
    • -
  • {{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.
    • -
  • {{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.
    • -
  • Les règles @ imbriquées. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles : -
      -
    • {{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou media query).
      • -
    • {{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).
      • -
    • {{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée (cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)
      • -
    • {{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
      • -
    • {{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.
      • -
    • {{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
      • -
    • {{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (viewport) (cette règle est au stade du brouillon de travail).
      • -
    • {{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • -
    • {{cssxref("@font-feature-values")}} (ainsi que @swash, @ornaments, @annotation, @stylistic, @styleset et @character-variant) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • -
    -
    • -
- -

Les règles de groupe conditionnelles

- -

Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : les règles de groupe conditionnelles. Ces instructions partagent une syntaxe commune et permettent d'inclure des instructions imbriquées (soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.

- -

Les règles de groupe conditionnelles définies par la spécification de niveau 3 sur les règles CSS conditionnelles sont :

- -
    -
  • {{cssxref("@media")}},
    • -
  • {{cssxref("@supports")}},
    • -
  • {{cssxref("@document")}} (qui a été reporté à la spécification de niveau 4).
    • -
- -

Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatDéfinition
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Définition initiale.
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Standardisation de @-webkit-keyframes.
- -

Voir aussi

- - diff --git a/files/fr/web/css/scaling_of_svg_backgrounds/index.html b/files/fr/web/css/scaling_of_svg_backgrounds/index.html new file mode 100644 index 0000000000..ecd528838c --- /dev/null +++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.html @@ -0,0 +1,331 @@ +--- +title: Redimensionnement d'arrière-plans SVG +slug: Web/CSS/Redimensionnement_arrière-plans_SVG +tags: + - CSS + - Guide + - SVG +translation_of: Web/CSS/Scaling_of_SVG_backgrounds +--- +

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.

+ +

Un algorithme simple

+ +

Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :

+ +
    +
  1. Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.
    2. +
  2. Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.
    3. +
  3. Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.
    4. +
  4. Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.
    5. +
+ +

On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.

+ +

Fichiers d'exemples

+ +

Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.

+ +

Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.

+ +

Image sans dimension ni proportion

+ +

Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.

+ +

no-dimensions-or-ratio.png

+ +

Fichier source SVG

+ +

Image sans proportion avec une dimension fixée

+ +

Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.

+ +

100px-wide-no-height-or-ratio.png

+ +

Fichier source SVG

+ +

Image avec une dimension fixée et des proportions intrinsèques

+ +

Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.

+ +

On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.

+ +

100px-height-3x4-ratio.png

+ +

Fichier source SVG

+ +

Image sans largeur ni hauteur mais avec des proportions intrinsèques

+ +

Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.

+ +

no-dimensions-1x1-ratio.png

+ +

Fichier source SVG

+ +

Exemples de redimensionnement

+ +

Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec no-repeat pour plus de clarté..

+ +
Note : Les images montrées ci-après illustrent le rendu attendu. Les navigateurs peuvent ne pas produire le bon résultat.
+ +

Indiquer des dimensions fixées sur les deux axes

+ +

Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.

+ +

SVG source : Aucune dimension ni proportion

+ +

Avec ces déclarations CSS :

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: 125px 175px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-no-dimensions-or-ratio.png

+ +

SVG source : Une dimension définie et aucune proportion

+ +

Avec ces déclarations CSS :

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 250px 150px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-100px-wide-no-height-or-ratio.png

+ +

SVG source : Une dimension définie et des proportions intrinsèques

+ +

Avec ces déclarations CSS :

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: 275px 125px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-100px-height-3x4-ratio.png

+ +

SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques

+ +

Avec ces déclarations CSS :

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: 250px 100px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-no-dimensions-1x1-ratio.png

+ +

Utiliser contain ou cover

+ +

En utilisant la valeur cover pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. contain fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.

+ +

Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour cover/contain. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.

+ +

SVG source : Aucune dimension ni proportion

+ +

Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

no-dimensions-or-ratio-contain.png

+ +

SVG source : Une dimension définie et aucune proportion

+ +

De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

100px-wide-no-height-or-ratio-contain.png

+ +

SVG source : Une dimension définie et des proportions intrinsèques

+ +

Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de contain ou cover). Ainsi, avec contain, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.

+ +
contain
+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

100px-height-3x4-ratio-contain.png

+ +

On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.

+ +
cover
+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: cover;
+
+ +

Le résultat obtenu sera :

+ +

100px-height-3x4-ratio-cover.png

+ +

Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

+ +

SVG source : Aucune dimension mais des proportions intrinsèques

+ +

On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.

+ +
contain
+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: contain;
+
+ +

Le résultat ressemblera à :

+ +

no-dimensions-1x1-ratio-contain.png

+ +

On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.

+ +
cover
+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: cover;
+
+ +

Le résultat ressemblera à :

+ +

no-dimensions-1x1-ratio-cover.png

+ +

Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.

+ +

Utiliser auto pour les deux axes

+ +

Si {{cssxref("background-size")}} vaut auto ou auto auto, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.

+ +

SVG source : Aucune dimension ni proportion intrinsèque

+ +

Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: auto auto;
+
+ +

Voici le résultat obtenu :

+ +

auto-no-dimensions-or-ratio.png

+ +

SVG source : une dimension mais aucune proportion intrinsèque

+ +

S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto auto;
+
+ +

Voici le résultat obtenu :

+ +

auto-100px-wide-no-height-or-ratio.png

+ +

Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).

+ +

SVG source : une dimension et des proportions intrinsèques

+ +

Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: auto auto;
+
+ +

Le résultat sera le suivant :

+ +

auto-100px-height-3x4-ratio.png

+ +

Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec auto.

+ +

SVG source : Aucune dimension définie mais des proportions intrinsèques

+ +

Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour contain.

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: auto auto;
+
+ +

Le résultat ressemblera à :

+ +

auto-no-dimensions-1x1-ratio.png

+ +

Utiliser auto et une dimension fixée

+ +

Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.

+ +

SVG source : aucune dimension ni proportion intrinsèque

+ +

Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour auto.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: auto 140px;
+
+ +

1auto-no-dimensions-or-ratio.png

+ +

Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).

+ +

SVG source : une dimension intrinsèque mais pas de proportion intrinsèque

+ +

Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut auto dans le code CSS.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 200px auto;
+
+ +

100px-wide-no-height-or-ratio-length-auto.png

+ +

Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur auto, l'image fera la même hauteur que la zone pour l'arrière-plan.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto 125px;
+
+ +

100px-wide-no-height-or-ratio-auto-length.png

+ +

Ici, c'est la largeur qui vaut auto et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.

+ +

SVG source : une dimension définie et des proportions intrinsèques

+ +

Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: 150px auto;
+
+ +

1auto-100px-height-3x4-ratio.png

+ +

Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (auto dans la feuille de style).

+ +

SVG source : aucune dimension mais des proportions intrinsèques

+ +

Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: 150px auto;
+
+ +

1auto-no-dimensions-1x1-ratio.png

+ +

La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.

+ +

Voir aussi

+ + 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: -slug: Web/CSS/shape-box -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/shape-outside -translation_of_original: Web/CSS/shape-box ---- -
{{CSSRef}}
- -

Le type de donnée CSS <shape-box> permet de définir des formes relatives aux boîtes de l'élément (voir le modèle de boîtes), notamment pour la propriété {{cssxref("shape-outside")}}.

- -

Valeurs

- -
-
margin-box
-
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 border-radius / margin est supérieur ou égal à 1, le rayon du coin de la boîte sera border-radius + margin. Si le ratio border-radius / margin est inférieur à 1, le rayon du coin de la boîte sera border-radius + (margin * (1 + (ratio-1)^3)).
-
border-box
-
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).
-
padding-box
-
La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (padding). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).
-
content-box
-
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 0 et border-radius - border-width - padding.
-
- -

Exemples

- -

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;
-}
- -

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

Résultat

- -

{{EmbedLiveSample('Exemples',"100%","100%")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}{{Spec2('CSS Shapes')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome pour AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support simple{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/shorthand_properties/index.html b/files/fr/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..6c390b9dc8 --- /dev/null +++ b/files/fr/web/css/shorthand_properties/index.html @@ -0,0 +1,155 @@ +--- +title: Propriétés raccourcies +slug: Web/CSS/Propriétés_raccourcies +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/Shorthand_properties +--- +
{{CSSRef}}
+ +

Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité.

+ +

La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (font) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.

+ +

Quelques cas aux limites épineux

+ +

Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :

+ +
    +
  1. Une valeur qui n'est pas définie pour la propriété raccourcie sera réinitialisée avec sa valeur initiale. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+
    + ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} transparent car la deuxième déclaration prend le pas sur la première.
    2. +
  2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé inherit.
    3. +
  3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes : +
      +
    1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + +
      border1.png1 valeur : border-width: 1em — La valeur unique s'adresse à tous les côtés.
      border2.png2 valeurs : border-width: 1em 2em — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.
      border3.png3 valeurs : border-width: 1em 2em 3em — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.
      border4.png +

      4 valeurs : border-width: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).

      +
      +
      2. +
    2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + +
      corner1.png1 valeur : border-radius: 1em — La valeur s'applique à tous les coins.
      corner2.png2 valeurs : border-radius: 1em 2em — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.
      corner3.png3 valeurs : border-radius: 1em 2em 3em — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.
      corner4.png +

      4 valeurs : border-radius: 1em 2em 3em 4em — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).

      +
      +
      3. +
    +
    4. +
+ +

Les propriétés concernant l'arrière-plan

+ +

Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+ +

On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :

+ +
background: #000 url(images/bg.gif) no-repeat top right;
+ +
+

Note : Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute background-attachment: scroll et d'autres propriétés avec CSS3).

+
+ +

Pour plus d'informations, voir {{cssxref("background")}}.

+ +

Les propriétés liées à la police (font)

+ +

Les déclarations suivantes :

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +
+

Note : Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera font-variant: normal et font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+
+ +

Les propriétés liées aux bordures

+ +

Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

peut être écrit ainsi :

+ +
border: 1px solid #000;
+ +

Les propriétés liées à la marge et au remplissage (padding)

+ +

Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (padding) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à trouble) :

+ +
margin: 10px 5px 10px 5px;
+ +

La propriété raccourcie universelle

+ +

CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.

+ +

Voir l'article sur la cascade et l'héritage pour plus d'informations sur le fonctionnement de l'héritage.

+ +

Voir aussi

+ +
    +
  • La référence CSS
    • +
  • Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • +
diff --git a/files/fr/web/css/specified_value/index.html b/files/fr/web/css/specified_value/index.html new file mode 100644 index 0000000000..14eb3d9e5a --- /dev/null +++ b/files/fr/web/css/specified_value/index.html @@ -0,0 +1,85 @@ +--- +title: Valeur spécifiée +slug: Web/CSS/Valeur_spécifiée +tags: + - CSS + - Cascade + - Reference +translation_of: Web/CSS/specified_value +--- +
{{CSSRef}}
+ +

La valeur définie d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :

+ +
    +
  1. Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété {{cssxref("color")}} est définie à green alors la couleur du texte des éléments correspondants sera verte.
    2. +
  2. Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe ({{HTMLElement("p")}}) dans un {{HTMLElement("div")}} et que le {{HTMLElement("div")}} est ciblée par une déclaration CSS où font vaut Arial et qu'il n'y a pas de règle font pour {{HTMLElement("p")}}, ce dernier héritera de la police Arial.
    3. +
  3. Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.
    4. +
+ +

Exemples

+ +

HTML

+ +
<p>Ma couleur provient explicitement de la feuille de style CSS.</p>
+
+<div>Les valeurs définies de mes propriétés utilisent
+    les valeurs initiales (par défaut) car aucune n'est fournie
+    dans la feuille de style CSS.</div>
+
+<div class="fun">
+  <p>La valeur définie pour ma police n'est pas fournie explicitement
+     dans la feuille de style et est donc héritée de mon parent.
+     Toutefois, la bordure n'est pas une propriété héritée.</p>
+</div>
+ +

CSS

+ +
.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 500, 220)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" "b/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" deleted file mode 100644 index 2acb4d1da7..0000000000 --- "a/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" +++ /dev/null @@ -1,421 +0,0 @@ ---- -title: Syntaxe de définition des valeurs -slug: Web/CSS/Syntaxe_de_définition_des_valeurs -tags: - - CSS - - Débutant - - Reference -translation_of: Web/CSS/Value_definition_syntax ---- -
{{CSSRef}}
- -

La syntaxe de définition des valeurs CSS est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).

- -

La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.

- -

Les types de composants

- -

Les mots-clés

- -

Les mots-clés génériques

- -

Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. auto, smaller ou ease-in).

- -

inherit, initial et unset

- -

Toutes propriétés CSS acceptent les mots-clés inherit, initial et unset définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.

- -

Les littéraux

- -

En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.

- -

Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.

- -

Les types de donnée

- -

Les types de donnée simples

- -

Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type angle est donc représenté par : {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, et ainsi de suite).

- -

Les types de donnée non terminaux

- -

D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.

- -

Les types de donnée non terminaux sont de deux sortes :

- -
    -
  • Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.
    • -
  • Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.
    • -
- -

Les combinateurs

- -

Les crochets

- -

Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).

- -
bold [ thin && <length> ]
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold thin 2vh
    • -
  • bold 0 thin
    • -
  • bold thin 3.5em
    • -
- -

Mais ne correspondra pas à :

- -
    -
  • thin bold 3em car bold est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.
    • -
- -

Juxtaposition

- -

Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont obligatoires et doivent apparaître dans cet ordre.

- -
bold <length> , thin
-
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold 1em, thin
    • -
  • bold 0, thin
    • -
  • bold 2.5cm, thin
    • -
  • bold 3vh, thin
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • thin 1em, bold car les entités ne sont pas dans l'ordre indiqué
    • -
  • bold 1em thin car les entités sont obligatoires et la virgule qui est un littéral doit être présente
    • -
  • bold 0.5ms, thin car les valeurs ms ne sont pas des valeurs du type {{cssxref("<length>")}}
    • -
- -

Double esperluette

- -

Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

- -
bold && <length>
-
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold 1em
    • -
  • bold 0
    • -
  • 2.5cm bold
    • -
  • 3vh bold
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold car les deux composants doivent apparaître.
    • -
  • bold 1em bold car les deux composants doivent apparaître exactement une fois.
    • -
- -
Note : La juxtaposition est prioritaire par rapport à la double esperluette. bold thin && <length> est donc équivalent à [ bold thin ] && <length>. Il décrit bold thin <length> ou <length> bold thin mais pas bold <length> thin.
- -

Double barre

- -

Lorsque deux ou plusieurs composants sont séparés par une double barre verticale ||. Cela signifie qu'au moins un composant doit être présent et qu'ils peuvent apparaître dans n'importe quel ordre. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • 1em solid blue
    • -
  • blue 1em
    • -
  • solid 1px yellow
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • blue yellow car le composant doit apparaître au plus une fois.
    • -
  • bold car le mot-clé n'est pas permis pour aucune valeur de l'entité.
    • -
- -
Note : La double esperluette est prioritaire par rapport à la double barre. bold || thin && <length> est équivalent à bold || [ thin && <length> ] qui décrit bold, thin <length>, bold thin <length>, ou thin <length> bold mais pas <length> bold thin car bold, s'il est présent doit apparaître avant thin && <length>.
- -

La barre verticale

- -

Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : seule une des options doit être présente. Généralement, cela permet de séparer différents mots-clés possible.

- -
<percentage> | <length> | left | center | right | top | bottom
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • 3%
    • -
  • 0
    • -
  • 3.5em
    • -
  • left
    • -
  • center
    • -
  • right
    • -
  • top
    • -
  • bottom
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • center 3% car seul un seul des composants doit être présent.
    • -
  • 3em 4.5em car un composant doit être présent au plus une seule fois.
    • -
- -
-

Note : La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi bold | thin || <length> est équivalent à bold | [ thin || <length> ] qui décrit bold, thin, <length>, <length> thin ou thin <length> mais pas bold <length> car seule entité peut être présente.

-
- -

Les multiplicateurs

- -

Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.

- -

L'astérisque (*)

- -

L'astérisque indique qu'une entité peut apparaître zéro, une ou plusieurs fois.

- -
bold smaller*
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold
    • -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller and so on.
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • -
- -

Plus (+)

- -

Le multiplicateur « plus » indique que l'entité peut apparaître une ou plusieurs fois.

- -
bold smaller+
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller and so on.
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold car smaller doit apparaître au moins une fois
    • -
  • smaller car bold est juxtaposé et doit apparaitre avant smaller.
    • -
- -

Le point d'interrogation (?)

- -

Le point d'interrogation indique que l'entité est optionnelle et doit apparaître zéro ou une fois.

- -
bold smaller?
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold
    • -
  • bold smaller
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold smaller smaller car smaller doit apparaître au plus une fois
    • -
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller s'il est présent.
    • -
- -

Les accolades ({ })

- -

Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité doit apparaître au moins A fois et au plus B fois.

- -
bold smaller{1,3}
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold car smaller doit apparaître au moins une fois.
    • -
  • bold smaller smaller smaller smaller car smaller doit apparaître au plus trois fois.
    • -
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • -
- -

Dièse (#)

- -

Le symbole dièse indique qu'une entité doit être répétée une ou plusieurs fois et que chaque occurrence est séparée par une virgule.

- -
bold smaller#
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold smaller
    • -
  • bold smaller, smaller
    • -
  • bold smaller, smaller, smaller and so on.
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold car smaller doit apparaître au moins une fois.
    • -
  • bold smaller smaller smaller car les différentes occurrences de smaller doivent être séparées par des virgules.
    • -
  • smaller car bold est juxtaposé et doit apparaître avant toute occurrence du mot-clé smaller.
    • -
- -

Point d'exclamation (!)

- -

Le multiplicateur point d'exclamation est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.

- -
[ bold? smaller? ]!
-
- -

Cet exemple correspondra aux valeurs suivantes :

- -
    -
  • bold
    • -
  • smaller
    • -
  • bold smaller
    • -
- -

Mais pas à :

- -
    -
  • ni bold ni smaller, car il faut au moins l'un des deux.
    • -
  • smaller bold, car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • -
  • bold smaller bold, car bold et smaller doivent apparaître au plus une fois.
    • -
- -

Récapitulatif

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SigneNomDescriptionExemple
Combinateurs
 JuxtapositionLes composants sont obligatoires et doivent apparaître dans cet ordre.solid <length>
&&Double esperluetteLes composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.<length> && <string>
||Double barreAu moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.<'border-image-outset'> || <'border-image-slice'>
|Barre simpleUn et un seul des composants doit être présent.smaller | small | normal | big | bigger
[ ]CrochetsLes composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.bold [ thin && <length> ]
Multiplicateurs
 Aucun multiplicateurExactement 1 fois.solid
*Astérisque0 ou plus.bold smaller*
+Signe plus1 ou plus.bold smaller+
?Point d'interrogation0 ou 1 fois (autrement dit, la valeur est optionnelle)bold smaller?
{A,B}AccoladesAu moins A fois et au plus B fois.bold smaller{1,3}
#Dièse1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.bold smaller#
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2('CSS3 Values')}}Ajout du multiplicateur avec le dièse.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2('CSS2.1')}}Ajout de la double esperluette.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2('CSS1')}}Définition initiale.
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" deleted file mode 100644 index 2a35cb5611..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_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 ---- -
{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/fr/docs/Web/XPath")}}{{Draft}}
- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Fonctionnalité XPathÉquivalent CSS
Axe ancestor, parent ou preceding-sibling{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}
Axe attributeSélecteurs d'attribut
Axe childSélecteurs d'enfant
Axe descendantSélecteur de descendant
Axe following-siblingSélecteur de voisin général ou sélecteur de voisin direct
Axe selfSélecteur {{CSSxRef(":scope")}} ou {{CSSxRef(":host")}}
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/index.html" deleted file mode 100644 index a9d6f91d81..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_css/index.html" +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Sélecteurs CSS -slug: Web/CSS/Sélecteurs_CSS -tags: - - Aperçu - - CSS - - CSS Selectors - - Reference - - Sélecteur -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

- -

Les sélecteurs simples

- -
-
Les sélecteurs de type
-
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
- Syntaxe : nomelement
- Exemple : input permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
-
Les sélecteurs de classe
-
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
- Syntaxe : .nomclasse
- Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").
-
Les sélecteurs d'identifiant
-
Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
- Syntaxe : #valeurid
- Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
-
Le sélecteur universel
-
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
- Syntaxe : * ns|* *|*
- Exemple : * permettra de cibler tous les éléments du document.
-
Les sélecteurs d'attribut
-
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
- Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
- Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).
-
- -

Les combinateurs

- -
-
Les sélecteurs de voisin direct
-
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
- Syntaxe : A + B
- Exemple : div + p permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
-
Les sélecteurs de voisins
-
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
- Syntaxe : A ~ B
- Exemple : p ~ span permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
-
Les sélecteurs d'éléments fils
-
Le combinateur '>' permet de sélectionner les nœuds qui sont des fils directs d'un élément donné.
- Syntaxe : A > B
- Exemple : ul > li permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
-
Les sélecteurs d'éléments descendants
-
Le combinateur   (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.
- Syntaxe : A B
- Exemple : div span permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
-
Le combinateur de colonne{{experimental_inline}}
-
Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B
- Exemple : col || td permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
-
- -

Les pseudo-classes

- -
-
Les pseudo-classes permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.
-
Exemple: a:visited permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.
-
- -

Les pseudo-éléments

- -
-
Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
-
Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du combinateur de colonne (||), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Ajout du combinateur de voisin ~. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (::)
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} -

Ajout des combinateurs pour les fils (>) et voisins adjacents (+).
- Ajout du sélecteur universel et du sélecteur d'attribut.

-
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" deleted file mode 100644 index 8aeae8c255..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 'Utiliser la pseudo-classe :target dans un sélecteur' -slug: 'Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur' -tags: - - CSS - - Guide - - Intermédiaire -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -
{{CSSRef}}
- -

Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.

- -

Choisir une cible

- -

La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple contient le fragment d'identifiant #Exemple. En HTML, les identifiants correspondent aux valeurs des attributs id et name, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.

- -

Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :

- -
h2:target {
-  font-weight: bold;
-}
- -

On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment #Exemple, on pourra écrire :

- -
#Exemple:target {
-  border: 1px solid black;
-}
- -

Cibler tous les éléments

- -

Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :

- -
:target {
-  color: red;
-}
-
- -

Exemple

- -

Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le <h1 id="un"> devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.

- -
-
<h4 id="un">...</h4> <p id="deux">...</p>
-<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
-
-<a href="#un">Premier</a>
-<a href="#deux">Deuxième</a>
-<a href="#trois">Troisième</a>
-<a href="#quatre">Quatrième</a>
-<a href="#cinq">Cinquième</a>
-
- -

Conclusion

- -

Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.

- -

Voir aussi

- - diff --git "a/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" "b/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" deleted file mode 100644 index 6c9e719345..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Sélecteurs d'attribut -slug: Web/CSS/Sélecteurs_d_attribut -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

- -
/* Les éléments <a> avec un attribut title */
-a[title] {
-  color: purple;
-}
-
-/* Les éléments <a> avec un href qui correspond */
-/* à "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* Les éléments <a> dont href contient "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* Les éléments <a> dont href finit par ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
-
-/* Les éléments <a> dont l'attribut class contient le mot logo */
-/* comportement identique à a.logo */
-a[class~="logo"] {
-  padding: 2px;
-}
- -

Syntaxe

- -
-
[attr]
-
Permet de cibler un élément qui possède un attribut attr.
-
[attr=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur.
-
[attr~=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
-
[attr|=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
-
[attr^=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.
-
[attr$=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur se termine par valeur.
-
[attr*=valeur]
-
Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur dans la chaîne de caractères.
-
[attr operateur valeur i]
-
On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).
-
[attr operateur valeur s] {{experimental_inline}}
-
Ajouter un s (ou S) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).
-
- -

Syntaxe formelle

- -
{{CSSSyntax}}
- -

Exemples

- -

Liens

- -

CSS

- -
a {
-  color: blue;
-}
-
-/* Liens internes commençant avec "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Liens avec "example" n'importe où dans l'URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Liens avec "insensitive" n'importe où dans l'URL,
-   quelle que soit la casse */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Liens avec "cAsE" n'importe où dans l'URL,
-   et avec cette casse donnée.*/
-a[href*="cAsE" s] {
-  color: pink;
-}
-
-/* Liens qui finissent ".org" */
-a[href$=".org"] {
-  color: red;
-}
- -

HTML

- -
<ul>
-  <li><a href="#internal">Lien interne<a></li>
-  <li><a href="http://example.com">Lien d'exemple</a></li>
-  <li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
-  <li><a href="http://example.org">Lien vers example.org</a></li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample("Liens")}}

- -

Langues

- -

CSS

- -
/* Tous les éléments divs avec un attribut `lang` seront en gras. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* Tous les divs en anglais américains seront bleus. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* Tous les divs en portugais seront verts. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* Tous les divs en chinois seront rouges (chinois
-   simplifié (zh-CN) ou traditionnel (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* Tous les divs en chinois traditionnels pour l'attribut
-   `data-lang` seront violet. */
-/* Note : Les doubles quotes ne sont pas strictement nécessaires
-   ici */
-div[data-lang="zh-TW"] {
-  color: purple;
-}
-
- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">世界您好！</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Langues")}}

- -

Listes ordonnées

- -

{{SeeCompatTable}}

- -

La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.

- -

CSS

- -
/* Les types de liste devront être utilisé avec le
-   marqueur pour la casse vu les spécifications HTML */
-ol[type="a"] {
-  list-style-type: lower-alpha;
-  background: red;
-}
-
-ol[type="a" s] {
-  list-style-type: lower-alpha;
-  background: lime;
-}
-
-ol[type="A" s] {
-  list-style-type: upper-alpha;
-  background: lime;
-}
- -

HTML

- -
<ol type="A">
-  <li>Liste d'exemple</li>
-</ol>
- -

Résultat

- -

{{EmbedLiveSample("Listes_ordonnées")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.attribute")}}

- -

Voir aussi

- -
    -
  • {{CSSxRef("attr")}}
    • -
  • Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}
    • -
  • Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}
    • -
  • Ces méthodes sont implémentées sur le mixin {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
    • -
diff --git "a/files/fr/web/css/s\303\251lecteurs_d_id/index.html" "b/files/fr/web/css/s\303\251lecteurs_d_id/index.html" deleted file mode 100644 index aa9a2141bc..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_d_id/index.html" +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Sélecteurs d'ID -slug: Web/CSS/Sélecteurs_d_ID -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/ID_selectors ---- -
{{CSSRef("Selectors")}}
- -

Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.

- -
/* L'élément avec l'identifiant id="demo" */
-#demo {
-  border: red 2px solid;
-}
- -

Syntaxe

- -
#valeur_identifiant { déclarations }
- -
-

Note : Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:

- -
[id=valeur_identifiant] { déclarations }
-
- -

Exemples

- -

CSS

- -
#identifie {
-  background-color: blue;
-}
-
- -

HTML

- -
<span id="identifie">Voici un span avec du texte.</span>
-<span>Et un autre (mais sans identifiant).</span>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 200, 50)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.id")}}

diff --git "a/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" deleted file mode 100644 index 115d791092..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Sélecteurs de classe -slug: Web/CSS/Sélecteurs_de_classe -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef}}
- -

Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.

- -
/* Cible tous les éléments ayant la classe "spacious" */
-.spacious {
-  margin: 2em;
-}
-
-/* Cible tous les éléments <li> ayant la classe "spacious" */
-li.spacious {
-  margin: 2em;
-}
-
-/* Cible tous les éléments <li> ayant une classe qui */
-/* contient à la fois "spacious" et "elegant"        */
-li.spacious.elegant {
-  margin: 2em;
-}
- -

L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.

- -

Syntaxe

- -
.nomdeclasse { déclarations CSS }
- -

Cela est exactement équivalent à l'utilisation du sélecteur d'attribut de la façon suivante :

- -
[class~=nomdeclasse] { déclarations CSS }
- -

Exemples

- -

CSS

- -
.classy {
-  background-color: skyblue;
-}
-.toto {
- font-weight: bold;
-}
-
- -

HTML

- -
<div class="classy">Voici un div avec du texte.</div>
-<div class="toto classy truc">Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !</div>
-<div>En voilà un autre.</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.class")}}

diff --git "a/files/fr/web/css/s\303\251lecteurs_de_type/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_type/index.html" deleted file mode 100644 index adf931d9fe..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_de_type/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Sélecteurs de type -slug: Web/CSS/Sélecteurs_de_type -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Type_selectors ---- -
{{CSSRef("Selectors")}}
- -

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.

- -
/* Cibler tous les éléments <a>. */
-a {
-  color: red;
-}
- -

Syntaxe

- -
élément { style propriétés }
-
- -

Exemples

- -

CSS

- -
span {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<span>Voici un élément <code>span</code> avec du texte.</span>
-<p>Et là un élément <code>p</code>.</p>
-<span>Enfin, un autre élément <code>span</code>.</span>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 200, 150)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.type")}}

diff --git "a/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" deleted file mode 100644 index ea97bdbf67..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Sélecteurs de voisins généraux -slug: Web/CSS/Sélecteurs_de_voisins_généraux -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/General_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.

- -
/* Parmi tous les éléments <img>, cibler tous
-   éléments <p> qui les suivent. */
-img ~ p {
-  color: red;
-}
- -

Syntaxe

- -
premier_element ~ second_element { propriétés de style }
-
- -

Exemples

- -

CSS

- -
p ~ span {
-  color: red;
-}
- -

HTML

- -
<span>Ici, ce n'est pas rouge.</span>
-<p>Voici un paragraphe.</p>
-<code>Un peu de code.</code>
-<span>Et un autre span.</span>
-<code>Encore du code</code>
-<span>Ici aussi, c'est rouge</span>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 280, 120)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Ce combinateur est renommé en « subsequent-sibling combinator ».
{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.general_sibling")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/s\303\251lecteurs_descendant/index.html" "b/files/fr/web/css/s\303\251lecteurs_descendant/index.html" deleted file mode 100644 index 5690dd95e7..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_descendant/index.html" +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Sélecteurs descendant -slug: Web/CSS/Sélecteurs_descendant -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/Descendant_combinator ---- -
{{CSSRef("Selectors")}}
- -

Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme sélecteur₁ sélecteur₂) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.

- -
/* Les éléments <li> qui sont des descendants */
-/* d'un <ul class="mon-truc"> */
-ul.mon-truc li {
-  margin: 2em;
-}
- -

Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.

- -

Syntaxe

- -
selecteur1 selecteur2 { /* déclarations CSS */ }
-
- -

Exemples

- -

CSS

- -
li {
-  list-style-type: disc;
-}
-
-li li {
-  list-style-type: circle;
-}
-
- -

HTML

- -
<ul>
-  <li>
-    <div>Élément 1</div>
-    <ul>
-      <li>Sous-élément A</li>
-      <li>Sous-élément B</li>
-    </ul>
-  </li>
-  <li>
-    <div>Élément 2</div>
-    <ul>
-      <li>Sous-élément A</li>
-      <li>Sous-élément B</li>
-    </ul>
-  </li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.descendant")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/s\303\251lecteurs_enfant/index.html" "b/files/fr/web/css/s\303\251lecteurs_enfant/index.html" deleted file mode 100644 index bc24234ef2..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_enfant/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Sélecteurs enfant -slug: Web/CSS/Sélecteurs_enfant -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/Child_combinator ---- -
{{CSSRef("Selectors")}}
- -

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

- -
/* Les éléments <li> qui sont des enfant d'un */
-/* <ul class="mon-truc"> */
-ul.mon-truc>li {
-  margin: 2em;
-}
- -

En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

- -

Syntaxe

- -
selecteur1 > selecteur2 { déclarations CSS }
-
- -

Exemples

- -

CSS

- -
span {
-  background-color: white;
-}
-
-div > span {
-  background-color: blue;
-}
-
- -

HTML

- -
<div>
-  <span>Premier span du div.
-    <span>Deuxième span, dans un span dans un div.</span>
-  </span>
-</div>
-<span>Troisième span, en dehors de tout div.</span>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%", 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.child")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/s\303\251lecteurs_universels/index.html" "b/files/fr/web/css/s\303\251lecteurs_universels/index.html" deleted file mode 100644 index 470d27160c..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_universels/index.html" +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Sélecteurs universels -slug: Web/CSS/Sélecteurs_universels -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef("Selectors")}}
- -

L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.

- -
* {
-  color: green;
-}
- -

En CSS 3, l'astérisque peut être combinée avec les espaces de nom :

- -
    -
  • ns|* - correspond à tous les éléments de l'espace de noms ns
    • -
  • *|* - correspond à tous les éléments
    • -
  • |* - correspond à tous les éléments sans espace de noms déclaré
    • -
- -

Syntaxe

- -
* { style properties }
- -

L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, *.warning et .warning seront équivalents.

- -

Exemples

- -

CSS

- -
* [lang^=fr] {
-  color:green;
-}
-
-*.warning {
-  color:red;
-}
-
-*#maincontent {
-  border: 1px solid blue;
-}
-
-.floating {
-  float: left;
-}
-
-.floating + * {
-  clear: left;
-}
-
- -

HTML

- -
<p class="warning">
-  <span lang="fr">Un span vert</span> dans un paragraphe rouge.
-</p>
-<p id="maincontent" lang="fr">
-  <span class="warning">Un span rouge</span> dans un paragraphe vert.
-</p>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 250, 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments.
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.universal")}}

diff --git a/files/fr/web/css/timing-function/index.html b/files/fr/web/css/timing-function/index.html deleted file mode 100644 index 4170f065b1..0000000000 --- a/files/fr/web/css/timing-function/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: -slug: Web/CSS/timing-function -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/easing-function -translation_of_original: Web/CSS/timing-function ---- -
{{CSSRef}}
- -

Le type de donnée <timing-function> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « easing functions » (en anglais).

- -

Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("<number>")}}) allant également de 0.0 à 1.0.

- -

- -

Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de rebondissement.

- -

Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).

- -

Valeurs

- -
-

CSS prend en charge deux types de fonctions de temporisation :

- -
    -
  • un sous-ensemble des courbes de Bézier cubiques
    • -
  • des fonctions en escalier.
    • -
- -

Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.

- -

La classe de fonctions cubic-bezier()

- -

- -

La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.

- -

Une courbe de Bézier cubique se définit par quatre points P0, P1, P2, et P3. P0 et P3 correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P0 est donc (0, 0) (instant initial et état initial) et P3 est (1, 1) (instant final et état final).

- -

Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P0 et P3 sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P1 et P2 sont toutes les deux comprises dans l'intervalle [0, 1].

- -

Les courbes de Bézier cubiques pour lesquelles les ordonnées de P1 et/ou P2 sont situées en dehors de l'intervalle [0, 1] génèreront un effet de rebondissement.

- -

Lorsqu'on définit une courbe de Bézier invalide en CSS via cubic-bezier, le moteur ignore la déclaration dans son intégralité.

-
- -

Syntaxe

- -
cubic-bezier(x1, y1, x2, y2)
-
- -

avec

- -
-
x1, y1, x2, y2
-
qui sont des valeurs de type {{cssxref("<number>")}} représentant les abscisses et les ordonnées des points P1 et P2 définissant la courbe de Bézier cubique. x1 et x2 doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.
-
- -

Exemples

- -

Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :

- -
cubic-bezier(0.1, 0.7, 1.0, 0.1)
-
-cubic-bezier(0, 0, 1, 1)
-
-/* Des valeurs négatives pour les ordonnées pour */
-/* créer du rebondissement                       */
-cubic-bezier(0.1, -0.6, 0.2, 0)
-
-/* Idem avec des valeurs > 1                     */
-cubic-bezier(0, 1.1, 0.8, 4)
- -

En revanche, ces définitions sont invalides :

- -
/* Bien que le type de sortie puisse être une couleur */
-/* les courbes de Bézier fonctionnent avec des ratios */
-/* numériques */
-cubic-bezier(0.1, red, 1.0, green)
-
-/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
-/* car sinon la courbe n'est pas une fonction temporelle. */
-cubic-bezier(2.45, 0.6, 4, 0.1)
-
-/* Il faut définir les deux points, il n'y a pas de valeur */
-/* par défaut. */
-cubic-bezier(0.3, 2.1)
-
-/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
-/* car sinon la courbe n'est pas une fonction temporelle. */
-cubic-bezier(-1.9, 0.3, -0.2, 2.1)
-
- -

La classe de fonction steps()

- -

La notation fonctionnelle steps() permet de définir une fonction en escalier qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.

- -

- -

steps(2, start)

- -

- -

steps(4, end)

- -

Syntaxe

- -
steps(nombre_de_marche, direction)
-
- -

avec

- -
-
nombre_de_marche
-
Un entier (valeur de type {{cssxref("<integer>")}} qui représente le nombre de marches composant la fonction en escalier.
-
direction
-
Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite : -
    -
  • start indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation
    • -
  • end indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.
    • -
- end est la valeur par défaut.
-
- -

Exemples

- -

Voici des exemples de fonction de temporisation en escalier valides :

- -
/* Il y a cinq marches et la dernière est utilisée */
-/* avant la fin de l'animation.                    */
-steps(5, end)
-
-/* Une fonction à deux marches dont la première se */
-/* déroule au début de l'animation.                */
-steps(2, start)
-
-/* Le deuxième paramètre est facultatif. */
-steps(2)
-
- -

En revanche, celles-ci sont invalides :

- -
/* Le premier paramètre doit être un entier (type */
-/* <integer>)                                     */
-steps(2.0, end)
-
-/* Le nombre d'étapes ne peut pas être négatif. */
-steps(-3, start)
-
-/* Il ne peut pas être nul.*/
-steps(0, end)
-
- -

La classe de fonction frames()

- -
-

Note : Le nom "frames" est actuellement en discussion et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.

-
- -

La notation fonctionnelle frames() définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre frames() et steps() est que frames() considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.

- -

frames(2), frames(4)

- -

 

- -

 

- -

Syntaxe

- -
steps(nombre_etapes)
-
- -

où :

- -
-
nombre_etapes
-
Est un entier ({{cssxref("<integer>")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.
-
- -

Exemples

- -

Ces fonctions de temporisation sont valides :

- -
/* Le paramètre est un entier positif. */
-frames(10)
-
- -
-

Note : une démo de la fonction frames() avec un exemple fonctionnel est disponible sur notre dépôt GitHub.

-
- -

Ces fonctions de temporisation sont invalides :

- -
/* Le paramètre passé à la fonction doit être un entier
-   et pas une valeur décimale, même si cette dernière est
-   égale à un entier. */
-frames(2.0)
-
-/* Le nombre de frames doit être positif. */
-frames(-3)
-
-/* Il doit y avoir au moins une frame. */
-frames(0)
-
- -

Mots-clés pour les fonctions de temporisation usuelles

- -

linear

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 1.0, 1.0). Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.

- -

ease

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.25, 0.1, 0.25, 1.0). Cette fonction est semblable à ease-in-out sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..

- -

ease-in

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 1.0, 1.0). L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.

- -

ease-in-out

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 0.58, 1.0). L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.

- -

ease-out

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 0.58, 1.0). L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.

- -

step-start

- -

Ce mot-clé représente la fonction de temporisation steps(1, start) (ou steps(1, jump-start)). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.

- -

step-end

- -

Ce mot-clé représente la fonction de temporisation steps(1, end) (ou steps(1, jump-end)). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}{{Spec2('CSS3 Animations')}}Définition de <single-timing-function> comme synonyme de <single-transition-timing-function> selon le module CSS pour les transitions.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.timing-function", 2)}}

- -

Voir aussi

- -
    -
  • Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <timing-function>
    • -
  • Les animations CSS
    • -
  • Les transitions CSS
    • -
diff --git a/files/fr/web/css/tools/cubic_bezier_generator/index.html b/files/fr/web/css/tools/cubic_bezier_generator/index.html new file mode 100644 index 0000000000..6a4671d141 --- /dev/null +++ b/files/fr/web/css/tools/cubic_bezier_generator/index.html @@ -0,0 +1,13 @@ +--- +title: Générateur de courbe de Bézier +slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +

{{Draft}}

+ +
+

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

+
diff --git a/files/fr/web/css/tools/index.html b/files/fr/web/css/tools/index.html new file mode 100644 index 0000000000..ac78261ad4 --- /dev/null +++ b/files/fr/web/css/tools/index.html @@ -0,0 +1,20 @@ +--- +title: Outils +slug: Web/CSS/Outils +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools +--- +

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.

+ +

{{LandingPageListSubpages}}

+ +

Autres outils

+ +
    +
  • Stylie pour les animations
    • +
  • Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : mydevice.io
    • +
  • Construire des menus CSS - cssmenumaker.com
    • +
  • Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - stylelint
    • +
diff --git a/files/fr/web/css/tools/linear-gradient_generator/index.html b/files/fr/web/css/tools/linear-gradient_generator/index.html new file mode 100644 index 0000000000..ae2340fd73 --- /dev/null +++ b/files/fr/web/css/tools/linear-gradient_generator/index.html @@ -0,0 +1,13 @@ +--- +title: Générateur de dégradés linéaires +slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools/Linear-gradient_Generator +--- +

{{Draft}}

+ +
+

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

+
diff --git a/files/fr/web/css/type_color/index.html b/files/fr/web/css/type_color/index.html deleted file mode 100644 index fd238e5816..0000000000 --- a/files/fr/web/css/type_color/index.html +++ /dev/null @@ -1,1379 +0,0 @@ ---- -title: -slug: Web/CSS/Type_color -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/color_value ---- -
{{CSSRef}}
- -

Le type de données CSS <color> permet de représenter des couleurs dans l'espace de couleurs sRGB. Une couleur pourra être décrite de trois façons :

- - - -

En plus de la couleur exprimée dans l'espace RGB, une valeur <color> contient également un canal alpha qui décrit la transparence de l'image et donc la façon dont cette image se compose avec son arrière-plan.

- -
-

Note : Cet article décrit le type de donnée CSS <color> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire Appliquer des couleurs à des éléments HTML grâce à CSS.

-
- -

Syntaxe

- -
-

Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge le profil de couleurs de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.

-
- -

Il existe plusieurs méthodes pour décrire une valeur <color>.

- -

Les mots-clés

- -

Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, blue le bleu, brown le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :

- -
    -
  • La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs VGA disponibles sur les cartes graphiques.
    • -
  • La spécification CSS de niveau 2 a ajouté le mot-clé orange.
    • -
  • Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (extended colors), couleurs X11 ou couleurs SVG.
    • -
  • La spécification CSS de niveau a ajouté la couleur rebeccapurple en l'honneur d'Eric Meyer.
    • -
- -

Voici quelques inconvénients liés aux mots-clés :

- -
    -
  • En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.
    • -
  • Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).
    • -
  • Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.
    • -
  • Certains mots-clés désignent la même couleur : -
      -
    • aqua / cyan
      • -
    • fuchsia / magenta
      • -
    • darkgray / darkgrey
      • -
    • darkslategray / darkslategrey
      • -
    • dimgray / dimgrey
      • -
    • lightgray / lightgrey
      • -
    • lightslategray / lightslategrey
      • -
    • gray / grey
      • -
    • slategray / slategrey
      • -
    -
    • -
  • Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationCouleurMot-cléValeurs exprimées en hexadécimal RGBExemple « live » dans le navigateur
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan (synonyme de aqua)#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta (synonyme de fuchsia)#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
- -

La couleur rebeccapurple est équivalente à la couleur #639. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « Honorer un grand homme » (en anglais).

- -

Le mot-clé transparent

- -

transparent est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : rgba(0,0,0,0).

- -
-

Note : Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, la spécification W3C indique que transparent devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur alpha de 0.

-
- -
Note historique : Le mot-clé transparent n'était pas une valeur de type <color> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via les canaux alpha, transparent a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <color> est nécessaire (la propriété {{cssxref("color")}} par exemple).
- -

Le mot-clé currentColor

- -

Le mot-clé currentColor représente la valeur calculée de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.

- -

Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.

- -

Si currentColor est utilisée comme valeur pour la propriété color, sa valeur est déterminée à partir de la valeur héritée pour la propriété color.

- -

Exemples

- -

La couleur de la ligne prend la couleur héritée depuis son élément parent.

- -
-
Exemple live n°1
- -
<div style="color:darkred">
- La couleur de ce texte est bleu.
-  <div style="background:currentColor; height:1px"></div>
- Un peu de texte.
-</div>
-
- -

{{EmbedLiveSample('Exemple_live_n°1')}}

- -
Exemple live n°2
- -
<div style="color:blue; border-bottom: 1px dashed currentColor;">
- La couleur de ce texte est bleu :
-  <div style="background:currentColor; height:1px"></div>
- Un peu de texte.
-</div>
- -

{{EmbedLiveSample('Exemple_live_n°2')}}

-
- -

Les couleurs RGB

- -

Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.

- -

Syntaxe

- -

Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #) ou avec des notations fonctionnelles (rgb() ou rgba()).

- -
-

Note : Dans la spécification du module CSS Color de niveau 4, rgba() a été définie comme une fonction historique dont la grammaire et le comportement est le même que rgb(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

-
- -
-
Notation hexadécimale : #RRGGBB[AA]
-
Le signe « # » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.
-
Notation hexadécimale : #RGB[A]
-
le signe « # » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.
-
Notation fonctionnelle avec des virgules : rgb(R, G, B[, A]) ou rgba(R, G, B, A)
-
Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction rgb()). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("<number>")}}) ou des pourcentages ({{cssxref("<percentage>")}}) (ex. rgb(1e2, .5e1, .5e0, +.25e2%)).
-
Notation fonctionnelle : rgb(R G B[ / A]) ou rgba(R G B / A)
-
Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification CSS Colors Level 4.
-
- -

Exemples

- -
Les différentes variantes pour la syntaxe RGB
- -
/* Ces exemples définissent tous la même couleur */
-#f03
-#F03
-#ff0033
-#FF0033
-rgb(255,0,51)
-rgb(255, 0, 51)
-rgb(255, 0, 51.0)
-rgb(100%,0%,20%)
-rgb(100%, 0%, 20%)
-rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
-
- -
RGBa
- -
/* Notation hexadécimale */
-#f030               /*   0% opacité - rouge */
-#F03F               /* 100% opacité - rouge */
-#ff003300           /*   0% opacité - rouge */
-#FF003388           /*  50% opacité - rouge */
-
-/* Notation fonctionnelle */
-rgba(255,0,0,0.1)   /*  10% opacité - rouge */
-rgba(255,0,0,0.4)   /*  40% opacité - rouge */
-rgba(255,0,0,0.7)   /*  70% opacité - rouge */
-rgba(255,0,0,  1)   /* 100% opacité - rouge */
-
-/* Notation fonctionnelle avec des nombres décimaux */
-rgba(255, 0, 153.6, 1)
-rgba(1e2, .5e1, .5e0, +.25e2%)
-
-/* Notation avec un espace */
-rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
-rgba(255 0 0 / 40%) /* 40% opacité - rouge */
- -

Les couleurs HSL

- -

Les couleurs peuvent également être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-clarté).

- -

HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).

- -

Syntaxe

- -

Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles hsl() ou hsla().

- -
-

Note : Dans la spécification du module CSS Color de niveau 4, hsla() a été définie comme une fonction historique dont la grammaire et le comportement est le même que hsl(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

-
- -
-
Notation fonctionnelle : hsl(H, S, L,[, A]) ou hsla(H, S, L, A)
-
-

La valeur H correspond à la teinte (hue) et est représentée comme un angle {{cssxref("<angle>")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, le rouge correspond à 0 et 360 et les autres couleurs évoluent sur le cercle. Vert correspond à 120 et bleu à 240. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).

- -

La valeur S correspond à la saturation (saturation) et la valeur L correspond à la clarté (lightness), ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec 100% l'image sera complètement saturée et avec 0%, l'image sera en nuances de gris. Pour la clarté, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une clarté « normale ».

- -

La valeur A (canal alpha) peut être un nombre (type {{cssxref("<number>")}} entre 0 et 1 ou un pourcentage (type {{cssxref("<percentage>")}} (la valeur 100% correspond alors à la valeur numérique 1 : opacité complète).

-
-
Notation fonctionnelle : hsl(H S L[ / A]) ou hsla(H S L / A)
-
-

Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.

-
-
- -

Exemples

- -
HSL
- -
hsl(0,  100%,50%)   /* red */
-hsl(30, 100%,50%)
-hsl(60, 100%,50%)
-hsl(90, 100%,50%)
-hsl(120,100%,50%)   /* green */
-hsl(150,100%,50%)
-hsl(180,100%,50%)
-hsl(210,100%,50%)
-hsl(240,100%,50%)   /* blue */
-hsl(270,100%,50%)
-hsl(300,100%,50%)
-hsl(330,100%,50%)
-hsl(360,100%,50%)   /* red */
-
-hsl(120,100%,25%)   /* dark green */
-hsl(120,100%,50%)   /* green */
-hsl(120,100%,75%)   /* light green */
-
-hsl(120,100%,50%)   /* green */
-hsl(120, 67%,50%)
-hsl(120, 33%,50%)
-hsl(120,  0%,50%)
-
-hsl(120, 60%,70%)   /* pastel green */
-
-/* syntaxe avec les espaces */
-hsl(120 60% 70%) /* pastel green */
-
-/* Valeur d'angle */
-/* on peut également utiliser les unités */
-/* rad, grad, turn */
-hsl(120deg 60% 70%) /* pastel green */
-
-/* Valeur alpha optionnelle */
-hsl(240,100%,50%,0.05)   /* 5% opaque blue */
-hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
-hsl(240 100% 50% / 0.05) /* 5% opaque blue */
-hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */
-
- -
HSLa
- -
hsla(240,100%,50%,0.05)  /* 5% opaque blue */
-hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
-hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
-hsla(240,100%,50%,   1)  /* full opaque blue */
-
-/* syntaxe avec un espace */
-hsla(240 100% 50% / 0.05)/* 5% opaque blue */
-
-/* valeur en pourcentage pour l'alpha */
-hsla(240 100% 50% / 5%)/* 5% opaque blue */
-
-/* valeur d'angle pour la teinte */
-/* les unités rad, grad et turn*/
-/* sont également acceptées */
-hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
-hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
- -

Couleurs système

- -

Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).

- -
-
ActiveBorder
-
La bordure de la fenêtre active.
-
ActiveCaption
-
La légende de la fenêtre active. Devrait être utilisé avec CaptionText comme couleur de premier-plan.
-
AppWorkspace
-
La couleur d'arrière-plan d'une interface avec plusieurs documents.
-
Background
-
L'arrière-plan du bureau.
-
ButtonFace
-
La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
-
ButtonHighlight
-
La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.
-
ButtonShadow
-
La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..
-
ButtonText
-
La couleur du texte sur les bouttons. Devrait être utilisée avec ButtonFace ou ThreeDFace comme couleur d'arrière-plan.
-
CaptionText
-
La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec ActiveCaption comme couleur d'arrière-plan.
-
GrayText
-
Texte (désactivé) en gris.
-
Highlight
-
La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec HighlightText comme couleur de premier-plan.
-
HighlightText
-
La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec Highlight comme couleur d'arrière-plan.
-
InactiveBorder
-
La couleur de la bordure d'une fenêtre inactive.
-
InactiveCaption
-
La couleur de la légende de fenêtre inactive. Devrait être utilisée avec InactiveCaptionText comme couleur de premier-plan.
-
InactiveCaptionText
-
La couleur du texte pour une légende inactive. Devrait être utilisée avec InactiveCaption comme couleur d'arrière-plan.
-
InfoBackground
-
La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec InfoText comme couleur de premier-plan.
-
InfoText
-
La couleur du texte pour les bulles d'informations. Devrait être utilisée avec InfoBackground comme couleur d'arrière-plan.
-
Menu
-
La couleur d'arrière-plan du menu. Devrait être utilisée avec MenuText ou -moz-MenuBarText comme couleur de premier-plan.
-
MenuText
-
La couleur du texte dans les menus. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
-
Scrollbar
-
La couleur d'arrière-plan de la barre de défilement (ascenseur).
-
ThreeDDarkShadow
-
La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDFace
-
La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
-
ThreeDHighlight
-
La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDLightShadow
-
La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDShadow
-
La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
Window
-
La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur WindowText en premier plan.
-
WindowFrame
-
La couleur du cadre de la fenêtre.
-
WindowText
-
La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur Window en arrière-plan.
-
- -

Ajouts propres à Mozilla pour les couleurs système

- -
-
-moz-ButtonDefault
-
La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.
-
-moz-ButtonHoverFace
-
La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait ThreeDFace ou ButtonFace lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec -moz-ButtonHoverText comme couleur de premier-plan.
-
-moz-ButtonHoverText
-
La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec-moz-ButtonHoverFace comme couleur d'arrière-plan.
-
-moz-CellHighlight
-
La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlightText comme couleur de premier-plan. Voir aussi -moz-html-CellHighlight.
-
-moz-CellHighlightText
-
La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlight comme couleur d'arrière-plan. Voir aussi -moz-html-CellHighlightText.
-
-moz-Combobox
-
{{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec -moz-ComboboxText comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-Field à la place.
-
-moz-ComboboxText
-
{{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec -moz-Combobox comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-FieldText à la place.
-
-moz-Dialog
-
La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec -moz-DialogText comme couleur de premier-plan.
-
-moz-DialogText
-
La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec -moz-Dialog comme couleur d'arrière-plan.
-
-moz-dragtargetzone
-
-moz-EvenTreeRow
-
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-OddTreeRow.
-
-moz-Field
-
La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec -moz-FieldText comme couleur de premier-plan.
-
-moz-FieldText
-
La couleur du texte pour les champs texte. Devrait être utilisée avec -moz-Field, -moz-EvenTreeRow, ou -moz-OddTreeRow comme couleur d'arrière-plan.
-
-moz-html-CellHighlight
-
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlightText comme couleur de premier-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlight.
-
-moz-html-CellHighlightText
-
{{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlight comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlightText.
-
-moz-mac-accentdarkestshadow
-
-moz-mac-accentdarkshadow
-
-moz-mac-accentface
-
-moz-mac-accentlightesthighlight
-
-moz-mac-accentlightshadow
-
-moz-mac-accentregularhighlight
-
-moz-mac-accentregularshadow
-
-moz-mac-chrome-active
-
{{Gecko_minversion_inline("1.9.1")}}
-
-moz-mac-chrome-inactive
-
{{Gecko_minversion_inline("1.9.1")}}
-
-moz-mac-focusring
-
-moz-mac-menuselect
-
-moz-mac-menushadow
-
-moz-mac-menutextselect
-
-moz-MenuHover
-
La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à Highlight. Devrait être utilisée avec -moz-MenuHoverText ou -moz-MenuBarHoverText comme couleur de premier-plan.
-
-moz-MenuHoverText
-
La couleur du texte pour les éléments de menu survolés. Généralement similaire à HighlightText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
-
-moz-MenuBarText
-
{{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à MenuText. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
-
-moz-MenuBarHoverText
-
La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à -moz-MenuHoverText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
-
-moz-nativehyperlinktext
-
{{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.
-
-moz-OddTreeRow
-
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-EvenTreeRow.
-
-moz-win-accentcolor
-
{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.
-
-moz-win-accentcolortext
-
{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.
-
-moz-win-communicationstext
-
{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
-
-moz-win-mediatext
-
{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
-
- -

Ajout de Mozilla pour les couleurs liées aux préférences

- -
-
-moz-activehyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-
-moz-default-background-color
-
{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
-
-moz-default-color
-
{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.
-
-moz-hyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-
-moz-visitedhyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-
- -

Interpolation

- -

Les valeurs de type <color> peuvent être interpolées afin de créer des animations ou des dégradés (type <gradient>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans l'espace de couleurs alpha sRGBA prémultiplié afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon la fonction de temporisation associée à l'animation.

- -

Accessibilité

- -

La recommandation du W3C : WCAG 2.0 conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur Ies couleurs et le contraste pour plus d'informations).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Ajout de la couleur rebeccapurple, de la notation hexadécimale sur quatre chiffres (#RGBA) et sur huit chiffres (#RRGGBBAA). rgba() et hsla() sont désormais synonymes de rgb() et hsl(), les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.properties.color")}}

- -

Voir aussi

- -
    -
  • {{cssxref("opacity")}}
    • -
  • {{cssxref("color")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("outline-color")}}
    • -
  • {{cssxref("text-shadow")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
diff --git a/files/fr/web/css/type_position/index.html b/files/fr/web/css/type_position/index.html deleted file mode 100644 index 03ddd68285..0000000000 --- a/files/fr/web/css/type_position/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: -slug: Web/CSS/Type_position -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/position_value ---- -
{{CSSRef}}
- -

Le type de donnée CSS <position> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <position>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.

- -

Syntaxe

- -

On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera left, right, top, bottom ou center (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).

- -

Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).

- -

Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est center.

- -

Valeurs

- -
/* Syntaxe avec une valeur */
-mot-clé                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
-<length> ou <percentage> /* La position sur l'axe */
-
-/* Syntaxe avec deux valeurs */
-mot-clé mot-clé          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
-mot-clé valeur           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
-valeur mot-clé           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
-valeur valeur            /* Une valeur pour chaque composante du décalage */
-
-/* Syntaxe avec quatre valeurs */
-mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
-
- -

Syntaxe formelle

- -
[
- [ left | center | right ] || [ top | center | bottom ]
-|
- [ left | center | right | <length> | <percentage> ]
- [ top | center | bottom | <length> | <percentage> ]?
-|
- [ [ left | right ] [ <length> | <percentage> ] ] &&
- [ [ top | bottom ] [ <length> | <percentage> ] ]
-]
-
- -

Interpolation

- -

Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("<timing-function>")}}) et le point se déplacera donc sur une ligne.

- -

Exemples

- -

CSS

- -
div {
-  background-color: #FFEE99;
-  background-repeat: no-repeat;
-  width: 300px;
-  height: 80px;
-  margin-bottom: 12px;
-}
-
-.exemple{
-  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
-  // Ici un exemple de valeur <position>
-  background-position:  2.5cm bottom;
-}
- -

HTML

- -
<div class="exemple">Exemple</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 120, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  <position> qui doit être utilisée.
{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}{{Spec2('CSS3 Backgrounds')}}<position> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}<position> est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.position")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/type_selectors/index.html b/files/fr/web/css/type_selectors/index.html new file mode 100644 index 0000000000..adf931d9fe --- /dev/null +++ b/files/fr/web/css/type_selectors/index.html @@ -0,0 +1,82 @@ +--- +title: Sélecteurs de type +slug: Web/CSS/Sélecteurs_de_type +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.

+ +
/* Cibler tous les éléments <a>. */
+a {
+  color: red;
+}
+ +

Syntaxe

+ +
élément { style propriétés }
+
+ +

Exemples

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Voici un élément <code>span</code> avec du texte.</span>
+<p>Et là un élément <code>p</code>.</p>
+<span>Enfin, un autre élément <code>span</code>.</span>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 200, 150)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.type")}}

diff --git a/files/fr/web/css/types_css/index.html b/files/fr/web/css/types_css/index.html deleted file mode 100644 index 28f95eeef4..0000000000 --- a/files/fr/web/css/types_css/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Types CSS -slug: Web/CSS/Types_CSS -tags: - - Aperçu - - CSS - - CSS Data Type - - Reference - - Type -translation_of: Web/CSS/CSS_Types ---- -
{{CSSRef}}
- -

Le module CSS basic data types définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (< >).

- -
-

Note : Les types de donnée CSS sont un type spécial de composant de type de valeur.

-
- -

Référence

- -
-
    -
  • {{cssxref("<angle>")}}
    • -
  • {{cssxref("<angle-percentage>")}}
    • -
  • {{cssxref("<angular-color-hint>")}}
    • -
  • {{cssxref("<angular-color-stop>")}}
    • -
  • {{cssxref("<attr-fallback>")}}
    • -
  • {{cssxref("<attr-name>")}}
    • -
  • {{cssxref("<basic-shape>")}}
    • -
  • {{cssxref("<blend-mode>")}}
    • -
  • {{cssxref("<calc-product>")}}
    • -
  • {{cssxref("<calc-sum>")}}
    • -
  • {{cssxref("<calc-value>")}}
    • -
  • {{cssxref("<color>")}}
    • -
  • {{cssxref("<color-stop>")}}
    • -
  • {{cssxref("<color-stop-angle>")}}
    • -
  • {{cssxref("<counter-style>")}}
    • -
  • {{cssxref("<custom-ident>")}}
    • -
  • {{cssxref("<dimension>")}}
    • -
  • {{cssxref("<filter-function>")}}
    • -
  • {{cssxref("<flex>")}}
    • -
  • {{cssxref("<frequency>")}}
    • -
  • {{cssxref("<frequency-percentage>")}}
    • -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("<ident>")}}
    • -
  • {{cssxref("<image>")}}
    • -
  • {{cssxref("<integer>")}}
    • -
  • {{cssxref("<length>")}}
    • -
  • {{cssxref("<length-percentage>")}}
    • -
  • {{cssxref("<number>")}}
    • -
  • {{cssxref("<number-percentage>")}}
    • -
  • {{cssxref("<percentage>")}}
    • -
  • {{cssxref("<position>")}}
    • -
  • {{cssxref("<quote>")}}
    • -
  • {{cssxref("<ratio>")}}
    • -
  • {{cssxref("<resolution>")}}
    • -
  • {{cssxref("<shape-box>")}}
    • -
  • {{cssxref("<shape-radius>")}}
    • -
  • {{cssxref("<string>")}}
    • -
  • {{cssxref("<time>")}}
    • -
  • {{cssxref("<time-percentage>")}}
    • -
  • {{cssxref("<timing-function>")}}
    • -
  • {{cssxref("<toggle-value>")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • {{cssxref("<type-or-unit>")}}
    • -
  • {{cssxref("<url>")}}
    • -
  • {{cssxref("<url-modifier>")}}
    • -
  • {{cssxref("<zero>")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values')}}{{Spec2('CSS3 Values')}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/universal_selectors/index.html b/files/fr/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..470d27160c --- /dev/null +++ b/files/fr/web/css/universal_selectors/index.html @@ -0,0 +1,103 @@ +--- +title: Sélecteurs universels +slug: Web/CSS/Sélecteurs_universels +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef("Selectors")}}
+ +

L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.

+ +
* {
+  color: green;
+}
+ +

En CSS 3, l'astérisque peut être combinée avec les espaces de nom :

+ +
    +
  • ns|* - correspond à tous les éléments de l'espace de noms ns
    • +
  • *|* - correspond à tous les éléments
    • +
  • |* - correspond à tous les éléments sans espace de noms déclaré
    • +
+ +

Syntaxe

+ +
* { style properties }
+ +

L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, *.warning et .warning seront équivalents.

+ +

Exemples

+ +

CSS

+ +
* [lang^=fr] {
+  color:green;
+}
+
+*.warning {
+  color:red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left;
+}
+
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="fr">Un span vert</span> dans un paragraphe rouge.
+</p>
+<p id="maincontent" lang="fr">
+  <span class="warning">Un span rouge</span> dans un paragraphe vert.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 250, 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments.
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.universal")}}

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: -slug: Web/CSS/url -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -
{{CSSRef}}
- -

Le type de donnée CSS <url> 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 url(). Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.

- -
Note : URI ou URL ?
-
-Une URI est différente d'une URL. 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 URN d'une ressource.
-
-Pour la spécification CSS de niveau 1, la notation fonctionnelle url() a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <url> bien qu'il n'était pas défini explicitement).
-
-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  url() était utilisée pour créer une valeur de type <uri>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.
-
-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 url() représente donc une valeur de type <url> et plus une valeur de type <uri>.
-
-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.
- -

Syntaxe

- -

L'URL peut être indiquée telle quelle comme argument de la fonction url()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).

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

Note : 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.

-
- -

Exemples

- -

CSS

- -
ul {
-  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
-}
- -

HTML

- -
<ul>
-    <li>Élément 1</li>
-    <li>Élément 2</li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#urls', '<url>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}}Aucune modification significative.
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.url")}}

- -

Voir aussi

- -
    -
  • {{cssxref("url()", "url()")}}
    • -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("element()")}}
    • -
  • {{cssxref("_image","image()")}}
    • -
  • {{cssxref("image-set","image-set()")}}
    • -
  • {{cssxref("cross-fade")}}
    • -
diff --git a/files/fr/web/css/used_value/index.html b/files/fr/web/css/used_value/index.html new file mode 100644 index 0000000000..df94445fd7 --- /dev/null +++ b/files/fr/web/css/used_value/index.html @@ -0,0 +1,144 @@ +--- +title: Valeur utilisée +slug: Web/CSS/Valeur_utilisée +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/used_value +--- +
{{cssref}}
+ +

La valeur utilisée de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés.

+ +

Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple width, height) sont exprimées en pixels et les propriétés raccourcies (comme background) sont cohérentes avec leurs propriétés composantes (par exemple background-color), display est cohérente avec position et float.

+ +

Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript window.getComputedStyle().

+ +

Détails

+ +

Quatre étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.

+ +
    +
  1. Tout d'abord, la valeur spécifiée est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'héritage (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.
    2. +
  2. Ensuite, la valeur calculée est déterminée selon la spécification (par exemple, un span avec position: absolute aura display qui passera à block pour la valeur calculée).
    3. +
  3. Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur auto ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la valeur utilisée.
    4. +
  4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est la valeur réelle. La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à window.getComputedStyle  (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée valeur résolue).
    5. +
+ +

Différence avec les valeurs calculées

+ +

CSS 2.0 définissait la valeur calculée comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme display, font-size ou line-height), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de CSS 2.1 Changes: Specified, computed, and actual values) :

+ +
    +
  • background-position
    • +
  • bottom, left, right, top
    • +
  • height, width
    • +
  • margin-bottom, margin-left, margin-right, margin-top
    • +
  • min-height, min-width
    • +
  • padding-bottom, padding-left, padding-right, padding-top
    • +
  • text-indent
    • +
+ +

Exemples

+ +

Cet exemple illustre et calcule les largeurs utilisées pour les trois éléments.

+ +

CSS

+ +
#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Permet de mieux voir les résultats */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}
+ +

HTML

+ +
<div id="no-width">
+  <p>Pas de largeur explicite.</p>
+  <p class="show-used-width">..</p>
+
+  <div id="width-50">
+    <p>Largeur explicite : 50%.</p>
+    <p class="show-used-width">..</p>
+
+    <div id="width-inherit">
+      <p>Largeur explicite: héritée avec <code>inherit</code>.</p>
+      <p class="show-used-width">..</p>
+    </div>
+  </div>
+</div>
+
+ +

JavaScript

+ +
function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '80%', '372px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" "b/files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" deleted file mode 100644 index 94a0fbcb67..0000000000 --- "a/files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" +++ /dev/null @@ -1,747 +0,0 @@ ---- -title: Utilisation de dégradés CSS -slug: Web/CSS/Utilisation_de_dégradés_CSS -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Images/Using_CSS_gradients ---- -
{{CSSRef}}
- -

Les dégradés CSS sont représentés par le type de donnée {{cssxref("<gradient>")}} qui est un sous-ensemble du type {{cssxref("<image>")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).

- -

Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.

- -

Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.

- -

Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.

- -

Dégradés linéaires

- -

Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.

- -

Dégradés linéaires simples

- -

Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(blue, white);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
- -

Résultat

- -

{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}

- -

Appliquer un dégradé de gauche à droite

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(to right, blue, white);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}

- -

Appliquer un dégradé en diagonale

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(to bottom right, blue, white);
-}
-
-div {
-  width: 200px;
-  height: 100px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}

- -

Utilisation d’angles

- -

Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(70deg, blue, pink);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Utilisation_d’angles",120,120)}}

- -

L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, 0deg crée un dégradé vertical de bas en haut, tandis que 90deg génère un dégradé horizontal de la gauche vers la droite :

- -

linear_redangles.png

- -
background: linear-gradient(<angle>, red, white);
- -

Créer des effets et manipuler les couleurs

- -

Utiliser plus de deux couleurs

- -

Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(red, yellow, blue, orange);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}

- -

Arrêts de couleurs

- -

Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, 0% indique le point de départ, et 100% le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Arrêts_de_couleur",120,120)}}

- -

Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.

- -

Utiliser des indications de couleurs

- -

Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.

- -

CSS

- -
div {
-  width:120px;
-  height: 120px;
-  float: left;
-  margin-right: 10px;
-}
-
-.color-hint {
-  background: linear-gradient(blue, 10%, pink);
-}
-
-.simple-linear {
-  background: linear-gradient(blue, pink);
-}
- -

HTML

- -
<div class="color-hint"></div>
-<div class="simple-linear"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}

- -

Transparence et dégradés

- -

Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(to right, transparent, mistyrose),
-    url("https://mdn.mozillademos.org/files/15525/critters.png");
-}
-
-div {
-  width: 300px;
-  height: 150px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}

- -

Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.

- -

Créer des lignes franches

- -

Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à 50%:

- - - -
.striped {
-   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
-}
- -

{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}

- -

Créer des bandes de couleur

- -

Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.

- - - -
.multiposition-stops {
-   background: linear-gradient(to left,
-       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
-   background: linear-gradient(to left,
-       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
-}
-.multiposition-stop2 {
-   background: linear-gradient(to left,
-      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
-   background: linear-gradient(to left,
-      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
-}
-
- -

{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}

- -

Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.

- -

Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.

- -

Contrôler la progression du dégradé

- -

Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.

- - - -
.colorhint-gradient {
-  background: linear-gradient(to top, black, 20%, cyan);
-}
-.regular-progression {
-  background: linear-gradient(to top, black, cyan);
-}
-
- -

{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}

- -

Empilement de dégradés

- -

Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.

- -

CSS

- -
.linear-gradient {
-  background:
-    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-}
-
-div {
-  width: 100px;
-  height: 100px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Empilement_de_dégradés")}}

- -

Dégradés radiaux

- -

Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.

- -

Un dégradé radial simple

- -
-

Note : Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.

-
- -

De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.

- - - -
.simple-radial {
-  background: radial-gradient(red, blue);
-}
-
- -

{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}

- -

Positionner les points d’arrêt

- -

À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.

- - - -
.radial-gradient {
-  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
-}
-
- -

{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}

- -

Positionner le centre du dégradé

- -

La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.

- - - -
.radial-gradient {
-  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
-}
-
- -

{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}

- -

Dimensionner les dégradés radiaux

- -

À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.

- -

Utiliser closest-side pour les ellipses

- -

Dans l'exemple qui suit, on utilise la valeur closest-side pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.

- - - -
.radial-ellipse-side {
-  background: radial-gradient(ellipse closest-side,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}

- -

Utiliser farthest-corner pour les ellipses

- -

Cet exemple ressemble fortement au précédent mais on utilise ici farthest-corner qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.

- - - -
.radial-ellipse-far {
-  background: radial-gradient(ellipse farthest-corner,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}

- -

Utiliser closest-side pour les cercles

- -

Pour cet exemple, on utilise closest-side qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.

- - - -
.radial-circle-close {
-  background: radial-gradient(circle closest-side,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}

- -

Empiler des dégradés radiaux

- -

À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.

- - - -
.stacked-radial {
-  background:
-      radial-gradient(circle at 50% 0,
-        rgba(255,0,0,.5),
-        rgba(255,0,0,0) 70.71%),
-      radial-gradient(circle at 6.7% 75%,
-        rgba(0,0,255,.5),
-        rgba(0,0,255,0) 70.71%),
-      radial-gradient(circle at 93.3% 75%,
-        rgba(0,255,0,.5),
-        rgba(0,255,0,0) 70.71%) beige;
-  border-radius: 50%;
-}
-
- -

{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}

- -

Dégradés coniques

- -

La fonction conic-gradient() permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs.

- -

La syntaxe de conic-gradient() est semblable à celle de radial-gradient() mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues.

- -

Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui progresse vers l'extérieur dans toutes les directions. Un dégradé conique verra la transition progresser le long de l'arc autour du cercle, dans le sens horaire. À l'instar des dégradés radiaux, il est possible de positionner le centre du dégradé et à l'instar des dégradés linéaires, on peut modifier l'angle du dégradé.

- -
-

Un dégradé conique simple

- -

Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :

- - - -
.simple-conic {
-  background: conic-gradient(red, blue);
-}
-
- -

{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}

-
- -
-

Positionner le centre

- -

À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé at.

- - - -
.conic-gradient {
-  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
-}
-
- -

{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}

-
- -
-

Modifier l’angle

- - - -
.conic-gradient {
-  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
-}
-
- -

{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}

-
- -

Répéter des dégradés

- -

Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.

- -

La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.

- -

Répéter un dégradé linéaire

- -

Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.

- - - -
.repeating-linear {
-  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
-}
-
- -

{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}

- -

Répéter plusieurs dégradés linéaires

- - - -
.multi-repeating-linear {
-  background:
-      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
-        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
-        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
-        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
-        rgba(255, 0, 0, 0.5) 300px),
-      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
-        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
-        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
-        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
-        rgba(255, 0, 0, 0.5) 230px),
-      repeating-linear-gradient(23deg, red 50px, orange 100px,
-        yellow 150px, green 200px, blue 250px,
-        indigo 300px, violet 350px, red 370px);
-}
-
- -

{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}

- -

Créer un tartan

- - - -
.plaid-gradient {
-  background:
-      repeating-linear-gradient(90deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(0deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(-45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
-      repeating-linear-gradient(45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
-}
-
- -

{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}

- -

Répéter des dégradés radiaux

- -

Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.

- - - -
.repeating-radial {
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-}
-
- -

{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}

- -

Répéter plusieurs dégradés radiaux

- - - -
.multi-target {
-  background:
-      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
-        rgba(255,255,255,0.5) 30px) top left no-repeat,
-      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
-        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
-  background-size: 200px 200px, 150px 150px;
-}
-
- -

{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}

- -

Voir aussi

- -
    -
  • Les fonctions de manipulation des dégradés -
      -
    • {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}
      • -
    -
    • -
  • Les types de donnée CSS relatifs aux dégradés -
      -
    • {{cssxref("<gradient>")}}, {{cssxref("<image>")}}
      • -
    -
    • -
  • Certaines propriétés CSS qui permettent d'utiliser des dégradés -
      -
    • {{cssxref("background")}}, {{cssxref("background-image")}}
      • -
    -
    • -
  • Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou
    • -
  • Un générateur de dégradé CSS
    • -
diff --git "a/files/fr/web/css/valeur_calcul\303\251e/index.html" "b/files/fr/web/css/valeur_calcul\303\251e/index.html" deleted file mode 100644 index 356a3f75ba..0000000000 --- "a/files/fr/web/css/valeur_calcul\303\251e/index.html" +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Valeur calculée -slug: Web/CSS/Valeur_calculée -tags: - - CSS - - Reference -translation_of: Web/CSS/computed_value ---- -
{{CSSRef}}
- -

La valeur calculée d'une propriété CSS est calculée à partir de la valeur définie :

- -
    -
  1. En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
    2. -
  2. En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.
    3. -
- -

Les calculs utilisés pour obtenir la valeur calculée correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme em ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes font-size: 16px et padding-top: 2em. La valeur calculée de la propriété padding-top sera 32px (on double la taille de la police).

- -

Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme width, margin-right, text-indent, et top), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété line-height sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine les valeurs utilisées.

- -

Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de la valeur spécifiée à la valeur utilisée) est l'héritage, notamment grâce au mot-clé {{cssxref("inherit")}}.

- -
-

Note : La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie la valeur résolue qui correspond à la valeur calculée ou à la valeur utilisée selon la propriété.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/valeur_initiale/index.html b/files/fr/web/css/valeur_initiale/index.html deleted file mode 100644 index eedda54344..0000000000 --- a/files/fr/web/css/valeur_initiale/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Valeur initiale -slug: Web/CSS/Valeur_initiale -tags: - - CSS - - Reference -translation_of: Web/CSS/initial_value ---- -
{{CSSRef}}
- -

La valeur initiale d'une propriété CSS est définie par la spécification et varie selon qu'une propriété est héritée ou non.

- - - -

Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
CSS Cascade 4 Définition formelle.
{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}{{Spec2("CSS2.1")}}Définition implicite.
- -

Voir aussi

- - diff --git a/files/fr/web/css/valeur_reelle/index.html b/files/fr/web/css/valeur_reelle/index.html deleted file mode 100644 index 4a4d768379..0000000000 --- a/files/fr/web/css/valeur_reelle/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Valeur réelle -slug: Web/CSS/valeur_reelle -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/actual_value ---- -
{{CSSRef}}
- -

La valeur réelle d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer la valeur calculée pour l'épaisseur de la bordure.

- -

Calculer la valeur réelle d'une propriété

- -

La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :

- -
    -
  1. La valeur initiale (indiquée par la spécification).
    2. -
  2. La valeur définie qui résulte de l'héritage et de la cascade.
    3. -
  3. La valeur calculée est calculée selon la spécification.
    4. -
  4. La disposition est calculée, fournissant ainsi la valeur utilisée.
    5. -
  5. La valeur réelle
    6. -
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/valeur_r\303\251solue/index.html" "b/files/fr/web/css/valeur_r\303\251solue/index.html" deleted file mode 100644 index 8ce7a5b45a..0000000000 --- "a/files/fr/web/css/valeur_r\303\251solue/index.html" +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Valeur résolue -slug: Web/CSS/valeur_résolue -tags: - - CSS - - Reference -translation_of: Web/CSS/resolved_value ---- -
{{cssref}}
- -

La valeur résolue d'une propriété CSS est la valeur renvoyée par {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Pour la plupart des propriétés, il s'agit de la valeur calculée mais pour un tout petit nombre d'anciennes propriétés (dont {{cssxref("width")}} et {{cssxref("height")}}), il s'agit par contre de la valeur utilisée. Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Définition initiale
- -

Voir aussi

- - diff --git "a/files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" "b/files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" deleted file mode 100644 index 14eb3d9e5a..0000000000 --- "a/files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Valeur spécifiée -slug: Web/CSS/Valeur_spécifiée -tags: - - CSS - - Cascade - - Reference -translation_of: Web/CSS/specified_value ---- -
{{CSSRef}}
- -

La valeur définie d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :

- -
    -
  1. Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété {{cssxref("color")}} est définie à green alors la couleur du texte des éléments correspondants sera verte.
    2. -
  2. Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe ({{HTMLElement("p")}}) dans un {{HTMLElement("div")}} et que le {{HTMLElement("div")}} est ciblée par une déclaration CSS où font vaut Arial et qu'il n'y a pas de règle font pour {{HTMLElement("p")}}, ce dernier héritera de la police Arial.
    3. -
  3. Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.
    4. -
- -

Exemples

- -

HTML

- -
<p>Ma couleur provient explicitement de la feuille de style CSS.</p>
-
-<div>Les valeurs définies de mes propriétés utilisent
-    les valeurs initiales (par défaut) car aucune n'est fournie
-    dans la feuille de style CSS.</div>
-
-<div class="fun">
-  <p>La valeur définie pour ma police n'est pas fournie explicitement
-     dans la feuille de style et est donc héritée de mon parent.
-     Toutefois, la bordure n'est pas une propriété héritée.</p>
-</div>
- -

CSS

- -
.fun {
-  border: 1px dotted pink;
-  font-family: fantasy;
-}
-
-p {
-  color: green;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 500, 220)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/valeur_utilis\303\251e/index.html" "b/files/fr/web/css/valeur_utilis\303\251e/index.html" deleted file mode 100644 index df94445fd7..0000000000 --- "a/files/fr/web/css/valeur_utilis\303\251e/index.html" +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Valeur utilisée -slug: Web/CSS/Valeur_utilisée -tags: - - CSS - - Guide - - Reference - - Web -translation_of: Web/CSS/used_value ---- -
{{cssref}}
- -

La valeur utilisée de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés.

- -

Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple width, height) sont exprimées en pixels et les propriétés raccourcies (comme background) sont cohérentes avec leurs propriétés composantes (par exemple background-color), display est cohérente avec position et float.

- -

Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript window.getComputedStyle().

- -

Détails

- -

Quatre étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.

- -
    -
  1. Tout d'abord, la valeur spécifiée est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'héritage (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.
    2. -
  2. Ensuite, la valeur calculée est déterminée selon la spécification (par exemple, un span avec position: absolute aura display qui passera à block pour la valeur calculée).
    3. -
  3. Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur auto ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la valeur utilisée.
    4. -
  4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est la valeur réelle. La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à window.getComputedStyle  (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée valeur résolue).
    5. -
- -

Différence avec les valeurs calculées

- -

CSS 2.0 définissait la valeur calculée comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme display, font-size ou line-height), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de CSS 2.1 Changes: Specified, computed, and actual values) :

- -
    -
  • background-position
    • -
  • bottom, left, right, top
    • -
  • height, width
    • -
  • margin-bottom, margin-left, margin-right, margin-top
    • -
  • min-height, min-width
    • -
  • padding-bottom, padding-left, padding-right, padding-top
    • -
  • text-indent
    • -
- -

Exemples

- -

Cet exemple illustre et calcule les largeurs utilisées pour les trois éléments.

- -

CSS

- -
#no-width {
-  width: auto;
-}
-
-#width-50 {
-  width: 50%;
-}
-
-#width-inherit {
-  width: inherit;
-}
-
-/* Permet de mieux voir les résultats */
-div {
-  border: 1px solid red;
-  padding: 8px;
-}
- -

HTML

- -
<div id="no-width">
-  <p>Pas de largeur explicite.</p>
-  <p class="show-used-width">..</p>
-
-  <div id="width-50">
-    <p>Largeur explicite : 50%.</p>
-    <p class="show-used-width">..</p>
-
-    <div id="width-inherit">
-      <p>Largeur explicite: héritée avec <code>inherit</code>.</p>
-      <p class="show-used-width">..</p>
-    </div>
-  </div>
-</div>
-
- -

JavaScript

- -
function updateUsedWidth(id) {
-  var div = document.querySelector(`#${id}`);
-  var par = div.querySelector('.show-used-width');
-  var wid = window.getComputedStyle(div)["width"];
-  par.textContent = `Used width: ${wid}.`;
-}
-
-function updateAllUsedWidths() {
-  updateUsedWidth("no-width");
-  updateUsedWidth("width-50");
-  updateUsedWidth("width-inherit");
-}
-
-updateAllUsedWidths();
-window.addEventListener('resize', updateAllUsedWidths);
-
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '80%', '372px')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" "b/files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" deleted file mode 100644 index 0c1c4f9b57..0000000000 --- "a/files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" +++ /dev/null @@ -1,494 +0,0 @@ ---- -title: Valeurs et unités CSS -slug: Web/CSS/Valeurs_et_unités_CSS -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Values_and_Units ---- -
{{CSSRef}}
- -

Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification CSS Values and Units (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.

- -

Types de données textuels

- -
    -
  • {{cssxref("<custom-ident>")}}
    • -
  • Des mots-clés prédéfinis tels que les identifiants (<ident>)
    • -
  • {{cssxref("<string>")}}
    • -
  • {{cssxref("<url>")}}
    • -
- -

Une valeur dont le type de donnée est textuel peut être un identifiant CSS (<ident>) ou une chaîne de caractères (<string>). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (<string>) doivent être délimitées par des quotes ou des doubles quotes.

- -

Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme {{cssxref("<custom-ident>")}} ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété {{cssxref("grid-area")}}, on peut utiliser une valeur de type <custom-ident> et si on a une zone de grille nommée content, on l'indiquera sans quotes :

- -
.item {
-  grid-area: content;
-}
-
- -

En revanche, lorsqu'on manipule une valeur de type {{cssxref("<string>")}}, comme ça peut être le cas lorsqu'on utilise la propriété {{cssxref("content")}}, il faut l'entourer de quotes :

- -
.item::after {
-  content: "Voici le contenu.";
-}
-
- -

Si le type indiqué dans la spécification est <custom-ident> | <string>, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :

- -
@keyframe identifiantValide {
-  /* on place les keyframes ici */
-}
-
-@keyframe 'chaineValide' {
-  /* on place les keyframes ici */
-}
- -

Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être none, unset, initial ou inherit, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages {{cssxref("<custom-ident>")}} et {{cssxref("<string>")}}.

- -

Mots-clés prédéfinis

- -

Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.

- -

Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété {{cssxref("break-inside")}}.

- -
auto | avoid | avoid-page | avoid-column | avoid-region
- -

Dans une déclaration, on pourra donc écrire (sans quote) :

- -
.box {
-  break-inside: avoid;
-}
-
- -

Mots-clés généraux

- -

En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : {{cssxref("initial")}}, {{cssxref("inherit")}} et {{cssxref("unset")}}.

- -

Le mot-clé initial représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé inherit correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.

- -

Le mot-clé unset agit comme inherit ou initial selon que la propriété soit héritée ou non.

- -

Une quatrième valeur, {{cssxref("revert")}}, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).

- -

URL

- -

Une valeur de type {{cssxref("<url>")}} s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type <string>) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.

- -
.box {
-  background-image: url("images/mon-arriere-plan.png");
-}
-
-.box {
-  background-image: url("https://www.exammple.com/images/mon-arriere-plan.png");
-}
-
- -

On notera que la valeur passée à url() peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur <url-token> et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page {{cssxref("<url>")}} pour plus d'informations.

- -

Types de données numériques

- -
    -
  • {{cssxref("<integer>")}}
    • -
  • {{cssxref("<number>")}}
    • -
  • {{cssxref("<dimension>")}}
    • -
  • {{cssxref("<percentage>")}}
    • -
- -

Entiers

- -

Un entier ({{cssxref("<integer>")}}) se compose d'un ou plusieurs chiffres entre 0 et 9 (exemple de valeurs : 1024 ou -55). Un entier peut être précédé d'un signe + ou -.

- -

Nombres

- -

Un nombre ({{cssxref("<number>")}}) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, 1 et 1.2 sont des nombres en CSS. Les nombres peuvent être précédés d'un signe + ou -.

- -

Dimensions

- -

Une valeur {{cssxref("<dimension>")}} est un nombre (<number>) suivi directement d'une unité (par exemple 10px). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (1 cm ne sera pas valide). CSS utilise les dimensions pour les types suivants :

- -
    -
  • {{cssxref("<length>")}} (longueurs avec des unités de distance)
    • -
  • {{cssxref("<angle>")}}
    • -
  • {{cssxref("<time>")}}
    • -
  • {{cssxref("<frequency>")}}
    • -
  • {{cssxref("<resolution>")}}
    • -
- -

Nous verrons chacun de ces types dans les sections suivantes.

- -
    -
- -

Unités de distance

- -

Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type {{cssxref("<length>")}}. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.

- -

Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité em sera relative à la taille (corps) de la police pour l'élément ; l'unité vh sera relative à la hauteur de la zone d'affichage (viewport).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Récapitulatif des unités relatives
UnitéRelative à
emLa taille (corps) de police de l'élément
exLa hauteur d'un x avec la police utilisée par l'élément
capLa hauteur d'une majuscule nominale avec la police utilisée par l'élément
chLa largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)).
icLa largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).
remLa taille (corps) de police de l'élément racine
lhLa hauteur de la ligne de l'élément
rlhLa hauteur de la ligne de l'élément racine
vw1% de la largeur de la zone d'affichage (viewport)
vh1% de la hauteur de la zone d'affichage (viewport)
vi1% de la taille de la zone d'affichage sur l'axe en ligne (inline axis)
vb1% de la taille de la zone d'affichage sur l'axe de bloc (block axis)
vmin1% de la zone d'affichage selon sa plus petite dimension
vmax1% de la zone d'affichage selon sa plus grande dimension
- -

Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité cm correspond à un centimètre physique.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Récapitulatif des unités de longueur absolue
UnitéNomÉquivalence
cmCentimètre1cm = 96px/2.54
mmMillimètre1mm = 1/10e de 1cm
QQuart de millimètre1Q = 1/40e de 1cm
inPouces (inches)1in = 2.54cm = 96px
pcPicas1pc = 1/16e de 1in
ptPoints1pt = 1/72e de 1in
pxPixels1px = 1/96e de 1in
- -

Lorsqu'on utilise une longueur nulle (sa valeur est 0), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.

- -

Unités angulaires

- -

Les valeurs angulaires sont représentées avec le type {{cssxref("<angle>")}} et peuvent être décrites avec les unités suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitéNomDescription
degDegrésUn cercle se divise en 360 degrés égaux.
gradGrades/GradiansUn cercle se compose de 400 grades.
radRadiansUn cercle se compose de 2π radians.
turnToursUn cercle se compose d'un tour.
- -

Unités temporelles

- -

Les valeurs temporelles sont de type {{cssxref("<time>")}} et utilisent les unités suivantes.

- - - - - - - - - - - - - - - - - - - - - -
UnitéNomDescription
sSecondes 
msMillisecondesUn millième de seconde.
- -

Unités de fréquence

- -

Les valeurs de fréquence ont le type {{cssxref("<frequency>")}} et utilisent les valeurs suivantes.

- - - - - - - - - - - - - - - - - - - - - -
UnitéNomDescription
HzHertzNombre de fois par seconde.
kHzKilohertz1000 Hertz.
- -

Unités de résolution

- -

Les résolutions sont représentées par des valeurs de type {{cssxref("<resolution>")}}. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.

- - - - - - - - - - - - - - - - - - - - - - -
UnitéDescription
dpiPoints par pouce.
dpcmPoints par centimètre.
dppx, xPoints par unité px.
- -

Pourcentages

- -

Une valeur de type {{cssxref("<percentage>")}} représente une fraction d'une autre valeur de référence.

- -

Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.

- -

Ainsi, si on utilise {{cssxref("width")}} avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :

- -
.box {
-  width: 50%;
-}
- -

Mélanges entre les pourcentages et les dimensions

- -

Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. {{cssxref("<length-percentage>")}}). Voici les différentes unités composites qui existent :

- -
    -
  • {{cssxref("<frequency-percentage>")}}
    • -
  • {{cssxref("<angle-percentage>")}}
    • -
  • {{cssxref("<time-percentage>")}}
    • -
- -

Types de données spéciaux (définis via d'autres spécifications)

- -
    -
  • {{cssxref("<color>")}}
    • -
  • {{cssxref("<image>")}}
    • -
  • {{cssxref("<position>")}}
    • -
- -

Couleur

- -

Une valeur de type {{cssxref("<color>")}} permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification CSS Color.

- -

Image

- -

Une valeur de type {{cssxref("<image>")}} permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification CSS Image Values and Replaced Content Module.

- -

Position

- -

Le type {{cssxref("<position>")}} définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme {{cssxref("background-position")}} et est donc spécifié avec le module CSS Backgrounds and Borders.

- -

Notations fonctionnelles (fonctions)

- -
    -
  • {{cssxref("calc()")}}
    • -
  • {{cssxref("min", "min()")}}
    • -
  • {{cssxref("max", "max()")}}
    • -
  • {{cssxref("clamp", "clamp()")}}
    • -
  • {{cssxref("toggle", "toggle()")}}
    • -
  • {{cssxref("attr", "attr()")}}
    • -
- -

Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche ( suivie des arguments de la notation, suivis d'une parenthèse droite). Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.

- -

Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.

- -
-

Note : Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.

-
- -

Certaines notations fonctionnelles historiques telles que rgba() utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Ajout des unités vi, vb, ic, cap, lh et rlh.
- Ajout des notations fonctionnelles  min(), max() et clamp().
- Ajout de  toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Ajout de calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Ajout des syntaxes sans virgule pour les fonctions rgb(), rgba(), hsl() et hsla(). Ajout des valeurs alpha pour  rgb() et hsl(), transformant ainsi rgba() et hsla() en alias respectifs (dépréciés).
- Ajout du mot-clé de couleur rebeccapurple.
- Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la valeur alpha.
- Ajout des fonctions hwb(), device-cmyk() et color().
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions rgba(), hsl() et hsla().
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} -

Ajout des notations fonctionnelles element(), image(), image-set(), conic-gradient()

-
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Définition initiale du type image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/value_definition_syntax/index.html b/files/fr/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..2acb4d1da7 --- /dev/null +++ b/files/fr/web/css/value_definition_syntax/index.html @@ -0,0 +1,421 @@ +--- +title: Syntaxe de définition des valeurs +slug: Web/CSS/Syntaxe_de_définition_des_valeurs +tags: + - CSS + - Débutant + - Reference +translation_of: Web/CSS/Value_definition_syntax +--- +
{{CSSRef}}
+ +

La syntaxe de définition des valeurs CSS est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).

+ +

La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.

+ +

Les types de composants

+ +

Les mots-clés

+ +

Les mots-clés génériques

+ +

Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. auto, smaller ou ease-in).

+ +

inherit, initial et unset

+ +

Toutes propriétés CSS acceptent les mots-clés inherit, initial et unset définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.

+ +

Les littéraux

+ +

En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.

+ +

Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.

+ +

Les types de donnée

+ +

Les types de donnée simples

+ +

Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type angle est donc représenté par : {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, et ainsi de suite).

+ +

Les types de donnée non terminaux

+ +

D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.

+ +

Les types de donnée non terminaux sont de deux sortes :

+ +
    +
  • Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.
    • +
  • Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.
    • +
+ +

Les combinateurs

+ +

Les crochets

+ +

Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).

+ +
bold [ thin && <length> ]
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold thin 2vh
    • +
  • bold 0 thin
    • +
  • bold thin 3.5em
    • +
+ +

Mais ne correspondra pas à :

+ +
    +
  • thin bold 3em car bold est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.
    • +
+ +

Juxtaposition

+ +

Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont obligatoires et doivent apparaître dans cet ordre.

+ +
bold <length> , thin
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold 1em, thin
    • +
  • bold 0, thin
    • +
  • bold 2.5cm, thin
    • +
  • bold 3vh, thin
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • thin 1em, bold car les entités ne sont pas dans l'ordre indiqué
    • +
  • bold 1em thin car les entités sont obligatoires et la virgule qui est un littéral doit être présente
    • +
  • bold 0.5ms, thin car les valeurs ms ne sont pas des valeurs du type {{cssxref("<length>")}}
    • +
+ +

Double esperluette

+ +

Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

+ +
bold && <length>
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold 1em
    • +
  • bold 0
    • +
  • 2.5cm bold
    • +
  • 3vh bold
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car les deux composants doivent apparaître.
    • +
  • bold 1em bold car les deux composants doivent apparaître exactement une fois.
    • +
+ +
Note : La juxtaposition est prioritaire par rapport à la double esperluette. bold thin && <length> est donc équivalent à [ bold thin ] && <length>. Il décrit bold thin <length> ou <length> bold thin mais pas bold <length> thin.
+ +

Double barre

+ +

Lorsque deux ou plusieurs composants sont séparés par une double barre verticale ||. Cela signifie qu'au moins un composant doit être présent et qu'ils peuvent apparaître dans n'importe quel ordre. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • 1em solid blue
    • +
  • blue 1em
    • +
  • solid 1px yellow
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • blue yellow car le composant doit apparaître au plus une fois.
    • +
  • bold car le mot-clé n'est pas permis pour aucune valeur de l'entité.
    • +
+ +
Note : La double esperluette est prioritaire par rapport à la double barre. bold || thin && <length> est équivalent à bold || [ thin && <length> ] qui décrit bold, thin <length>, bold thin <length>, ou thin <length> bold mais pas <length> bold thin car bold, s'il est présent doit apparaître avant thin && <length>.
+ +

La barre verticale

+ +

Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : seule une des options doit être présente. Généralement, cela permet de séparer différents mots-clés possible.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • 3%
    • +
  • 0
    • +
  • 3.5em
    • +
  • left
    • +
  • center
    • +
  • right
    • +
  • top
    • +
  • bottom
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • center 3% car seul un seul des composants doit être présent.
    • +
  • 3em 4.5em car un composant doit être présent au plus une seule fois.
    • +
+ +
+

Note : La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi bold | thin || <length> est équivalent à bold | [ thin || <length> ] qui décrit bold, thin, <length>, <length> thin ou thin <length> mais pas bold <length> car seule entité peut être présente.

+
+ +

Les multiplicateurs

+ +

Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.

+ +

L'astérisque (*)

+ +

L'astérisque indique qu'une entité peut apparaître zéro, une ou plusieurs fois.

+ +
bold smaller*
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold
    • +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
+ +

Plus (+)

+ +

Le multiplicateur « plus » indique que l'entité peut apparaître une ou plusieurs fois.

+ +
bold smaller+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois
    • +
  • smaller car bold est juxtaposé et doit apparaitre avant smaller.
    • +
+ +

Le point d'interrogation (?)

+ +

Le point d'interrogation indique que l'entité est optionnelle et doit apparaître zéro ou une fois.

+ +
bold smaller?
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold
    • +
  • bold smaller
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold smaller smaller car smaller doit apparaître au plus une fois
    • +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller s'il est présent.
    • +
+ +

Les accolades ({ })

+ +

Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité doit apparaître au moins A fois et au plus B fois.

+ +
bold smaller{1,3}
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois.
    • +
  • bold smaller smaller smaller smaller car smaller doit apparaître au plus trois fois.
    • +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
+ +

Dièse (#)

+ +

Le symbole dièse indique qu'une entité doit être répétée une ou plusieurs fois et que chaque occurrence est séparée par une virgule.

+ +
bold smaller#
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller, smaller
    • +
  • bold smaller, smaller, smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois.
    • +
  • bold smaller smaller smaller car les différentes occurrences de smaller doivent être séparées par des virgules.
    • +
  • smaller car bold est juxtaposé et doit apparaître avant toute occurrence du mot-clé smaller.
    • +
+ +

Point d'exclamation (!)

+ +

Le multiplicateur point d'exclamation est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.

+ +
[ bold? smaller? ]!
+
+ +

Cet exemple correspondra aux valeurs suivantes :

+ +
    +
  • bold
    • +
  • smaller
    • +
  • bold smaller
    • +
+ +

Mais pas à :

+ +
    +
  • ni bold ni smaller, car il faut au moins l'un des deux.
    • +
  • smaller bold, car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
  • bold smaller bold, car bold et smaller doivent apparaître au plus une fois.
    • +
+ +

Récapitulatif

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SigneNomDescriptionExemple
Combinateurs
 JuxtapositionLes composants sont obligatoires et doivent apparaître dans cet ordre.solid <length>
&&Double esperluetteLes composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.<length> && <string>
||Double barreAu moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.<'border-image-outset'> || <'border-image-slice'>
|Barre simpleUn et un seul des composants doit être présent.smaller | small | normal | big | bigger
[ ]CrochetsLes composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.bold [ thin && <length> ]
Multiplicateurs
 Aucun multiplicateurExactement 1 fois.solid
*Astérisque0 ou plus.bold smaller*
+Signe plus1 ou plus.bold smaller+
?Point d'interrogation0 ou 1 fois (autrement dit, la valeur est optionnelle)bold smaller?
{A,B}AccoladesAu moins A fois et au plus B fois.bold smaller{1,3}
#Dièse1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.bold smaller#
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2('CSS3 Values')}}Ajout du multiplicateur avec le dièse.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2('CSS2.1')}}Ajout de la double esperluette.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/viewport_concepts/index.html b/files/fr/web/css/viewport_concepts/index.html new file mode 100644 index 0000000000..56143515c0 --- /dev/null +++ b/files/fr/web/css/viewport_concepts/index.html @@ -0,0 +1,156 @@ +--- +title: Concepts relatifs au viewport +slug: Web/CSS/Concepts_viewport +tags: + - CSS + - Guide + - viewport +translation_of: Web/CSS/Viewport_concepts +--- +

{{CSSRef}}

+ +

Dans cet article, nous définirons le concept de viewport ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.

+ +

Qu'est-ce qu'une zone d'affichage (viewport) ?

+ +

Une zone d'affichage (aussi appelée viewport en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.

+ +

Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.

+ +
    +
  • Pour les écrans les plus grands où les applications ne sont pas nécessairement en plein écran, la zone d'affichage mesure la taille de la fenêtre du navigateur
    • +
  • Sur la plupart des appareils mobiles ou lorsque le navigateur est en plein écran, la zone d'affichage correspond à l'ensemble de l'écran
    • +
+ +

En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.

+ +

Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.

+ +

Les dimensions de la zone d'affichage sont modifiables

+ +

La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci :

+ +
document.documentElement.clientWidth /* 1200 */
+window.innerWidth /* 1200 */
+window.outerWidth /* 1200 */
+
+ +
document.documentElement.clientHeight /* 800 */
+window.innerHeight /* 800 */
+window.outerHeight /* 900 */
+
+ +

Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :

+ +
    +
  • La propriété du document {{DOMxRef("Element.clientWidth")}} est la largeur interne du document, exprimée en pixels CSS, et inclut le remplissage (padding) mais pas les marges, les bordures et les barres de défilement. C'est la largeur de la zone d'affichage.
    • +
  • La propriété {{DOMxRef("Window.innerWidth")}} correspond à la largeur, exprimée en pixels CSS, de la zone d'affichage dans la fenêtre du navigateur qui contient les éventuelles barres de défilement verticales.
    • +
  • La propriété {{DOMxRef("Window.outerWidth")}} correspond à la largeur extérieure de la fenêtre du navigateur et qui contient l'ensemble du chrome (les éléments d'interface utilisateur du navigateur qui ne sont pas ceux de la page web consultée).
    • +
+ +

Dans l'exemple précédent, on peut voir que innerWidth et outerWidth ont la même valeur mais que outerHeight mesure 100 pixels de plus que innerHeight. En effet, outerHeight tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de chrome à gauche ou à droite de la fenêtre.

+ +

La zone contenu entre innerHeight et innerWidth correspond à la zone d'affichage pour la disposition (layout viewport). Le chrome du navigateur ne fait pas partie de la zone d'affichage.

+ +

Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour innerWidth et clientWidth. Les valeurs renvoyées pour outerWidth et outerHeight dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir :

+ +
document.documentElement.clientWidth /* 800 */
+window.innerWidth /* 800 */
+window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
+
+ +
document.documentElement.clientHeight /* 533 */
+window.innerHeight /* 533 */
+window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
+
+ +

La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de la zone d'affichage pour la disposition.

+ +
body > header {
+  position: fixed;
+  top: 0;
+}
+body > footer {
+  position: fixed;
+  bottom: 0;
+}
+
+ +

On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?

+ +

Dans le contexte du Web, on parle de deux zones d'affichage : la zone d'affichage pour la disposition (layout viewport) et la zone d'affichage visuelle (visual viewport). La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.

+ +

Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.

+ +

La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.

+ +

Pour une page contenant des iframes, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.

+ +

CSS

+ +

La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.

+ +

On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un vh correspond à 1% de la hauteur de la zone d'affichage pour la disposition et vw mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.

+ +

<iframe>

+ +

À l'intérieur d'une iframe, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'iframe et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une iframe mais le document pourra ne pas être visible dans son intégralité.

+ +

Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'iframe, 1vh correspondra à 1% de la hauteur de l'iframe et 1vw correspondra à 1% de la largeur du document imbriqué.

+ +
iframe {
+  width: 50vw;
+}
+
+ +

Si l'iframe est dimensionnée à 50vw, elle mesurera 50% de large des 1200px du document parent (soit 600px). À l'intérieur de cette iframe, 1vw correspondra donc à 6px. Lorsqu'on zoomera, l'iframe se réduira à 400px de large et 1vw correspondra alors à 4px.

+ +

Lorsqu'on utilise une requête média à l'intérieur du document de l'iframe, les dimensions utilisées sont relatives à la zone d'affichage de l'iframe.

+ +
@media screen and (min-width: 500px) {
+  p {
+    color: red;
+  }
+}
+
+ +

Si le fragment de code CSS était inclus dans l'iframe, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.

+ +

SVG

+ +

Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs width et height de l'élément {{SVGElement("svg")}}.

+ +
<svg height="300" width="400"></svg>
+ +

Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).

+ +

SVG possède un système de coordonnées interne qui est défini grâce à l'attribut viewbox mais qui n'est pas directement lié à la problématique des zones d'affichage.

+ +

Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.

+ +
@media screen and (min-width: 400px) and (max-width: 500px) {
+  /* styles CSS ici */
+}
+ +

Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.

+ +

JavaScript

+ +

L'API Visual Viewport fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.

+ +

Zones d'affichage sur mobiles

+ +

Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <meta> suivante :

+ +
<meta name="viewport" content="width=device-width">
+ +

La propriété width contrôle la taille de la zone d'affichage et on l'utilisera généralement avec device-width qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme maximum-scale, minimum-scale et user-scalable afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/visual_formatting_model/index.html b/files/fr/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..d9ac8b3f09 --- /dev/null +++ b/files/fr/web/css/visual_formatting_model/index.html @@ -0,0 +1,179 @@ +--- +title: Modèle de mise en forme visuelle +slug: Web/CSS/Modèle_de_mise_en_forme_visuelle +tags: + - CSS + - Intermédiaire + - NeedsUpdate +translation_of: Web/CSS/Visual_formatting_model +--- +
{{CSSRef}}
+ +

En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans le modèle de boîtes CSS. La disposition de chaque boîte est dictée par :

+ +
    +
  • Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non
    • +
  • Le type de la boîte : en ligne, en ligne et de niveau (inline-level), atomique, en bloc
    • +
  • Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue
    • +
  • Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins
    • +
  • La taille et la position de la zone d'affichage (viewport)
    • +
  • Les dimensions intrinsèques des images qu'elle contient
    • +
  • Éventuellement d'autres informations externes.
    • +
+ +

Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais overflow).

+ +

Génération de la boîte

+ +

Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.

+ +

Les éléments de bloc et les boîtes de bloc

+ +

Un élément est dit « de bloc » lorsque la valeur calculée de la propriété {{cssxref("display")}} qui lui est appliquée vaut : block, list-item ou table. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.

+ +

Chaque boîte de bloc contribue au contexte de mise en forme des blocs. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.

+ +

La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.

+ +

venn_blocks.png

+ +

Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.

+ +

Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.

+ +

Les boîtes de bloc anonymes

+ +

Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc anonymes.

+ +

Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur initial.

+ +

Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.

+ +

Si on prend le code HTML suivant, mis en forme avec les règles par défaut (display:block) :

+ +
<div>
+   Some inline text
+   <p>followed by a paragraph</p>
+   followed by more inline text.
+</div>
+
+ +

On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :
+   anonymous_block-level_boxes.png

+ +

À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur initial.

+ +

Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.

+ +

S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.

+ +

Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura display:inline et {{HTMLElement("span")}} aura display:block :

+ +
<p>
+  Some <em>inline</em> text
+  <span>followed by a paragraph</span>
+  followed by more inline text.
+</p>
+ +

Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <span> et une pour le texte qui suit cet élément. On a alors la structure suivante :

+ +

+ +

Les éléments en ligne et les boîtes en ligne

+ +

Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : inline, inline-block ou inline-table. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).

+ +

Les éléments en ligne génèrent des boîtes en lignes qui contribuent au contexte de mise en forme en ligne.

+ +

Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.

+ +
<style>
+  span {
+    /* La valeur par défaut */
+    display:inline;
+  }
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>peut être divisé
+   en plusieurs lignes</span> dans une boîte en
+   ligne.
+</div>
+
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>ne peut pas être
+   divisé en plusieurs lignes car</span> il est
+   dans une boîte de type inline-block.
+</div>
+
+ +

Les boîtes en ligne anonymes

+ +

Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété relative à l'élément parent, pour les autres, elles vaudront initial.

+ +

La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.

+ +

Les autres types de boîte

+ +

Les boîtes de ligne

+ +

Les boîtes de ligne sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.

+ +

Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.

+ +

Les types de boîtes liés au modèle CSS

+ +

En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :

+ +
    +
  • Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende
    • +
  • Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu.
    • +
  • Les modèles de contenu expérimentaux en grille (CSS Grid) ou avec les boîtes flexibles (flexbox) définissent d'autres types de boîtes.
    • +
+ +

Modes de positionnement

+ +

Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :

+ +
    +
  • Le mode de positionnement normal positionne les boîtes les unes après les autres
    • +
  • Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante
    • +
  • Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.
    • +
+ +

Le mode normal

+ +

Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut static ou relative et si la propriété CSS {{cssxref("float")}} vaut none.

+ +

On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.

+ +
    +
  • En positionnement statique (obtenu avec la valeur static pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.
    • +
  • En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut relative), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.
    • +
+ +

Le mode flottant

+ +

Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).

+ +

Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de none et la propriété {{cssxref("position")}} avec static ou relative. Si {{cssxref("float")}} vaut left, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut right, elle sera à la fin de la ligne.

+ +

Le mode absolu

+ +

En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.

+ +

Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut absolute ou fixed.

+ +

Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (viewport) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" "b/files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" deleted file mode 100644 index eaa2f4d82a..0000000000 --- "a/files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Élément remplacé -slug: Web/CSS/Élément_remplacé -tags: - - CSS - - Reference -translation_of: Web/CSS/Replaced_element ---- -
{{CSSRef}}
- -

En CSS, un élément remplacé est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.

- -

Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du documents. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.

- -

Éléments remplacés

- -

Les éléments remplacés caractéristiques sont :

- -
    -
  • {{HTMLElement("img")}},
    • -
  • {{HTMLElement("object")}},
    • -
  • {{HTMLElement("video")}},
    • -
  • {{HTMLElement("iframe")}}
    • -
  • les éléments {{HTMLElement("input")}} de type image
    • -
- -

Par ailleurs, certains éléments comme :

- -
    -
  • {{HTMLElement("option")}}
    • -
  • {{HTMLElement("audio")}}
    • -
  • {{HTMLElement("canvas")}}
    • -
  • {{HTMLElement("object")}}
    • -
  • {{HTMLElement("applet")}}
    • -
- -

sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type "image" notamment).

- -

Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des éléments remplacés anonymes (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).

- -

Utiliser CSS avec les éléments remplacés

- -

Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs auto.

- -

On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.

- -

Contrôler la position des objets au sein de la boîte de contenu

- -

Certaines propriétés CSS permet d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :

- -
-
{{cssxref("object-fit")}}
-
Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.
-
{{cssxref("object-position")}}
-
Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.
-
- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf