diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip |
unslug fr: move
Diffstat (limited to 'files/fr/web')
-rw-r--r-- | files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html | 176 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_guides/index.html | 27 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_live_regions/index.html | 122 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html | 30 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/index.html | 118 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html | 134 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html | 85 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html | 89 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html | 125 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html | 74 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html | 160 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html | 75 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html | 30 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html | 82 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html | 74 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html | 70 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html | 78 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html | 66 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html | 66 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html | 128 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html | 75 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html | 97 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html | 66 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html | 69 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html | 41 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html | 120 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html | 50 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html | 30 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/forms/alerts/index.html | 157 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/forms/basic_form_hints/index.html | 119 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/forms/index.html | 19 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/forms/multipart_labels/index.html | 41 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html | 96 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/index.html | 123 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/roles/banner_role/index.html | 39 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/roles/button_role/index.html | 123 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/roles/checkbox_role/index.html | 52 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/roles/dialog_role/index.html | 148 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/roles/listbox_role/index.html | 97 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/roles/switch_role/index.html | 13 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/roles/textbox_role/index.html | 82 | ||||
-rw-r--r-- | files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html | 305 | ||||
-rw-r--r-- | files/fr/web/accessibility/community/index.html | 17 | ||||
-rw-r--r-- | files/fr/web/accessibility/index.html | 78 | ||||
-rw-r--r-- | files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html | 90 | ||||
-rw-r--r-- | files/fr/web/accessibility/mobile_accessibility_checklist/index.html | 89 | ||||
-rw-r--r-- | files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html (renamed from files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/ambient_light_events/index.html | 98 | ||||
-rw-r--r-- | files/fr/web/api/baseaudiocontext/creategain/index.html (renamed from files/fr/web/api/audiocontext/creategain/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/a_basic_ray-caster/index.html | 52 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html | 158 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/basic_animations/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/basic_usage/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/compositing/example/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/compositing/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/drawing_text/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/transformations/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/using_images/index.html (renamed from files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/crypto/getrandomvalues/index.html (renamed from files/fr/web/api/randomsource/getrandomvalues/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/detecting_device_orientation/index.html | 289 | ||||
-rw-r--r-- | files/fr/web/api/devicemotioneventrotationrate/alpha/index.html (renamed from files/fr/web/api/devicerotationrate/alpha/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/devicemotioneventrotationrate/beta/index.html (renamed from files/fr/web/api/devicerotationrate/beta/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/devicemotioneventrotationrate/gamma/index.html (renamed from files/fr/web/api/devicerotationrate/gamma/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/devicemotioneventrotationrate/index.html (renamed from files/fr/web/api/devicerotationrate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/deviceorientationevent/absolute/index.html (renamed from files/fr/web/api/deviceorientationevent.absolute/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/document/anchors/index.html (renamed from files/fr/web/api/document/document.anchors/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/document/readystatechange_event/index.html (renamed from files/fr/web/events/readystatechange/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/document_object_model/events/index.html (renamed from files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/document_object_model/examples/index.html (renamed from files/fr/web/api/document_object_model/exemples/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html | 146 | ||||
-rw-r--r-- | files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html (renamed from files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/document_object_model/préface/index.html | 54 | ||||
-rw-r--r-- | files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html | 351 | ||||
-rw-r--r-- | files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html (renamed from files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html (renamed from files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/documentorshadowroot/activeelement/index.html (renamed from files/fr/web/api/document/activeelement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/documentorshadowroot/elementfrompoint/index.html (renamed from files/fr/web/api/document/elementfrompoint/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/documentorshadowroot/getselection/index.html (renamed from files/fr/web/api/document/getselection/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/documentorshadowroot/stylesheets/index.html (renamed from files/fr/web/api/document/stylesheets/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/dommatrix/index.html (renamed from files/fr/web/api/cssmatrix/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/effecttiming/delay/index.html (renamed from files/fr/web/api/animationeffecttimingproperties/delay/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/effecttiming/index.html (renamed from files/fr/web/api/animationeffecttimingproperties/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/compositionend_event/index.html (renamed from files/fr/web/events/compositionend/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/compositionstart_event/index.html (renamed from files/fr/web/events/compositionstart/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/compositionupdate_event/index.html (renamed from files/fr/web/events/compositionupdate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/copy_event/index.html (renamed from files/fr/web/events/copy/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/error_event/index.html (renamed from files/fr/web/events/error/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/focusin_event/index.html (renamed from files/fr/web/events/focusin/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/focusout_event/index.html (renamed from files/fr/web/events/focusout/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/innerhtml/index.html (renamed from files/fr/web/api/element/innerthtml/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/element/name/index.html | 77 | ||||
-rw-r--r-- | files/fr/web/api/elementcssinlinestyle/style/index.html (renamed from files/fr/web/api/htmlelement/style/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/entity/index.html | 114 | ||||
-rw-r--r-- | files/fr/web/api/entityreference/index.html | 93 | ||||
-rw-r--r-- | files/fr/web/api/event/comparison_of_event_targets/index.html (renamed from files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/event/createevent/index.html | 41 | ||||
-rw-r--r-- | files/fr/web/api/file_and_directory_entries_api/index.html (renamed from files/fr/web/api/api_fichier_systeme/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/formdata/using_formdata_objects/index.html (renamed from files/fr/web/api/formdata/utilisation_objets_formdata/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/fullscreen_api/index.html (renamed from files/fr/web/guide/dom/using_full_screen_mode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html (renamed from files/fr/web/guide/api/gamepad/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/globaleventhandlers/onwheel/index.html (renamed from files/fr/web/api/element/onwheel/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/history_api/example/index.html (renamed from files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/history_api/index.html (renamed from files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html (renamed from files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/html_drag_and_drop_api/index.html (renamed from files/fr/web/api/api_html_drag_and_drop/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlelement/accesskey/index.html (renamed from files/fr/web/api/element/accesskey/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlelement/animationend_event/index.html (renamed from files/fr/web/events/animationend/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlelement/animationiteration_event/index.html (renamed from files/fr/web/events/animationiteration/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlelement/animationstart_event/index.html (renamed from files/fr/web/events/animationstart/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlelement/innertext/index.html (renamed from files/fr/web/api/node/innertext/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlelement/transitionend_event/index.html (renamed from files/fr/web/events/transitionend/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlformelement/submit_event/index.html (renamed from files/fr/web/api/htmlformelement/submit_event_/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlhyperlinkelementutils/index.html (renamed from files/fr/web/api/urlutils/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlorforeignelement/blur/index.html (renamed from files/fr/web/api/element.blur/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlorforeignelement/dataset/index.html (renamed from files/fr/web/api/htmlelement/dataset/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlorforeignelement/focus/index.html (renamed from files/fr/web/api/htmlelement/focus/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/htmlorforeignelement/tabindex/index.html (renamed from files/fr/web/api/htmlelement/tabindex/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/idbopendbrequest/blocked_event/index.html (renamed from files/fr/web/api/idbrequest/blocked_event/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html (renamed from files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html (renamed from files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/indexeddb_api/index.html (renamed from files/fr/web/api/api_indexeddb/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/indexeddb_api/using_indexeddb/index.html (renamed from files/fr/web/api/api_indexeddb/using_indexeddb/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/media_streams_api/index.html | 85 | ||||
-rw-r--r-- | files/fr/web/api/namelist/index.html | 52 | ||||
-rw-r--r-- | files/fr/web/api/navigator/getusermedia/index.html | 194 | ||||
-rw-r--r-- | files/fr/web/api/navigatoronline/online_and_offline_events/index.html (renamed from files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/network_information_api/index.html | 89 | ||||
-rw-r--r-- | files/fr/web/api/node/baseuriobject/index.html | 39 | ||||
-rw-r--r-- | files/fr/web/api/node/nodeprincipal/index.html | 40 | ||||
-rw-r--r-- | files/fr/web/api/node/rootnode/index.html | 71 | ||||
-rw-r--r-- | files/fr/web/api/notifications_api/using_the_notifications_api/index.html (renamed from files/fr/web/api/notification/using_web_notifications/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/offlineaudiocontext/complete_event/index.html (renamed from files/fr/web/events/complete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html (renamed from files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/pointer_lock_api/index.html | 319 | ||||
-rw-r--r-- | files/fr/web/api/proximity_events/index.html | 120 | ||||
-rw-r--r-- | files/fr/web/api/scriptprocessornode/audioprocess_event/index.html (renamed from files/fr/web/events/audioprocess/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/selection_api/index.html | 221 | ||||
-rw-r--r-- | files/fr/web/api/storage/localstorage/index.html | 135 | ||||
-rw-r--r-- | files/fr/web/api/touch_events/index.html (renamed from files/fr/web/guide/dom/events/touch_events/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html (renamed from files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html | 423 | ||||
-rw-r--r-- | files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html (renamed from files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html (renamed from files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/web_workers_api/using_web_workers/index.html (renamed from files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html (renamed from files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html (renamed from files/fr/web/api/webgl_api/by_example/modèle_1/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html (renamed from files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html (renamed from files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html (renamed from files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/color_masking/index.html (renamed from files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/detect_webgl/index.html (renamed from files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html (renamed from files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html (renamed from files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/scissor_animation/index.html (renamed from files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html (renamed from files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/textures_from_code/index.html (renamed from files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/by_example/video_textures/index.html (renamed from files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/data/index.html (renamed from files/fr/web/api/webgl_api/données/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html (renamed from files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html (renamed from files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html (renamed from files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html (renamed from files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html (renamed from files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html (renamed from files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html (renamed from files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html (renamed from files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webglrenderingcontext/canvas/index.html (renamed from files/fr/web/api/webglrenderingcontext/canevas/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webglrenderingcontext/enable/index.html (renamed from files/fr/web/api/webglrenderingcontext/activer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webrtc_api/connectivity/index.html (renamed from files/fr/web/guide/api/webrtc/webrtc_architecture/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webrtc_api/session_lifetime/index.html | 21 | ||||
-rw-r--r-- | files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html (renamed from files/fr/web/guide/api/webrtc/webrtc_basics/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/webrtc_api/taking_still_photos/index.html | 161 | ||||
-rw-r--r-- | files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html (renamed from files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/afterprint_event/index.html (renamed from files/fr/web/events/afterprint/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/beforeprint_event/index.html (renamed from files/fr/web/events/beforeprint/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/beforeunload_event/index.html (renamed from files/fr/web/events/beforeunload/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/devicemotion_event/index.html | 97 | ||||
-rw-r--r-- | files/fr/web/api/window/deviceorientation_event/index.html | 176 | ||||
-rw-r--r-- | files/fr/web/api/window/domcontentloaded_event/index.html (renamed from files/fr/web/events/domcontentloaded/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/load_event/index.html (renamed from files/fr/web/events/load/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/onresize/index.html | 78 | ||||
-rw-r--r-- | files/fr/web/api/window/pagehide_event/index.html (renamed from files/fr/web/events/pagehide/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/pageshow_event/index.html (renamed from files/fr/web/events/pageshow/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/unload_event/index.html (renamed from files/fr/web/events/unload/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/window/url/index.html | 95 | ||||
-rw-r--r-- | files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html | 343 | ||||
-rw-r--r-- | files/fr/web/api/windoworworkerglobalscope/atob/index.html (renamed from files/fr/web/api/windowbase64/atob/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/windoworworkerglobalscope/btoa/index.html (renamed from files/fr/web/api/windowbase64/btoa/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html (renamed from files/fr/web/api/windowtimers/clearinterval/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/xmlhttprequest/abort_event/index.html (renamed from files/fr/web/events/abort_(progressevent)/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html (renamed from files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/api/xmlserializer/index.html | 54 | ||||
-rw-r--r-- | files/fr/web/api/xsltprocessor/basic_example/index.html | 65 | ||||
-rw-r--r-- | files/fr/web/api/xsltprocessor/browser_differences/index.html | 22 | ||||
-rw-r--r-- | files/fr/web/api/xsltprocessor/generating_html/index.html | 190 | ||||
-rw-r--r-- | files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html | 60 | ||||
-rw-r--r-- | files/fr/web/css/-moz-box-ordinal-group/index.html | 74 | ||||
-rw-r--r-- | files/fr/web/css/-moz-cell/index.html | 16 | ||||
-rw-r--r-- | files/fr/web/css/-ms-scroll-snap-type/index.html | 51 | ||||
-rw-r--r-- | files/fr/web/css/-ms-user-select/index.html | 108 | ||||
-rw-r--r-- | files/fr/web/css/-webkit-mask-image/index.html | 175 | ||||
-rw-r--r-- | files/fr/web/css/@media/-ms-high-contrast/index.html (renamed from files/fr/web/css/-ms-high-contrast/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/@media/index/index.html | 12 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/height/index.html | 77 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/max-height/index.html | 77 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/max-width/index.html | 76 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/max-zoom/index.html | 70 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/min-height/index.html | 77 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/min-width/index.html | 76 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/min-zoom/index.html | 70 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/orientation/index.html | 65 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/user-zoom/index.html | 69 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/viewport-fit/index.html | 75 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/width/index.html | 76 | ||||
-rw-r--r-- | files/fr/web/css/@viewport/zoom/index.html | 72 | ||||
-rw-r--r-- | files/fr/web/css/_colon_-moz-list-bullet/index.html (renamed from files/fr/web/css/_doublecolon_-moz-list-bullet/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/_colon_-moz-list-number/index.html (renamed from files/fr/web/css/_doublecolon_-moz-list-number/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/_colon_-ms-input-placeholder/index.html | 117 | ||||
-rw-r--r-- | files/fr/web/css/_colon_any/index.html | 175 | ||||
-rw-r--r-- | files/fr/web/css/_colon_autofill/index.html (renamed from files/fr/web/css/_colon_-webkit-autofill/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/_colon_user-invalid/index.html (renamed from files/fr/web/css/_colon_-moz-ui-invalid/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html | 97 | ||||
-rw-r--r-- | files/fr/web/css/_doublecolon_file-selector-button/index.html (renamed from files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/actual_value/index.html (renamed from files/fr/web/css/valeur_reelle/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/adjacent_sibling_combinator/index.html (renamed from files/fr/web/css/combinateur_de_voisin_direct/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/alternative_style_sheets/index.html (renamed from files/fr/web/css/feuilles_de_style_alternatives/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/arrière-plans_et_bordures_css/index.html | 162 | ||||
-rw-r--r-- | files/fr/web/css/at-rule/index.html (renamed from files/fr/web/css/règles_@/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/attribute_selectors/index.html (renamed from files/fr/web/css/sélecteurs_d_attribut/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/auto/index.html | 29 | ||||
-rw-r--r-- | files/fr/web/css/child_combinator/index.html (renamed from files/fr/web/css/sélecteurs_enfant/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/class_selectors/index.html (renamed from files/fr/web/css/sélecteurs_de_classe/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/color_value/index.html (renamed from files/fr/web/css/type_color/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/column_combinator/index.html (renamed from files/fr/web/css/combinateur_colonne/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/computed_value/index.html (renamed from files/fr/web/css/valeur_calculée/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/containing_block/index.html (renamed from files/fr/web/css/a_propos_du_bloc_conteneur/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/couleurs_css/index.html | 133 | ||||
-rw-r--r-- | files/fr/web/css/css_animated_properties/index.html (renamed from files/fr/web/css/liste_propriétés_css_animées/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_animations/detecting_css_animation_support/index.html (renamed from files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_animations/index.html (renamed from files/fr/web/css/animations_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_animations/tips/index.html (renamed from files/fr/web/css/animations_css/conseils/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_animations/using_css_animations/index.html (renamed from files/fr/web/css/animations_css/utiliser_les_animations_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_background_and_borders/border-image_generator/index.html (renamed from files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_background_and_borders/border-radius_generator/index.html (renamed from files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html (renamed from files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html (renamed from files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html (renamed from files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html (renamed from files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html (renamed from files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html (renamed from files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html (renamed from files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html (renamed from files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_box_model/index.html (renamed from files/fr/web/css/modèle_de_boîte_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html (renamed from files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_charsets/index.html (renamed from files/fr/web/css/jeux_de_caractères_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_colors/color_picker_tool/index.html (renamed from files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html (renamed from files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html (renamed from files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html (renamed from files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/spanning_columns/index.html (renamed from files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/styling_columns/index.html (renamed from files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_columns/using_multi-column_layouts/index.html (renamed from files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_conditional_rules/using_feature_queries/index.html (renamed from files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_containment/index.html (renamed from files/fr/web/css/compartimentation_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html (renamed from files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html (renamed from files/fr/web/css/css_flexible_box_layout/mixins/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html (renamed from files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html | 188 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html (renamed from files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html (renamed from files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html (renamed from files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html (renamed from files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html | 121 | ||||
-rw-r--r-- | files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html (renamed from files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html (renamed from files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html (renamed from files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html (renamed from files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html (renamed from files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html (renamed from files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_fonts/opentype_fonts_guide/index.html (renamed from files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_fonts/variable_fonts_guide/index.html (renamed from files/fr/web/css/css_fonts/guide_polices_variables/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html (renamed from files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html (renamed from files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html (renamed from files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/grid_template_areas/index.html (renamed from files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html (renamed from files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html (renamed from files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html (renamed from files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html (renamed from files/fr/web/css/css_images/sprites_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_images/using_css_gradients/index.html (renamed from files/fr/web/css/utilisation_de_dégradés_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html (renamed from files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_lists_and_counters/index.html (renamed from files/fr/web/css/css_lists/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_lists_and_counters/using_css_counters/index.html (renamed from files/fr/web/css/css_lists/compteurs_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_logical_properties/basic_concepts/index.html (renamed from files/fr/web/css/css_logical_properties/concepts_de_base/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_logical_properties/floating_and_positioning/index.html (renamed from files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_logical_properties/margins_borders_padding/index.html (renamed from files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_logical_properties/sizing/index.html (renamed from files/fr/web/css/css_logical_properties/dimensionnement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_masking/index.html (renamed from files/fr/web/css/css_masks/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_motion_path/index.html (renamed from files/fr/web/css/motion_path/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html (renamed from files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/index.html (renamed from files/fr/web/css/comprendre_z-index/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html (renamed from files/fr/web/css/comprendre_z-index/empilement_et_float/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html (renamed from files/fr/web/css/comprendre_z-index/exemple_1/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html (renamed from files/fr/web/css/comprendre_z-index/exemple_2/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html (renamed from files/fr/web/css/comprendre_z-index/exemple_3/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html (renamed from files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html (renamed from files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_questions_frequentes/index.html | 246 | ||||
-rw-r--r-- | files/fr/web/css/css_scroll_snap/basic_concepts/index.html (renamed from files/fr/web/css/css_scroll_snap/concepts_de_base/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_scroll_snap/browser_compat/index.html (renamed from files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_selectors/index.html (renamed from files/fr/web/css/sélecteurs_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html (renamed from files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_shapes/basic_shapes/index.html (renamed from files/fr/web/css/css_shapes/formes_simples/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_shapes/from_box_values/index.html (renamed from files/fr/web/css/css_shapes/créer_formes_boîtes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_shapes/overview_of_css_shapes/index.html (renamed from files/fr/web/css/css_shapes/aperçu_formes_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_shapes/shapes_from_images/index.html (renamed from files/fr/web/css/css_shapes/générer_formes_images/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_transforms/using_css_transforms/index.html (renamed from files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_transitions/using_css_transitions/index.html (renamed from files/fr/web/css/css_transitions/utiliser_transitions_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_types/index.html (renamed from files/fr/web/css/types_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/css_values_and_units/index.html (renamed from files/fr/web/css/valeurs_et_unités_css/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/cssom_view/coordinate_systems/index.html (renamed from files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/descendant_combinator/index.html (renamed from files/fr/web/css/sélecteurs_descendant/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/easing-function/index.html (renamed from files/fr/web/css/timing-function/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/filter-function/url/index.html | 34 | ||||
-rw-r--r-- | files/fr/web/css/filters_effects/index.html | 115 | ||||
-rw-r--r-- | files/fr/web/css/general_sibling_combinator/index.html (renamed from files/fr/web/css/sélecteurs_de_voisins_généraux/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/grid-column-gap/index.html | 128 | ||||
-rw-r--r-- | files/fr/web/css/id_selectors/index.html (renamed from files/fr/web/css/sélecteurs_d_id/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/implémentation_des_brouillons_css/index.html | 47 | ||||
-rw-r--r-- | files/fr/web/css/index/index.html | 10 | ||||
-rw-r--r-- | files/fr/web/css/inheritance/index.html (renamed from files/fr/web/css/héritage/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/initial_value/index.html (renamed from files/fr/web/css/valeur_initiale/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/inline_formatting_context/index.html (renamed from files/fr/web/css/contexte_de_formatage_en_ligne/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/inset-block-end/index.html | 126 | ||||
-rw-r--r-- | files/fr/web/css/inset-block-start/index.html | 124 | ||||
-rw-r--r-- | files/fr/web/css/inset-inline-end/index.html | 126 | ||||
-rw-r--r-- | files/fr/web/css/inset-inline-start/index.html | 120 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html (renamed from files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/card/index.html (renamed from files/fr/web/css/layout_cookbook/carte/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/center_an_element/index.html (renamed from files/fr/web/css/layout_cookbook/centrer_un_element/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/column_layouts/index.html (renamed from files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html (renamed from files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html (renamed from files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/list_group_with_badges/index.html (renamed from files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/split_navigation/index.html (renamed from files/fr/web/css/layout_cookbook/navigation_segmentée/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_cookbook/sticky_footers/index.html (renamed from files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/layout_mode/index.html (renamed from files/fr/web/css/mode_de_mise_en_page/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/list_of_proprietary_css_features/index.html (renamed from files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/media_queries/index.html (renamed from files/fr/web/css/requêtes_média/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/media_queries/testing_media_queries/index.html (renamed from files/fr/web/css/requêtes_média/tester_les_media_queries/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/media_queries/using_media_queries/index.html (renamed from files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html (renamed from files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/microsoft_extensions/index.html (renamed from files/fr/web/css/extensions_css_microsoft/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/mozilla_extensions/index.html (renamed from files/fr/web/css/extensions_mozilla/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/none/index.html | 43 | ||||
-rw-r--r-- | files/fr/web/css/normal/index.html | 36 | ||||
-rw-r--r-- | files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html (renamed from files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/paged_media/index.html (renamed from files/fr/web/css/média_paginés/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/position_value/index.html (renamed from files/fr/web/css/type_position/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/privacy_and_the__colon_visited_selector/index.html (renamed from files/fr/web/css/_colon_visited_et_la_vie_privée/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/pseudo-elements/index.html (renamed from files/fr/web/css/pseudo-éléments/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/replaced_element/index.html (renamed from files/fr/web/css/élément_remplacé/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/resolved_value/index.html (renamed from files/fr/web/css/valeur_résolue/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/scaling_of_svg_backgrounds/index.html (renamed from files/fr/web/css/redimensionnement_arrière-plans_svg/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/shape-box/index.html | 169 | ||||
-rw-r--r-- | files/fr/web/css/shorthand_properties/index.html (renamed from files/fr/web/css/propriétés_raccourcies/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/specified_value/index.html (renamed from files/fr/web/css/valeur_spécifiée/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/tools/cubic_bezier_generator/index.html (renamed from files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/tools/index.html (renamed from files/fr/web/css/outils/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/tools/linear-gradient_generator/index.html (renamed from files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/type_selectors/index.html (renamed from files/fr/web/css/sélecteurs_de_type/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/universal_selectors/index.html (renamed from files/fr/web/css/sélecteurs_universels/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/url/index.html | 109 | ||||
-rw-r--r-- | files/fr/web/css/used_value/index.html (renamed from files/fr/web/css/valeur_utilisée/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/value_definition_syntax/index.html (renamed from files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/viewport_concepts/index.html (renamed from files/fr/web/css/concepts_viewport/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/css/visual_formatting_model/index.html (renamed from files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/demos_of_open_web_technologies/index.html (renamed from files/fr/web/démos_de_technologies_open_web/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/events/abort/index.html | 70 | ||||
-rw-r--r-- | files/fr/web/events/ended_(web_audio)/index.html | 83 | ||||
-rw-r--r-- | files/fr/web/guide/ajax/community/index.html (renamed from files/fr/web/guide/ajax/communauté/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/ajax/getting_started/index.html (renamed from files/fr/web/guide/ajax/premiers_pas/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/api/webrtc/index.html | 52 | ||||
-rw-r--r-- | files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html | 97 | ||||
-rw-r--r-- | files/fr/web/guide/css/block_formatting_context/index.html (renamed from files/fr/web/css/block_formatting_context/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/dom/index.html | 30 | ||||
-rw-r--r-- | files/fr/web/guide/events/creating_and_triggering_events/index.html (renamed from files/fr/web/guide/dom/events/creating_and_triggering_events/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/events/index.html (renamed from files/fr/web/guide/dom/events/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/events/media_events/index.html (renamed from files/fr/web/guide/dom/events/evenement_medias/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/events/orientation_and_motion_data_explained/index.html (renamed from files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/graphics/dessiner_avec_canvas/index.html | 176 | ||||
-rw-r--r-- | files/fr/web/guide/html/astuces_de_création_de_pages_html_à_affichage_rapide/index.html | 118 | ||||
-rw-r--r-- | files/fr/web/guide/html/content_categories/index.html (renamed from files/fr/web/guide/html/catégories_de_contenu/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/html/editable_content/index.html (renamed from files/fr/web/html/contenu_editable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html | 469 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html | 391 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_3/index.html | 247 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_4/index.html | 297 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_5/index.html | 290 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_1/index.html | 420 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_2/index.html | 215 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/index.html | 837 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html | 166 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html | 310 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_données_des_formulaires/index.html | 371 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html | 220 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/index.html | 81 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html | 683 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html | 104 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html | 281 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html | 1991 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html | 440 | ||||
-rw-r--r-- | files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html | 874 | ||||
-rw-r--r-- | files/fr/web/guide/html/html5/introduction_to_html5/index.html (renamed from files/fr/web/html/introduction_to_html5/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/html/html5/liste_des_éléments_html5/index.html | 580 | ||||
-rw-r--r-- | files/fr/web/guide/html/liens_email/index.html | 64 | ||||
-rw-r--r-- | files/fr/web/guide/html/using_html_sections_and_outlines/index.html (renamed from files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/guide/introduction_to_web_development/index.html | 29 | ||||
-rw-r--r-- | files/fr/web/guide/using_formdata_objects/index.html | 141 | ||||
-rw-r--r-- | files/fr/web/guide/writing_forward-compatible_websites/index.html | 137 | ||||
-rw-r--r-- | files/fr/web/html/applying_color/index.html (renamed from files/fr/web/html/appliquer_des_couleurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributes/autocomplete/index.html (renamed from files/fr/web/html/attributs/autocomplete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributes/crossorigin/index.html (renamed from files/fr/web/html/reglages_des_attributs_cors/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributes/index.html (renamed from files/fr/web/html/attributs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributes/pattern/index.html (renamed from files/fr/web/html/attributs/pattern/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributs_universels/dropzone/index.html | 48 | ||||
-rw-r--r-- | files/fr/web/html/block-level_elements/index.html (renamed from files/fr/web/html/éléments_en_bloc/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/cors_enabled_image/index.html (renamed from files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/date_and_time_formats/index.html (renamed from files/fr/web/html/formats_date_heure_html/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/element/command/index.html | 117 | ||||
-rw-r--r-- | files/fr/web/html/element/element/index.html | 73 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/accesskey/index.html (renamed from files/fr/web/html/attributs_universels/accesskey/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/autocapitalize/index.html (renamed from files/fr/web/html/attributs_universels/autocapitalize/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/class/index.html (renamed from files/fr/web/html/attributs_universels/class/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/contenteditable/index.html (renamed from files/fr/web/html/attributs_universels/contenteditable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/contextmenu/index.html (renamed from files/fr/web/html/attributs_universels/contextmenu/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/data-_star_/index.html (renamed from files/fr/web/html/attributs_universels/data-_star_/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/dir/index.html (renamed from files/fr/web/html/attributs_universels/dir/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/draggable/index.html (renamed from files/fr/web/html/attributs_universels/draggable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/hidden/index.html (renamed from files/fr/web/html/attributs_universels/hidden/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/id/index.html (renamed from files/fr/web/html/attributs_universels/id/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/index.html (renamed from files/fr/web/html/attributs_universels/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/inputmode/index.html (renamed from files/fr/web/html/attributs_universels/inputmode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/is/index.html (renamed from files/fr/web/html/attributs_universels/is/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemid/index.html (renamed from files/fr/web/html/attributs_universels/itemid/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemprop/index.html (renamed from files/fr/web/html/attributs_universels/itemprop/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemref/index.html (renamed from files/fr/web/html/attributs_universels/itemref/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemscope/index.html (renamed from files/fr/web/html/attributs_universels/itemscope/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemtype/index.html (renamed from files/fr/web/html/attributs_universels/itemtype/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/lang/index.html (renamed from files/fr/web/html/attributs_universels/lang/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/slot/index.html (renamed from files/fr/web/html/attributs_universels/slot/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/spellcheck/index.html (renamed from files/fr/web/html/attributs_universels/spellcheck/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/style/index.html (renamed from files/fr/web/html/attributs_universels/style/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/tabindex/index.html (renamed from files/fr/web/html/attributs_universels/tabindex/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/title/index.html (renamed from files/fr/web/html/attributs_universels/title/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/translate/index.html (renamed from files/fr/web/html/attributs_universels/translate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html (renamed from files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/x-ms-format-detection/index.html (renamed from files/fr/web/html/attributs_universels/x-ms-format-detection/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/inline_elements/index.html (renamed from files/fr/web/html/éléments_en_ligne/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/link_types/index.html (renamed from files/fr/web/html/types_de_lien/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/microdata/index.html (renamed from files/fr/web/html/microdonnées/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html | 36 | ||||
-rw-r--r-- | files/fr/web/html/preloading_content/index.html (renamed from files/fr/web/html/précharger_du_contenu/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/using_the_application_cache/index.html (renamed from files/fr/web/html/utiliser_application_cache/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html | 245 | ||||
-rw-r--r-- | files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html (renamed from files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html (renamed from files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/basics_of_http/resource_urls/index.html (renamed from files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/browser_detection_using_the_user_agent/index.html (renamed from files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/caching/index.html (renamed from files/fr/web/http/cache/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/conditional_requests/index.html (renamed from files/fr/web/http/requêtes_conditionnelles/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html (renamed from files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/cors/errors/corsdidnotsucceed/index.html (renamed from files/fr/web/http/cors/errors/corsnapasréussi/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/cors/errors/corsdisabled/index.html (renamed from files/fr/web/http/cors/errors/corsdesactive/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/cors/errors/corsmissingalloworigin/index.html (renamed from files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/headers/server/index.html (renamed from files/fr/web/http/headers/serveur/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/link_prefetching_faq/index.html (renamed from files/fr/web/http/faq_sur_le_préchargement_des_liens/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/connect/index.html (renamed from files/fr/web/http/méthode/connect/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/delete/index.html (renamed from files/fr/web/http/méthode/delete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/get/index.html (renamed from files/fr/web/http/méthode/get/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/head/index.html (renamed from files/fr/web/http/méthode/head/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/index.html (renamed from files/fr/web/http/méthode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/options/index.html (renamed from files/fr/web/http/méthode/options/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/patch/index.html (renamed from files/fr/web/http/méthode/patch/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/post/index.html (renamed from files/fr/web/http/méthode/post/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/put/index.html (renamed from files/fr/web/http/méthode/put/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/methods/trace/index.html (renamed from files/fr/web/http/méthode/trace/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/overview/index.html (renamed from files/fr/web/http/aperçu/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/http/public_key_pinning/index.html (renamed from files/fr/web/security/public_key_pinning/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/a_re-introduction_to_javascript/index.html (renamed from files/fr/web/javascript/une_réintroduction_à_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/about_javascript/index.html (renamed from files/fr/web/javascript/a_propos/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/data_structures/index.html (renamed from files/fr/web/javascript/structures_de_données/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html (renamed from files/fr/web/javascript/caractère_énumérable_des_propriétés_et_rattachement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/equality_comparisons_and_sameness/index.html (renamed from files/fr/web/javascript/les_différents_tests_d_égalité/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/eventloop/index.html (renamed from files/fr/web/javascript/concurrence_et_boucle_des_événements/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/apropos/index.html | 139 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/control_flow_and_error_handling/index.html (renamed from files/fr/web/javascript/guide/contrôle_du_flux_gestion_des_erreurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/details_of_the_object_model/index.html (renamed from files/fr/web/javascript/guide/le_modèle_objet_javascript_en_détails/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/expressions_and_operators/index.html (renamed from files/fr/web/javascript/guide/expressions_et_opérateurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/expressions_régulières/limites/index.html | 96 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/functions/index.html (renamed from files/fr/web/javascript/guide/fonctions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/grammar_and_types/index.html (renamed from files/fr/web/javascript/guide/types_et_grammaire/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/indexed_collections/index.html (renamed from files/fr/web/javascript/guide/collections_indexées/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/iterators_and_generators/index.html (renamed from files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/javascript_overview/index.html | 118 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/keyed_collections/index.html (renamed from files/fr/web/javascript/guide/collections_avec_clés/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/loops_and_iteration/index.html (renamed from files/fr/web/javascript/guide/boucles_et_itération/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/meta_programming/index.html (renamed from files/fr/web/javascript/guide/métaprogrammation/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/numbers_and_dates/index.html (renamed from files/fr/web/javascript/guide/nombres_et_dates/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/objets_élémentaires_javascript/index.html | 899 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/regular_expressions/assertions/index.html (renamed from files/fr/web/javascript/guide/expressions_régulières/assertions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/regular_expressions/character_classes/index.html (renamed from files/fr/web/javascript/guide/expressions_régulières/classes_de_caractères/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html (renamed from files/fr/web/javascript/guide/expressions_régulières/groupes_et_intervalles/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/regular_expressions/index.html (renamed from files/fr/web/javascript/guide/expressions_régulières/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html (renamed from files/fr/web/javascript/guide/expressions_régulières/quantificateurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html (renamed from files/fr/web/javascript/guide/expressions_régulières/échappement_propriétés_unicode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/retours_sur_héritage/index.html | 88 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/text_formatting/index.html (renamed from files/fr/web/javascript/guide/formatage_du_texte/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/using_promises/index.html (renamed from files/fr/web/javascript/guide/utiliser_les_promesses/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/utiliser_le_json_natif/index.html | 100 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/working_with_objects/index.html (renamed from files/fr/web/javascript/guide/utiliser_les_objets/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/guide/égalité_en_javascript/index.html | 265 | ||||
-rw-r--r-- | files/fr/web/javascript/guide_de_demarrage/index.html | 338 | ||||
-rw-r--r-- | files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html (renamed from files/fr/web/javascript/héritage_et_chaîne_de_prototypes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/introduction_à_javascript_orienté_objet/index.html | 372 | ||||
-rw-r--r-- | files/fr/web/javascript/memory_management/index.html (renamed from files/fr/web/javascript/gestion_de_la_mémoire/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/about/index.html (renamed from files/fr/web/javascript/reference/a_propos/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/classes/public_class_fields/index.html (renamed from files/fr/web/javascript/reference/classes/class_fields/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html | 292 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html (renamed from files/fr/web/javascript/guide/le_protocole_itérateur_historique/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/already_has_pragma/index.html (renamed from files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/array_sort_argument/index.html (renamed from files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/bad_octal/index.html (renamed from files/fr/web/javascript/reference/erreurs/bad_octal/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/bad_radix/index.html (renamed from files/fr/web/javascript/reference/erreurs/bad_radix/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html (renamed from files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html (renamed from files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html (renamed from files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html (renamed from files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/cant_access_property/index.html (renamed from files/fr/web/javascript/reference/erreurs/cant_access_property/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html (renamed from files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html (renamed from files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/cant_delete/index.html (renamed from files/fr/web/javascript/reference/erreurs/cant_delete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/cant_redefine_property/index.html (renamed from files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/cyclic_object_value/index.html (renamed from files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/dead_object/index.html (renamed from files/fr/web/javascript/reference/erreurs/dead_object/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html (renamed from files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html (renamed from files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html (renamed from files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/deprecated_octal/index.html (renamed from files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html (renamed from files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html (renamed from files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html (renamed from files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/equal_as_assign/index.html (renamed from files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html (renamed from files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/getter_only/index.html (renamed from files/fr/web/javascript/reference/erreurs/getter_only/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/identifier_after_number/index.html (renamed from files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/illegal_character/index.html (renamed from files/fr/web/javascript/reference/erreurs/illegal_character/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/in_operator_no_object/index.html (renamed from files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/index.html (renamed from files/fr/web/javascript/reference/erreurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/invalid_array_length/index.html (renamed from files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html (renamed from files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html (renamed from files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/invalid_date/index.html (renamed from files/fr/web/javascript/reference/erreurs/invalid_date/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html (renamed from files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html (renamed from files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html (renamed from files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/is_not_iterable/index.html (renamed from files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/json_bad_parse/index.html (renamed from files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html (renamed from files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/malformed_uri/index.html (renamed from files/fr/web/javascript/reference/erreurs/malformed_uri/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html (renamed from files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/more_arguments_needed/index.html (renamed from files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/negative_repetition_count/index.html (renamed from files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/no_non-null_object/index.html (renamed from files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/no_properties/index.html (renamed from files/fr/web/javascript/reference/erreurs/no_properties/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/no_variable_name/index.html (renamed from files/fr/web/javascript/reference/erreurs/no_variable_name/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html (renamed from files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/not_a_codepoint/index.html (renamed from files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/not_a_constructor/index.html (renamed from files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/not_a_function/index.html (renamed from files/fr/web/javascript/reference/erreurs/not_a_function/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/not_defined/index.html (renamed from files/fr/web/javascript/reference/erreurs/not_defined/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/precision_range/index.html (renamed from files/fr/web/javascript/reference/erreurs/precision_range/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/property_access_denied/index.html (renamed from files/fr/web/javascript/reference/erreurs/property_access_denied/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/read-only/index.html (renamed from files/fr/web/javascript/reference/erreurs/read-only/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/redeclared_parameter/index.html (renamed from files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html (renamed from files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/reserved_identifier/index.html (renamed from files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html (renamed from files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/stmt_after_return/index.html (renamed from files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html (renamed from files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/too_much_recursion/index.html (renamed from files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/typed_array_invalid_arguments/index.html (renamed from files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/undeclared_var/index.html (renamed from files/fr/web/javascript/reference/erreurs/undeclared_var/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/undefined_prop/index.html (renamed from files/fr/web/javascript/reference/erreurs/undefined_prop/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/unexpected_token/index.html (renamed from files/fr/web/javascript/reference/erreurs/unexpected_token/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/unexpected_type/index.html (renamed from files/fr/web/javascript/reference/erreurs/unexpected_type/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html (renamed from files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html (renamed from files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/errors/var_hides_argument/index.html (renamed from files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html (renamed from files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/arguments/callee/index.html (renamed from files/fr/web/javascript/reference/fonctions/arguments/callee/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/arguments/index.html (renamed from files/fr/web/javascript/reference/fonctions/arguments/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/arguments/length/index.html (renamed from files/fr/web/javascript/reference/fonctions/arguments/length/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/arrow_functions/index.html (renamed from files/fr/web/javascript/reference/fonctions/fonctions_fléchées/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/default_parameters/index.html (renamed from files/fr/web/javascript/reference/fonctions/valeurs_par_défaut_des_arguments/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/get/index.html (renamed from files/fr/web/javascript/reference/fonctions/get/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/index.html (renamed from files/fr/web/javascript/reference/fonctions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/method_definitions/index.html (renamed from files/fr/web/javascript/reference/fonctions/définition_de_méthode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/rest_parameters/index.html (renamed from files/fr/web/javascript/reference/fonctions/paramètres_du_reste/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/functions/set/index.html (renamed from files/fr/web/javascript/reference/fonctions/set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/aggregateerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/@@species/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/concat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/concat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/copywithin/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/entries/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/entries/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/every/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/every/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/fill/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/fill/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/filter/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/filter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/find/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/find/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/findindex/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/flat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/flat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/flatmap/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/foreach/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/from/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/from/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/includes/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/includes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/indexof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/isarray/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/join/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/join/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/keys/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/keys/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/length/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/length/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/map/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/map/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/of/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/of/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/pop/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/pop/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/push/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/push/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/reduce/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/reduceright/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/reverse/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/shift/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/shift/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/slice/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/slice/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/some/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/some/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/sort/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/sort/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/splice/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/splice/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/unshift/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/values/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/array/values/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/arraybuffer/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/asyncfunction/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/add/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/and/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/load/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/notify/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/or/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/store/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/sub/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/wait/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/atomics/xor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/bigint/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/bigint/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/bigint64array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/biguint64array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/boolean/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/boolean/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getdate/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getday/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getday/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/gethours/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getminutes/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getmonth/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getseconds/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/gettime/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getutcday/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getutchours/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/getyear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/now/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/now/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/parse/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/parse/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setdate/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/sethours/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setminutes/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setmonth/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setseconds/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/settime/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/settime/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setutchours/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/setyear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/todatestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/toisostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/tojson/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/totimestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/utc/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/utc/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/date/valueof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/decodeuri/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/encodeuri/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/filename/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/filename/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/linenumber/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/message/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/message/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/name/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/name/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/stack/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/stack/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/error/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/escape/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/escape/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/eval/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/eval/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/evalerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/evalerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/float32array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/float32array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/float64array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/float64array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/apply/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/apply/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/arguments/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/bind/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/bind/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/call/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/call/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/caller/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/caller/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/displayname/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/length/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/length/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/name/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/name/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/function/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/generator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/generator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/generator/next/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/generator/next/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/generator/return/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/generator/return/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/generator/throw/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/generatorfunction/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/globalthis/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/globalthis/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/infinity/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/infinity/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/int16array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/int16array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/int32array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/int32array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/int8array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/int8array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/internalerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/internalerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/collator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/listformat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/isfinite/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/isfinite/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/isnan/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/isnan/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/json/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/json/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/json/parse/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/json/parse/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/json/stringify/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/@@species/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/clear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/clear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/delete/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/delete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/entries/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/entries/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/foreach/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/get/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/get/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/has/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/has/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/keys/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/keys/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/set/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/size/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/size/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/map/values/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/map/values/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/abs/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/abs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/acos/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/acos/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/acosh/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/asin/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/asin/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/asinh/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/atan/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/atan/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/atan2/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/atanh/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/cbrt/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/ceil/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/clz32/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/cos/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/cos/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/cosh/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/e/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/e/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/exp/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/exp/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/expm1/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/floor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/floor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/fround/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/fround/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/hypot/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/imul/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/imul/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/ln10/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/ln2/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/log/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/log/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/log10/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/log10/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/log10e/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/log1p/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/log2/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/log2/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/log2e/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/max/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/max/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/min/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/min/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/pi/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/pi/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/pow/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/pow/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/random/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/random/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/round/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/round/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/sign/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/sign/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/sin/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/sin/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/sinh/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/sqrt/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/tan/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/tan/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/tanh/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/math/trunc/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/nan/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/nan/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/null/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/null/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/epsilon/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/isfinite/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/isinteger/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/isnan/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/max_value/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/min_value/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/nan/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/nan/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/parseint/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/toexponential/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/tofixed/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/toprecision/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/number/valueof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/assign/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/assign/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/constructor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/create/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/create/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/entries/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/entries/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/freeze/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/fromentries/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/is/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/is/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/isextensible/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/issealed/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/keys/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/keys/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/proto/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/proto/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/seal/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/seal/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/valueof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/object/values/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/object/values/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/parsefloat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/parseint/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/parseint/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/all/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/all/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/any/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/any/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/catch/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/finally/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/race/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/race/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/reject/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/resolve/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/promise/then/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/promise/then/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/rangeerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/referenceerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/apply/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_méthodes_object/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/construct/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/get/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/has/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/set/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/compile/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/exec/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/flags/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/global/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/input/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/n/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/source/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/test/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/@@species/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/add/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/add/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/clear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/clear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/delete/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/delete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/entries/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/entries/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/foreach/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/has/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/has/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/size/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/size/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/set/values/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/set/values/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/anchor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/big/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/big/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/blink/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/blink/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/bold/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/bold/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/charat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/charat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/codepointat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/concat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/concat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/endswith/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/fixed/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/fontsize/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/includes/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/includes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/indexof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/italics/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/italics/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/length/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/length/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/link/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/link/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/localecompare/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/match/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/match/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/matchall/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/normalize/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/padend/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/padend/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/padstart/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/raw/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/raw/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/repeat/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/replace/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/replace/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/replaceall/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/search/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/search/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/slice/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/slice/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/small/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/small/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/split/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/split/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/startswith/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/strike/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/strike/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/sub/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/sub/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/substr/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/substr/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/substring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/substring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/sup/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/sup/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/touppercase/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/trim/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/trim/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/trimend/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/trimstart/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/string/valueof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/description/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/for/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/match/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/replace/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/search/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/species/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/split/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/syntaxerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/every/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/find/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/from/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/join/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/length/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/map/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/name/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/of/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/set/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/some/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typedarray/values/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/typeerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/typeerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/uint16array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/uint16array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/uint32array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/uint32array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/uint8array/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/uint8array/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/undefined/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/undefined/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/unescape/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/unescape/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/uneval/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/uneval/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/urierror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/urierror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakmap/get/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakmap/has/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakmap/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakmap/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakmap/set/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakset/add/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakset/clear/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakset/delete/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakset/has/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/weakset/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/weakset/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/global/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/module/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/table/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html (renamed from files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/instructions/default/index.html | 124 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/iteration_protocols/index.html (renamed from files/fr/web/javascript/reference/les_protocoles_iteration/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/lexical_grammar/index.html (renamed from files/fr/web/javascript/reference/grammaire_lexicale/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/mots_réservés/index.html | 94 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html | 181 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html | 70 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html | 61 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html | 63 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html | 89 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html | 120 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html | 183 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html | 115 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html | 91 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html | 99 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html | 67 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html | 63 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html | 81 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html | 82 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html | 63 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html | 91 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html | 83 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html | 71 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html | 73 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html | 89 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html | 91 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html | 176 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html | 73 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html | 92 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html | 92 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html | 119 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html | 88 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html | 67 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html | 190 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html | 75 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html | 90 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html | 132 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html | 90 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html | 90 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html | 82 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html | 80 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html | 69 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html | 71 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html | 72 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html | 69 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html | 76 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/addition/index.html (renamed from files/fr/web/javascript/reference/opérateurs/addition/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/addition_assignment/index.html (renamed from files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/assignment/index.html (renamed from files/fr/web/javascript/reference/opérateurs/assignement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/async_function/index.html (renamed from files/fr/web/javascript/reference/opérateurs/async_function/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/await/index.html (renamed from files/fr/web/javascript/reference/opérateurs/await/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/class/index.html (renamed from files/fr/web/javascript/reference/opérateurs/class/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/comma_operator/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/conditional_operator/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/delete/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/destructuring_assignment/index.html (renamed from files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/function/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/function_star_/index.html (renamed from files/fr/web/javascript/reference/opérateurs/function_star_/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/grouping/index.html (renamed from files/fr/web/javascript/reference/opérateurs/groupement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/in/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/index.html (renamed from files/fr/web/javascript/reference/opérateurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/instanceof/index.html (renamed from files/fr/web/javascript/reference/opérateurs/instanceof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/new.target/index.html (renamed from files/fr/web/javascript/reference/opérateurs/new.target/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/new/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html (renamed from files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/object_initializer/index.html (renamed from files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/operator_precedence/index.html (renamed from files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/optional_chaining/index.html (renamed from files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/pipeline_operator/index.html (renamed from files/fr/web/javascript/reference/opérateurs/tube/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/property_accessors/index.html (renamed from files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/spread_syntax/index.html (renamed from files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/super/index.html (renamed from files/fr/web/javascript/reference/opérateurs/super/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/this/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/typeof/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/void/index.html (renamed from files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/yield/index.html (renamed from files/fr/web/javascript/reference/opérateurs/yield/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/operators/yield_star_/index.html (renamed from files/fr/web/javascript/reference/opérateurs/yield_star_/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html | 296 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html | 554 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html | 414 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html | 28 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html | 257 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html | 256 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/async_function/index.html (renamed from files/fr/web/javascript/reference/instructions/async_function/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/block/index.html (renamed from files/fr/web/javascript/reference/instructions/bloc/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/break/index.html (renamed from files/fr/web/javascript/reference/instructions/break/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/class/index.html (renamed from files/fr/web/javascript/reference/instructions/class/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/const/index.html (renamed from files/fr/web/javascript/reference/instructions/const/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/continue/index.html (renamed from files/fr/web/javascript/reference/instructions/continue/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/debugger/index.html (renamed from files/fr/web/javascript/reference/instructions/debugger/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/do...while/index.html (renamed from files/fr/web/javascript/reference/instructions/do...while/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/empty/index.html (renamed from files/fr/web/javascript/reference/instructions/vide/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/export/index.html (renamed from files/fr/web/javascript/reference/instructions/export/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/for-await...of/index.html (renamed from files/fr/web/javascript/reference/instructions/for-await...of/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/for...in/index.html (renamed from files/fr/web/javascript/reference/instructions/for...in/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/for...of/index.html (renamed from files/fr/web/javascript/reference/instructions/for...of/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/for/index.html (renamed from files/fr/web/javascript/reference/instructions/for/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/function/index.html (renamed from files/fr/web/javascript/reference/instructions/function/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/function_star_/index.html (renamed from files/fr/web/javascript/reference/instructions/function_star_/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/if...else/index.html (renamed from files/fr/web/javascript/reference/instructions/if...else/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/import.meta/index.html (renamed from files/fr/web/javascript/reference/instructions/import.meta/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/import/index.html (renamed from files/fr/web/javascript/reference/instructions/import/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/index.html (renamed from files/fr/web/javascript/reference/instructions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/label/index.html (renamed from files/fr/web/javascript/reference/instructions/label/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/let/index.html (renamed from files/fr/web/javascript/reference/instructions/let/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/return/index.html (renamed from files/fr/web/javascript/reference/instructions/return/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/switch/index.html (renamed from files/fr/web/javascript/reference/instructions/switch/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/throw/index.html (renamed from files/fr/web/javascript/reference/instructions/throw/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/try...catch/index.html (renamed from files/fr/web/javascript/reference/instructions/try...catch/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/var/index.html (renamed from files/fr/web/javascript/reference/instructions/var/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/while/index.html (renamed from files/fr/web/javascript/reference/instructions/while/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/statements/with/index.html (renamed from files/fr/web/javascript/reference/instructions/with/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html (renamed from files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/template_literals/index.html (renamed from files/fr/web/javascript/reference/littéraux_gabarits/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/reference/trailing_commas/index.html (renamed from files/fr/web/javascript/reference/virgules_finales/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html (renamed from files/fr/web/javascript/performance_les_dangers_liés_à_la_modification_de_prototype/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/javascript/typed_arrays/index.html (renamed from files/fr/web/javascript/tableaux_typés/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/mathml/attribute/values/index.html (renamed from files/fr/web/mathml/attribute/valeurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html (renamed from files/fr/web/mathml/exemples/dériver_la_formule_quadratique/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/mathml/examples/index.html (renamed from files/fr/web/mathml/exemples/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/mathml/examples/mathml_pythagorean_theorem/index.html (renamed from files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.html (renamed from files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/media/formats/image_types/index.html (renamed from files/fr/web/media/formats/types_des_images/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/media/formats/support_issues/index.html (renamed from files/fr/web/media/formats/questions_sur_le_soutien/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/performance/performance_budgets/index.html (renamed from files/fr/web/performance/budgets_de_performance/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/add_to_home_screen/index.html (renamed from files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/identifiable/index.html | 60 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/independante_du_reseau/index.html | 95 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/installable/index.html | 48 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/loading/index.html (renamed from files/fr/web/progressive_web_apps/chargement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/partageable/index.html | 32 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/progressive/index.html | 31 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/re-engageable/index.html | 81 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html (renamed from files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/responsive/media_types/index.html | 396 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html (renamed from files/fr/web/progressive_web_apps/adaptative/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/progressive_web_apps/securisee/index.html | 34 | ||||
-rw-r--r-- | files/fr/web/security/same-origin_policy/index.html (renamed from files/fr/web/security/same_origin_policy_for_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/applying_svg_effects_to_html_content/index.html (renamed from files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/compatibility_sources/index.html (renamed from files/fr/web/svg/sources_compatibilite/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/svg_1.1_support_in_firefox/index.html | 774 | ||||
-rw-r--r-- | files/fr/web/svg/svg_as_an_image/index.html (renamed from files/fr/web/svg/svg_en_tant_qu_image/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/basic_shapes/index.html (renamed from files/fr/web/svg/tutoriel/formes_de_base/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/basic_transformations/index.html (renamed from files/fr/web/svg/tutoriel/transformations_de_base/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/clipping_and_masking/index.html (renamed from files/fr/web/svg/tutoriel/découpages_et_masquages/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/fills_and_strokes/index.html (renamed from files/fr/web/svg/tutoriel/fills_and_strokes/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/filter_effects/index.html (renamed from files/fr/web/svg/tutoriel/filtres/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/getting_started/index.html (renamed from files/fr/web/svg/tutoriel/premiers_pas/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/gradients/index.html (renamed from files/fr/web/svg/tutoriel/gradients/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/index.html (renamed from files/fr/web/svg/tutoriel/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/introduction/index.html (renamed from files/fr/web/svg/tutoriel/introduction/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/other_content_in_svg/index.html (renamed from files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/paths/index.html (renamed from files/fr/web/svg/tutoriel/paths/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/patterns/index.html (renamed from files/fr/web/svg/tutoriel/motifs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/positions/index.html (renamed from files/fr/web/svg/tutoriel/positionnement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/svg_and_css/index.html | 198 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/svg_fonts/index.html (renamed from files/fr/web/svg/tutoriel/polices_svg/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/svg_image_tag/index.html (renamed from files/fr/web/svg/tutoriel/svg_image_tag/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/svg_in_html_introduction/index.html (renamed from files/fr/web/svg/tutoriel/introduction_à_svg_dans_html/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/texts/index.html (renamed from files/fr/web/svg/tutoriel/texts/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/svg/tutorial/tools_for_svg/index.html (renamed from files/fr/web/svg/tutoriel/tools_for_svg/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/tutorials/index.html (renamed from files/fr/web/tutoriels/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/web_components/using_templates_and_slots/index.html (renamed from files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xml/xml_introduction/index.html (renamed from files/fr/web/xml/introduction_à_xml/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/comparison_with_css_selectors/index.html (renamed from files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/boolean/index.html (renamed from files/fr/web/xpath/fonctions/boolean/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/ceiling/index.html (renamed from files/fr/web/xpath/fonctions/ceiling/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/concat/index.html (renamed from files/fr/web/xpath/fonctions/concat/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/contains/index.html (renamed from files/fr/web/xpath/fonctions/contains/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/count/index.html (renamed from files/fr/web/xpath/fonctions/count/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/current/index.html (renamed from files/fr/web/xpath/fonctions/current/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/document/index.html (renamed from files/fr/web/xpath/fonctions/document/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/element-available/index.html (renamed from files/fr/web/xpath/fonctions/element-available/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/false/index.html (renamed from files/fr/web/xpath/fonctions/false/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/floor/index.html (renamed from files/fr/web/xpath/fonctions/floor/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/format-number/index.html (renamed from files/fr/web/xpath/fonctions/format-number/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/function-available/index.html (renamed from files/fr/web/xpath/fonctions/function-available/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/generate-id/index.html (renamed from files/fr/web/xpath/fonctions/generate-id/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/id/index.html (renamed from files/fr/web/xpath/fonctions/id/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/index.html (renamed from files/fr/web/xpath/fonctions/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/key/index.html (renamed from files/fr/web/xpath/fonctions/key/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/lang/index.html (renamed from files/fr/web/xpath/fonctions/lang/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/last/index.html (renamed from files/fr/web/xpath/fonctions/last/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/local-name/index.html (renamed from files/fr/web/xpath/fonctions/local-name/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/name/index.html (renamed from files/fr/web/xpath/fonctions/name/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/namespace-uri/index.html (renamed from files/fr/web/xpath/fonctions/namespace-uri/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/normalize-space/index.html (renamed from files/fr/web/xpath/fonctions/normalize-space/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/not/index.html (renamed from files/fr/web/xpath/fonctions/not/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/number/index.html (renamed from files/fr/web/xpath/fonctions/number/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/position/index.html (renamed from files/fr/web/xpath/fonctions/position/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/round/index.html (renamed from files/fr/web/xpath/fonctions/round/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/starts-with/index.html (renamed from files/fr/web/xpath/fonctions/starts-with/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/string-length/index.html (renamed from files/fr/web/xpath/fonctions/string-length/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/string/index.html (renamed from files/fr/web/xpath/fonctions/string/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/substring-after/index.html (renamed from files/fr/web/xpath/fonctions/substring-after/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/substring-before/index.html (renamed from files/fr/web/xpath/fonctions/substring-before/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/substring/index.html (renamed from files/fr/web/xpath/fonctions/substring/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/sum/index.html (renamed from files/fr/web/xpath/fonctions/sum/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/system-property/index.html (renamed from files/fr/web/xpath/fonctions/system-property/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/translate/index.html (renamed from files/fr/web/xpath/fonctions/translate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/true/index.html (renamed from files/fr/web/xpath/fonctions/true/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/functions/unparsed-entity-url/index.html (renamed from files/fr/web/xpath/fonctions/unparsed-entity-url/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.html (renamed from files/fr/web/javascript/introduction_à_l_utilisation_de_xpath_avec_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/apply-imports/index.html (renamed from files/fr/web/xslt/apply-imports/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/apply-templates/index.html (renamed from files/fr/web/xslt/apply-templates/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/attribute-set/index.html (renamed from files/fr/web/xslt/attribute-set/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/attribute/index.html (renamed from files/fr/web/xslt/attribute/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/call-template/index.html (renamed from files/fr/web/xslt/call-template/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/choose/index.html (renamed from files/fr/web/xslt/choose/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/comment/index.html (renamed from files/fr/web/xslt/comment/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/copy-of/index.html (renamed from files/fr/web/xslt/copy-of/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/copy/index.html (renamed from files/fr/web/xslt/copy/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/decimal-format/index.html (renamed from files/fr/web/xslt/decimal-format/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/fallback/index.html (renamed from files/fr/web/xslt/fallback/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/for-each/index.html (renamed from files/fr/web/xslt/for-each/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/if/index.html (renamed from files/fr/web/xslt/if/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/import/index.html (renamed from files/fr/web/xslt/import/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/include/index.html (renamed from files/fr/web/xslt/include/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/key/index.html (renamed from files/fr/web/xslt/key/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/message/index.html (renamed from files/fr/web/xslt/message/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/namespace-alias/index.html (renamed from files/fr/web/xslt/namespace-alias/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/number/index.html (renamed from files/fr/web/xslt/number/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/otherwise/index.html (renamed from files/fr/web/xslt/otherwise/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/output/index.html (renamed from files/fr/web/xslt/output/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/param/index.html (renamed from files/fr/web/xslt/param/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/preserve-space/index.html (renamed from files/fr/web/xslt/preserve-space/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/processing-instruction/index.html (renamed from files/fr/web/xslt/processing-instruction/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/sort/index.html (renamed from files/fr/web/xslt/sort/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/strip-space/index.html (renamed from files/fr/web/xslt/strip-space/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/stylesheet/index.html (renamed from files/fr/web/xslt/stylesheet/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/template/index.html (renamed from files/fr/web/xslt/template/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/text/index.html (renamed from files/fr/web/xslt/text/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/transform/index.html (renamed from files/fr/web/xslt/transform/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/value-of/index.html (renamed from files/fr/web/xslt/value-of/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/variable/index.html (renamed from files/fr/web/xslt/variable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/when/index.html (renamed from files/fr/web/xslt/when/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/element/with-param/index.html (renamed from files/fr/web/xslt/with-param/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/index/index.html (renamed from files/fr/web/xslt/sommaire/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/pi_parameters/index.html (renamed from files/fr/web/xslt/paramètres_des_instructions_de_traitement/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.html (renamed from files/fr/web/xslt/transformations_xml_avec_xslt/présentation/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html (renamed from files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/transforming_xml_with_xslt/index.html (renamed from files/fr/web/xslt/transformations_xml_avec_xslt/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html (renamed from files/fr/web/xslt/transformations_xml_avec_xslt/la_référence_xslt_xpath_de_netscape/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html (renamed from files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html (renamed from files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avancé/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.html (renamed from files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/xslt_js_interface_in_gecko/index.html (renamed from files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.html (renamed from files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/xslt_js_interface_in_gecko/resources/index.html (renamed from files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html (renamed from files/fr/web/xslt/interface_xslt_js_dans_gecko/définition_de_paramètres/index.html) | 0 |
1477 files changed, 9211 insertions, 24309 deletions
diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..7dcc01326a --- /dev/null +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,176 @@ +--- +title: Aperçu sur le développement des applications Web et des Widgets accessibles +slug: >- + Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles +tags: + - ARIA + - Accessisibilité + - Applications Web + - Guide +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +<p>Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs.</p> + +<h2 id="Problématique">Problématique</h2> + +<p>La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag <code><div></code> ou le tag <code><span></code>. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que <a href="/fr/ARIA" title="ARIA">ARIA</a> entre en jeu.</p> + +<p><em>Exemple 1: Code d</em>’<em>une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions.</em></p> + +<pre class="brush: html"><!-- This is a tabs widget. How would you know, looking only at the markup? --> +<ol> + <li id="ch1Tab"> + <a href="#ch1Panel">Chapitre 1</a> + </li> + <li id="ch2Tab"> + <a href="#ch2Panel">Chapitre 2</a> + </li> + <li id="quizTab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <div id="ch1Panel">Le contenu du chapitre 1 va ici</div> + <div id="ch2Panel">Le contenu du chapitre 2 va ici</div> + <div id="quizPanel">Le contenu du Quiz va ici</div> +</div></pre> + +<p><em>Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuvent être reconnues en tant que tel par les utilisateurs. Or aucune information sémantique exploitable par une technologie d</em>’<em>assistance n</em>’<em>est présente.</em><br> + <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p> + +<h2 id="ARIA">ARIA</h2> + +<p><a href="https://www.w3.org/WAI/standards-guidelines/aria/">WAI-ARIAI</a>, les spécifications concernant les applications <strong>internet "riches" et accessibles</strong> sont publiées par l’iniative du <a href="https://www.w3.org/WAI/">W3C sur l’accessibilité</a>, et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus.</p> + +<div class="warning"> +<p>Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et <strong>les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA</strong>.</p> +</div> + +<p>Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué.</p> + +<p>Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène.</p> + +<p><em>Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes.</em></p> + +<pre class="brush: html"><!-- Les tabulations sont bien définies --> +<!-- Des attributs ARIA ont été ajoutés pour lister les différentes tabulations. --> +<ol role="tablist"> + <li id="ch1Tab" role="tab"> + <a href="#ch1Panel">Chapter 1</a> + </li> + <li id="ch2Tab" role="tab"> + <a href="#ch2Panel">Chapter 2</a> + </li> + <li id="quizTab" role="tab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <!-- Remarquez les attributs role and aria-labelledby servant à décrire les tabulations. --> + <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div> + <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div> + <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Contenu du Quiz;/div> +</div> +</pre> + +<p>Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit.</p> + +<h3 id="Les_changement_représentationnels">Les changement représentationnels</h3> + +<p>Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. </p> + +<h4 id="Les_Changements_détats">Les Changements d'états</h4> + +<p>Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :</p> + +<ul> + <li><strong><code>aria-checked</code></strong> indique l’état d'une case à cocher ou d'un bouton radio,</li> + <li><strong><code>aria-disabled</code></strong> indique qu’un élément est visible, mais désactivé,</li> + <li><strong><code>aria-expanded</code></strong> indique qu’un élément est déroulé.</li> +</ul> + +<p>La liste n’est pas exhaustive. Pour voir la liste complète, consulter <a href="https://www.w3.org/TR/wai-aria-1.1/#introstates">les spécifications des états et propriétés ARIA)</a>.</p> + +<p>Les développeurs devraient se servir des états ARIA pour indiquer l'état des widgets et utiliser les sélecteurs d'attributs CSS pour en modifier l'apparence en fonction des changements d'états plutôt qu'au moyen d'un script qui modifierait des classes sur le widget.</p> + +<h4 id="Les_changements_de_visibilité">Les changements de visibilité</h4> + +<p>Lorsque la visibilité du contenu est modifiée (c'est-à-dire qu'un élément est masqué ou affiché), les développeurs doivent modifier la valeur de la propriété <strong><code>aria-hidden</code></strong>. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant <code>display:none</code>.</p> + +<p>Le site Web Open Ajax Alliance fournit<a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/"> un exemple de tooltip qui utilise <strong><code>aria-hidden</code></strong> pour controler la visibilité du tooltip.</a> L'exemple montre un formulaire Web simple avec des info-bulles contenant des instructions associées aux champs d’entrée.</p> + +<p>Les parties pertinentes de l'exemple sont expliquées ci-dessous.Dans cet exemple, le code HTML de l’info-bulle a le format indiqué dans l'exemple 2a. La ligne 9 définit l’état <strong><code>aria-hidden</code></strong> à <code>true</code>.</p> + +<p><em>Exemple 2a. HTML pour un tooltip (adapté de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + +<pre class="brush: html"><div class="text"> + <label id="tp1-label" for="first">First Name:</label> + <input type="text" id="first" name="first" size="20" + aria-labelledby="tp1-label" + aria-describedby="tp1" + aria-required="false" /> + <div id="tp1" class="tooltip" + role="tooltip" + aria-hidden="true">Your first name is optional</div> +</div> +</pre> + +<p>Le CSS pour ce balisage est montré dans l'exemple 2b. Notez qu’il n’y a pas de nom de classe personnalisé utilisé, seul le statut de l'attribut <strong><code>aria-hidden</code></strong> à la ligne 1<em>.<br> + Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état (tiré de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + +<pre class="brush: css">div.tooltip[aria-hidden="true"] { + display: none; + } +</pre> + +<p>Le JavaScript à mettre à jour est la propriété <strong><code>aria-hidden</code></strong> du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut <strong><code>aria-hidden</code></strong> à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé.</p> + +<p><em>Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked (basé sur <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + +<pre class="brush: javascript">var showTip = function(el) { + el.setAttribute('aria-hidden', 'false'); +}</pre> + +<h3 id="Les_changements_de_rôles">Les changements de rôles</h3> + +<p>ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un <strong><code>role</code></strong> de <code>menubar</code> et chaque {{ HTMLElement("li") }} devrait avoir un <strong><code>role</code></strong> de <code>menuitem</code>. Le <strong><code>role</code></strong> d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau <strong><code>role</code></strong>.</p> + +<p>Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le <strong><code>role</code></strong> ARIA à <code>button</code>, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le <strong><code>role</code></strong> attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique).</p> + +<p>Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un <strong><code>role</code></strong> de <code>button</code>, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}.</p> + +<h3 id="Mise_à_jour_asynchrone_de_contenu">Mise à jour asynchrone de contenu</h3> + +<div class="note">En construction. Voir aussi <a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Zones_live_ARIA" title="Live Regions">Live Regions</a></div> + +<h2 id="La_navigation_au_clavier">La navigation au clavier</h2> + +<p>Souvent, les développeurs négligent la prise en charge du clavier lorsqu’ils créent des widgets personnalisés. Pour être accessible à une large gamme d’utilisateurs, toutes les fonctionnalités d’une application Web ou d’un widget doivent également pouvoir être contrôlées avec le clavier, sans nécessiter de souris. En pratique, cela implique généralement de suivre les conventions prises en charge par des widgets similaires sur le bureau, en tirant pleinement partie des touches <kbd>Tab</kbd>, <kbd>Entrée</kbd>, <kbd>Espace</kbd> et des flèches.</p> + +<p>Traditionnellement, la navigation au clavier sur le Web était limitée à la touche Tabulation. Un utilisateur appuie sur <kbd>Tab</kbd> pour faire la mise au point de chaque lien, bouton ou formulaire sur la page dans un ordre linéaire, en utilisant <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd> pour revenir en arrière. C’est une forme unidimensionnelle de navigation en avant ou en arrière, un élément à la fois. Sur les pages assez denses, un utilisateur clavier doit souvent appuyer plusieurs fois sur la touche <kbd>Tab</kbd> avant d’accéder à la section requise. La mise en œuvre de conventions de clavier de type bureautique sur le Web peut considérablement accélérer la navigation pour de nombreux utilisateurs.</p> + +<p>Voici un résumé de la façon dont la navigation au clavier devrait fonctionner dans une application Web compatible ARIA :</p> + +<ul> + <li>La touche <kbd>Tab</kbd> devrait fournir le focus au widget dans son ensemble. Par exemple, la tabulation d’une barre de menu devrait mettre l’accent sur le premier élément du menu.</li> + <li>Les touches fléchées devraient permettre la sélection ou la navigation dans le widget. Par exemple, en utilisant les touches <kbd>←</kbd> et <kbd>→</kbd>, vous devez déplacer le focus sur les éléments de menu précédent et suivant.</li> + <li>Lorsque le widget n’est pas à l’intérieur d’un formulaire, les touches <kbd>Entrée</kbd> et <kbd>Espace</kbd> permettent de sélectionner ou d’activer le contrôle.</li> + <li>Dans un formulaire, la touche <kbd>Espace</kbd> doit sélectionner ou activer le contrôle, tandis que la touche <kbd>Entrée</kbd> doit soumettre l’action par défaut du formulaire.</li> + <li>En cas de doute, imitez le comportement standard du bureau du contrôle que vous créez.</li> +</ul> + +<p>Ainsi, pour l’exemple de widget Tabs ci-dessus, l’utilisateur devrait être capable de naviguer dans le conteneur du widget (le <ol> dans notre balisage) en utilisant les touches <kbd>Tab</kbd> et <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd>. Une fois que le focus du clavier est à l’intérieur du conteneur, les touches fléchées devraient permettre à l’utilisateur de naviguer entre chaque onglet (les éléments <li>). De là, les conventions varient d’une plateforme à l’autre. Sous Windows, l’onglet suivant doit être automatiquement activé lorsque l’utilisateur appuie sur les touches fléchées. Sous Mac OS X, l’utilisateur peut appuyer sur <kbd>Entrée</kbd> ou sur <kbd>Espace</kbd> pour activer l’onglet suivant. Un tutoriel en profondeur pour créer <a href="https://developer.mozilla.org/fr/docs/Contr%C3%B4les_DHTML_personnalis%C3%A9s_navigables_au_clavier" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Widget navigables grâce à des contrôles Javascript </a>comme décrit ici afin de montrer comment avoir ce comportement en JS.</p> + +<p>Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici <a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a> est disponible. Il délivre un aperçu de la façon dont la navigation au clavier devrait fonctionner pour chaque type de widget pris en charge par ARIA. Le W3C offre également un document utile <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA" title="ARIA">ARIA</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/FAQ_Applications_Web_et_ARIA" title="Web applications and ARIA FAQ">Des applications WEB et la FAQ ARIA</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Spécification</a></li> + <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li> + <li><a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_guides/index.html b/files/fr/web/accessibility/aria/aria_guides/index.html new file mode 100644 index 0000000000..452418ed1b --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_guides/index.html @@ -0,0 +1,27 @@ +--- +title: Guides ARIA +slug: Accessibilité/ARIA/Guides_ARIA +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Guides +--- +<p><strong>ARIA</strong> (Accessible Rich Internet Applications ou Applications Internet riches accessibles) défini une manière de rendre le web plus accessible pour les personnes en situation de handicap. Les quelques principes suivant permettent de s'assurer d'une meilleure accessibilité :</p> + +<ul> + <li>Traiter les erreurs dans les formulaires</li> + <li>Labelliser les composants d’interface</li> + <li>Labelliser les composants composés (Composite Widgets) et des zones (Regions)</li> + <li>Gérer le focus dans les composants composés (<code>aria-activedescendant</code> vs roving tabindex)</li> + <li>Utiliser les rôles de points de repère (Landmark Roles)</li> + <li>Traiter les actualisations dynamiques & des zones « Live »</li> + <li>Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance</li> + <li>Utiliser le Glisser & déposer</li> + <li>Notifier les utilisateurs sur les lecteurs d’écran non-ARIA</li> + <li>Arranger la structure avec le rôle <code>presentation</code></li> + <li>Masquer les trames des tableaux</li> + <li>Gérer les dialogues modaux et non modaux</li> + <li>Utiliser ARIA avec HTML5</li> + <li>Comment tester ARIA ?</li> + <li>ARIA sur les périphériques mobiles</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.html b/files/fr/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..8b163bc582 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,122 @@ +--- +title: Zones live ARIA +slug: Accessibilité/ARIA/Zones_live_ARIA +tags: + - ARIA + - Accessibilité + - Avancé +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +<h2 id="Introduction_2"><span class="mw-headline" id="Introduction">Introduction </span></h2> + +<p>Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.</p> + +<h2 id="Zones_«_live_»_basiques"><span class="mw-headline" id="Live_Region_State">Zones « live » basiques</span></h2> + +<p>Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.</p> + +<dl> + <dt>aria-live :</dt> + <dd>L’attribut <code>aria-live=VALEUR_POLITESSE</code> est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : <code>off</code>/<code>polite</code>/<code>assertive</code>. La valeur par défaut est <code>off</code>. Cet attribut est de loin le plus important.</dd> + <dt>aria-controls :</dt> + <dd>L’attribut <code>aria-controls=[LISTE_IDs]</code> est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un <code>ID</code> dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : <code>aria-controls="maZoneID1 maZoneID2"</code>.</dd> + <dd class="warning">Nous ne savons pas si <code>aria-controls</code> pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.</dd> +</dl> + +<p>Normalement, seul <code>aria-live="polite"</code> est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé.</p> + +<p>Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec <code>aria-live="off"</code>.</p> + +<h3 id="Cas_d’étude_simple_une_''combobox''_actualise_des_informations_utiles_à_l’écran">Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran</h3> + +<p>Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie.</p> + +<p><code><select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select></code></p> + +<pre class="brush: html" id="bird-selector"><div role="region" id="bird-info" aria-live="polite"></pre> + +<p>Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur <code>polite</code>, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi.</p> + +<h2 id="Préférences_de_rôles_pour_les_zones_«_live_»_spécialisées">Préférences de rôles pour les zones « live » spécialisées</h2> + +<p>Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col">Rôle</th> + <th scope="col">Description</th> + <th scope="col">Compatibilité</th> + </tr> + </thead> + <tbody> + <tr> + <td>log</td> + <td>Chat, erreur, jeux ou autres types de journalisation</td> + <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="polite"</code> redondant lorsque vous utiliserez ce rôle.</td> + </tr> + <tr> + <td>status</td> + <td>Une barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant.</td> + <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="polite"</code> redondant lorsque vous utiliserez ce rôle.</td> + </tr> + <tr> + <td>alert</td> + <td>Message d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes)</td> + <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="assertive"</code> redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS.</td> + </tr> + <tr> + <td>progressbar</td> + <td>Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs <code>aria-valuemin</code>, <code>aria-valuenow</code> et <code>aria-valuemax</code>. (TBD : Ajouter plus d’informations pour cet élément).</td> + <td> </td> + </tr> + <tr> + <td>marquee</td> + <td>Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique.</td> + <td> </td> + </tr> + <tr> + <td>timer</td> + <td>Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre.</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zones_«_live_»_avancées">Zones « live » avancées</h2> + +<p>(TBD : Qu'est-ce qui est pris en charge par qui ?)</p> + +<p>Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML).</p> + +<p>The Paciello Group propose des <a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">informations sur l'état du support des zones "Live"</a>(2014). Paul Jadam s'est intéressé plus particulièrement au <a href="http://pauljadam.com/demos/aria-atomic-relevant.html">support des attributs aria-atomic and aria-relevant</a>.</p> + +<dl> + <dt>aria-atomic :</dt> + <dd>L’attribut <code>aria-atomic=BOOLÉEN</code> est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont <code>false</code>/<code>true</code>. La valeur par défaut est <code>false</code>.</dd> + <dt>aria-relevant :</dt> + <dd>L’attribut <code>aria-relevant=[LISTE_DES_CHANGEMENTS]</code> est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont <code>additions</code> (addition)/<code>removals</code> (suppression)/<code>text</code> (texte)/<code>all</code> (tous). La valeur par défaut est « <code>additions text</code>. »</dd> + <dt>aria-labelledby :</dt> + <dd>L’attribut <code>aria-labelledby=[LISTE_ID]</code> est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'<code>aria-controls</code> mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace.</dd> + <dt>aria-describedby :</dt> + <dd>L’attribut <code>aria-describedby=[LISTE_ID]</code> est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'<code>aria-controls </code>mais les références d'id pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace.</dd> +</dl> + +<h3 id="Cas_d’étude_avancé_liste_de_contacts"><span class="mw-headline" id="Use_Case:_Roster">Cas d’étude avancé : liste</span> de contacts</h3> + +<p>Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page).</p> + +<pre class="language-html"><ul id="roster" aria-live="polite" aria-relevant="additions removals"> + <!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs--> +</ul> +</pre> + +<h4 id="Détails_des_propriétés_«_live_»_d’ARIA">Détails des propriétés « live » d’ARIA :</h4> + +<ul> + <li>L’attribut <code>aria-live="polite"</code> indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur <code>assertive</code> briserait son flux de lecture.</li> + <li>L’attribut <code>aria-atomic</code> n’est pas défini (<code>false</code> par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour.</li> + <li>L’attribut <code>aria-relevant="additions removals"</code> assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus.</li> +</ul> + +<p>TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".</p> diff --git a/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html new file mode 100644 index 0000000000..322f6defcb --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html @@ -0,0 +1,30 @@ +--- +title: Modèle Technique ARIA +slug: Accessibilité/ARIA/Techniques_ARIA/Modele_Technique_ARIA +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template +--- +<div> + <div> + <h3 id="Description">Description</h3> + <p> </p> + <h3 id="Effets_possibles_sur_les_agents_utilisateur_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateur et les technologies d’assistance </h3> + <p> </p> + <div class="note"> + <strong>Note :</strong> les opinions diffèrent sur la façon dont les technologies d’assistance devraient traiter ces techniques. Les informations fournies ci-dessus sont une de ces opinions et ne sont en aucune manière normatives.</div> + <h3 id="Exemples">Exemples</h3> + <h4 id="Exemple_1">Exemple 1 : </h4> + <p> </p> + <pre class="brush: html">Code </pre> + <h4 id="Exemples_fonctionnels">Exemples fonctionnels :</h4> + <h3 id="Notes">Notes </h3> + <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + <h3 id="Techniques_ARIA_associées">Techniques ARIA associées </h3> + <h3 id="Compatibilité">Compatibilité</h3> + <p class="commentaire">TBD : Ajouter les informations de prise en charge des combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance</p> + <h3 id="Autres_ressources">Autres ressources</h3> + </div> +</div> +<p> </p> diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.html b/files/fr/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..b6398235ba --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,118 @@ +--- +title: Techniques ARIA +slug: Accessibilité/ARIA/Techniques_ARIA +tags: + - ARIA + - Accessibilité + - Attributs + - Rôles +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +<h3 id="Rôles">Rôles</h3> +<h4 id="Rôles_de_composant_d’interface">Rôles de composant d’interface</h4> +<ul> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert" title="Utiliser le rôle alert">Alert</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog" title="Utiliser le rôle alertdialog">Alertdialog</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button" title="Utiliser le rôle button">Button</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox" title="Utiliser le rôle checkbox">Checkbox</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_dialog" title="Utiliser le rôle dialog">Dialog</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link" title="Utiliser le rôle link">Link</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log" title="Utiliser le rôle log">Log</a></li> + <li>Marquee</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar" title="Utiliser le rôle progressbar">Progressbar</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio" title="Utiliser le rôle radio">Radio</a></li> + <li>Scrollbar</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider" title="Utiliser le rôle slider">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status" title="Utiliser le rôle link">status</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox" title="Utiliser le rôle textbox">textbox</a></li> + <li>Timer</li> + <li>Tooltip</li> +</ul> +<h4 id="Rôles_composés">Rôles composés</h4> +<p>Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.</p> +<ul> + <li>Grid (tableau, contenant les rôles <code>row</code> (ligne), <code>gridcell</code> (cellule), <code>rowheader</code> (en-tête de ligne) et <code>columnheader</code> (en-tête de colonne))</li> + <li>Menubar / Menu (contenant les rôles <code>menuitem</code>, <code>menuitemcheckbox</code> et <code>menuitemradio</code>)</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox" title="Utiliser le rôle listbox">Listbox</a> (boîte de liste, contenant le rôle <code>option</code>)</li> + <li>Tablist (boîte à onglets, contenant les rôles <code>tab</code> et <code>tabpanel</code>)</li> + <li>Tree (arbre, contenant les rôles <code>group</code> et <code>treeitem</code>)</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio" title="Utiliser le rôle radio">Radiogroup (voir le rôle <code>Radio</code>)</a></li> + <li>Treegrid</li> +</ul> +<h4 id="Rôles_de_structure_de_document">Rôles de structure de document</h4> +<ul> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_article" title="Utiliser le rôle article">Article</a></li> + <li>Definition</li> + <li>Directory</li> + <li>Document</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group" title="Utiliser le rôle group">Group</a></li> + <li>Heading</li> + <li>Img</li> + <li>List, listitem</li> + <li>Math</li> + <li>Note</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation" title="Utiliser le rôle presentation">Presentation</a></li> + <li>Region</li> + <li>Separator</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar" title="Utiliser le rôle toolbar">Toolbar</a></li> +</ul> +<h4 id="Rôles_de_points_de_repère">Rôles de points de repère</h4> +<ul> + <li>Application</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner" title="Utiliser le rôle banner">Banner</a></li> + <li>Complementary</li> + <li>Contentinfo</li> + <li>Form</li> + <li>Main</li> + <li>Navigation</li> + <li>Search</li> +</ul> +<h3 id="États_et_propriétés">États et propriétés</h3> +<h4 id="Attributs_de_composants_d’interface">Attributs de composants d’interface</h4> +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-disabled</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid" title="Utiliser l’attribut aria-invalid">aria-invalid</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="Utiliser l’attribut aria-labelledby">aria-label</a></li> + <li>aria-level</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation" title="Utiliser l’attribut aria-orientation">aria-orientation</a></li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required" title="Utiliser l’attribut aria-required">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-required">aria-valuemax</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin">aria-valuemin</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-valuenow">aria-valuenow</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-valuetext">aria-valuetext</a></li> +</ul> +<h4 id="Attributs_de_zones_«_live_»">Attributs de zones « live »</h4> +<ul> + <li>aria-live</li> + <li>aria-relevant</li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> +<h4 id="Attributs_de_glisser-déposer">Attributs de glisser-déposer</h4> +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> +<h4 id="Attributs_de_relation">Attributs de relation</h4> +<ul> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-activedescendant" title="Utiliser l’attribut aria-activedescendant">aria-activedescendant</a></li> + <li>aria-controls</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Utiliser l’attribut aria-labelledby">aria-describedby</a></li> + <li>aria-flowto</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-setsize</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html new file mode 100644 index 0000000000..990d7dff4a --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -0,0 +1,134 @@ +--- +title: Utilisation du rôle alert +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>alert</code> est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle <code>alert</code> est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si :</p> + +<ul> + <li>Une valeur non valide a été saisie dans un champ de formulaire ;</li> + <li>La session d’un utilisateur est sur le point d’expirer ;</li> + <li>La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées.</li> +</ul> + +<p>De fait de sa nature intrusive, le rôle <code>alert</code> doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que <code>aria-live="polite"</code> ou autres rôles de zone live.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque le rôle <code>alert</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ;</li> + <li>Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> + +<p>Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence :</p> + +<ul> + <li>Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ;</li> + <li>Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte.</li> +</ul> + +<div class="note"><strong>Note :</strong> plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Ajout_du_rôle_dans_le_code_HTML">Exemple 1 : Ajout du rôle dans le code HTML</h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>alert</code> est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page.</p> + +<pre class="brush: html"><h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2> +</pre> + +<h4 id="Exemple_2_Ajout_dynamique_d'un_élément_avec_le_rôle_alert">Exemple 2 : Ajout dynamique d'un élément avec le rôle <code>alert</code></h4> + +<p>Cet extrait de code crée dynamiquement un élément avec un rôle <code>alert</code> et l’ajoute à la structure du document.</p> + +<pre class="brush: js">var myAlert = document.createElement("p"); +myAlert.setAttribute("role", "alert"); + +var myAlertText = document.createTextNode("Vous devez accepter nos conditions d’utilisation pour créer un compte."); +myAlert.appendChild(myAlertText); +document.body.appendChild(myAlertText); +</pre> + +<p><strong>Note :</strong> le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que <em>jQuery</em> :</p> + +<pre class="brush: js">$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body); +</pre> + +<h4 id="Exemple_3_Ajout_d'un_rôle_alert_à_un_élément_existant">Exemple 3 : Ajout d'un rôle <code>alert</code> à un élément existant</h4> + +<p>Parfois, il peut être utile d’ajouter un rôle <code>alert</code> à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, <code>role="alert"</code> peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche :</p> + +<pre class="brush: html"><p id="formInstruction">Vous devez cocher au moins trois options</p> +</pre> + +<pre class="brush: js">// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées : +document.getElementById("formInstruction").setAttribute("role", "alert");</pre> + +<h4 id="Exemple_4_Rendre_visible_un_élément_avec_le_rôle_alert">Exemple 4 : Rendre visible un élément avec le rôle <code>alert</code></h4> + +<p>Si un élément possède déjà <code>role="alert"</code> et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois.</p> + +<p><strong>Note :</strong> dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème.</p> + +<pre class="brush: css">.hidden { + display:none; + } +</pre> + +<pre class="brush: html"><p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p> +</pre> + +<pre class="brush: js">// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran : +document.getElementById("expirationWarning").className = ""; </pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/example/1/" hreflang="en">Exemple de rôle d’alerte utilisant une boîte d’alerte ARIA (en)</a> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" hreflang="en" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemple d’alerte utilisant une boîte de dialogue d’alerte ARIA modal (en)</a>.</li> +</ul> + +<h3 id="Notes">Notes </h3> + +<ul> + <li>L’utilisation du rôle <code>alert</code> sur un élément implique que cet élément a l’attribut <code>aria-live="assertive"</code> ;</li> + <li>Le rôle <code>alert</code> ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle <code>alert</code> ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ;</li> + <li>Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton <code>OK</code> pour annuler l’alerte – le rôle <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog"><code>alertdialog</code></a> est préférable.</li> +</ul> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert">alert (en)</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog">Utiliser le rôle <code>alertdialog</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid" title="Utiliser la propriété aria-invalid">Utiliser la propriété <code>aria-invalid</code></a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li>Guide des bonnes pratiques ARIA - Rôle <code>Alert</code> : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert (en)</a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html new file mode 100644 index 0000000000..0894b30460 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html @@ -0,0 +1,85 @@ +--- +title: Utilisation du rôle alertdialog +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog +tags: + - ARIA + - Accessibilité + - Développement Web + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog" title="WAI-ARIA Roles #alertdialog">alertdialog</a></code> role.</p> +</div> + +<p>Le rôle <code>alertdialog</code> est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, <code>alertdialog</code> est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role" title="Utiliser le rôle dialog">utilisation du rôle <code>dialog</code></a> s’appliquent également au rôle <code>alertdialog</code> :</p> + +<ul> + <li>La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de <code>aria-labelledby</code> ou de <code>aria-label</code>) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut <code>aria-describedby</code>).</li> + <li>Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue.</li> + <li>L’ordre de tabulation dans la boite de dialogue de l’alerte doit boucler.</li> +</ul> + +<p>La différence avec les boîtes de dialogues classiques réside dans le fait que le rôle <code>alertdialog</code> devrait uniquement être utilisé lorsque des alertes, des erreurs ou des avertissements ont lieu. En d’autres termes, lorsque les informations et les contrôles d’une boîte de dialogue nécessitent l’attention immédiate de l’utilisateur il est préférable d’utiliser le rôle <code>alertdialog</code> plutôt que <code>dialog.</code> Il revient au développeur de faire la distinction entre les deux.</p> + +<p>Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.</p> + +<div class="note"><strong>Note :</strong> ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, <code>alertdialog</code> n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle <code>alert</code> est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert" title="Utiliser le rôle alert">utilisation du rôle <code>alert</code></a>).</div> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque le rôle <code>alertdialog</code> est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation.</li> + <li>Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> + +<p>Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.</p> + +<p>Lorsque la boîte de dialogue est correctement labélisée et que le focus se place sur un contrôle qu’elle contient, les lecteurs d’écran devraient annoncer le rôle accessible de la boîte de dialogue, son nom et éventuellement sa description, avant d’annoncer l’élément qui a reçu le focus.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Une_boîte_de_dialogue_d’alerte">Exemple 1 : Une boîte de dialogue d’alerte</h4> + +<p>L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton <code>OK</code>.</p> + +<pre class="brush: html"><div role="alertdialog" aria-labelledby="dialog1Titre" aria-describedby="dialog1Desc"> + <div role="document" tabindex="0"> + <h2 id="dialog1Titre">Votre session est sur le point d’expirer</h2> + <p id="dialog1Desc">Pour prolonger votre session, cliquez sur le bouton OK</p> + <button>OK</button> + </div> +</div></pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<p>À définir</p> + +<h3 id="Notes">Notes</h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a> ;</li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="States and Properties #aria-labelledby">aria-labelledby</a> ;</li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="States and Properties #aria-describedby">aria-describedby</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog" title="Utiliser le rôle dialog">Utiliser le rôle <code>dialog</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Utiliser le rôle alert">Utiliser le rôle <code>alert</code></a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html new file mode 100644 index 0000000000..44e25b657f --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -0,0 +1,89 @@ +--- +title: Utiliser l’attribut aria-describedby +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a>.</p> +</div> + +<p>L’attribut <code>aria-describedby</code> est utilisé pour indiquer l’identifiant des éléments qui décrivent l’objet. Il est utilisé pour établir une relation entre des composants ou des groupes et un texte les décrivant. Il est similaire à <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a> : un label décrit la nature d’un objet, tandis qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p> + +<p>L’attribut <code>aria-describedby</code> n’est pas uniquement utilisé pour des éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.</p> + +<p>Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Une liste d’ID d’éléments séparés par des espaces</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Descriptions_des_points_de_repère_d’une_application">Exemple 1 : Descriptions des points de repère d’une application</h4> + +<p>Dans l’exemple ci-dessous, un paragraphe d’introduction décrit une application de calendrier. <code>aria-describedby</code> est utilisé pour associer le paragraphe avec le conteneur de l’application.</p> + +<pre class="brush: html"><div role="applicaton" aria-labelledby="calendar" aria-describedby="info"> + <h1 id="calendar">Calendrier<h1> + <p id="info"> + Ce calendrier affiche les prévisions de match du Racing Métro. + </p> + <div role="grid"> + … + </div> +</div> +</pre> + +<h4 id="Exemple_2_Un_bouton_de_fermeture">Exemple 2 : Un bouton de fermeture</h4> + +<p>Dans l’exemple ci-dessous, un lien qui fonctionne comme le bouton <code>Fermer</code> d’une boîte de dialogue, est décrit ailleurs dans le document. L’attribut <code>aria-describedby</code> est utilisé pour associer la description au lien.</p> + +<pre class="brush: html"><button aria-label="Fermer" aria-describedby="descriptionClose" + onclick="myDialog.close()">X</button> +… + +<div id="descriptionClose">La fermeture de cette fenêtre entraînera la perte des informations saisies et vous renverra vers la page principale</div> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/" title="checkbox1/">Exemple de case à cocher</a> utilisant <code>aria-describedby</code> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="tooltip1/">Exemple d’infobulle</a> utilisant <code>aria-describedby</code>.</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>L’attribut <code>aria-describedby</code> n’est pas destiné à référencer les descriptions d’une ressource externe – comme c’est un ID, il doit référencer un élément du même document DOM.</li> +</ul> + +<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> + +<p>Tous les éléments de balisage de base.</p> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l’attribut <code>aria-labelledby</code></a></li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">Spécification WAI-ARIA de aria-describedby</a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html new file mode 100644 index 0000000000..63ff4fc91c --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html @@ -0,0 +1,125 @@ +--- +title: Utiliser l'attribut aria-invalid +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid" title="States and Properties #aria-invalid"><code>aria-invalid</code></a>.</p> +</div> + +<p>L’attribut <code>aria-invalid</code> est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. <code>aria-invalid</code> peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation.</p> + +<p>Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un <code>rôle</code> ARIA.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<h4 id="Vocabulaire">Vocabulaire</h4> + +<dl> + <dt><code>false</code> (défaut)</dt> + <dd>Aucune erreur détectée</dd> + <dt><code>grammar</code></dt> + <dd>Une faute de grammaire a été détectée.</dd> + <dt><code>spelling</code></dt> + <dd>Une faute d’orthographe a été détectée.</dd> + <dt><code>true</code></dt> + <dd>La valeur n’a pas passé la validation.</dd> +</dl> + +<p>Toute valeur absente de ce vocabulaire devrait être traitée comme <code>true</code>.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n’est pas valide. Les développeurs d’applications devraient fournir des suggestions pour la correction du problème, lorsque c’est possible. Les auteurs devraient empêcher la soumission de formulaires contenant des erreurs.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournit ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_validation_d’un_formulaire_de_base">Exemple 1 : validation d’un formulaire de base</h4> + +<p>L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de <code>aria-required</code> étant <code>false</code>, il n’est pas strictement nécessaire d’ajouter à entrer.</p> + +<pre class="brush: html"><input name="nom" id="nom" aria-required="true" aria-invalid="false" + onblur="checkValidity('nom', ' ', 'Le nom saisi n’est pas valide (vous devez saisir un nom et un prénom)');"/> +<br /> +<input name="courriel" id="courriel" aria-required="true" aria-invalid="false" + onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/> +</pre> + +<p>Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé).</p> + +<p>L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) :</p> + +<pre class="brush: js">function checkValidity(aID, aSearchTerm, aMsg){ + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + updateAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + updateAlert(); + } +} +</pre> + +<p>L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :</p> + +<pre class="brush: js">function updateAlert(msg) { + var oldAlert = document.getElementById("alert"); + if (oldAlert) { + document.body.removeChild(oldAlert); + } + + if (msg) { + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var content = document.createTextNode(msg); + newAlert.appendChild(content); + document.body.appendChild(newAlert); + } +} +</pre> + +<p>Remarquez que le <code>rôle</code> ARIA de l’alerte est définit comme étant <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Using the alert role"><code>"alert"</code></a>.</p> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<p><a class="external" href="http://www.oaa-accessibility.org/examplep/alert1/" title="http://www.oaa-accessibility.org/examplep/alert1/">Exemple de <code>role</code> d’alerte</a> (utilisant l’attribut <code>aria-invalid</code>).</p> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>Lorsque <code>aria-invalid</code> est utilisé en conjonction avec l’attribut <code>aria-required</code>, <code>aria-invalid</code> <strong>ne devrait pas</strong> être défini à <code>true</code> avant la soumission du formulaire – uniquement en réponse à la validation.</li> + <li>Les développements futurs pourraient ajouter des termes au vocabulaire utilisé pour cet attribut. Toute valeur absente du vocabulaire actuel devrait être traitée comme <code>true</code>.</li> +</ul> + +<h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3> + +<p>Tous les éléments de balisage de base.</p> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required" title="Using the aria-required property">Utiliser l’attribut <code>aria-required</code></a></li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Utiliser le rôle alert">Utiliser le rôle <code>alert</code></a></li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid" title="States and Properties #aria-invalid">Spécification WAI-ARIA de la propriété <code>aria-invalid</code></a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI Authoring Practices for forms</a> (Règles WAI de création de formulaires)</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..81fdf2ae5b --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,74 @@ +--- +title: Utiliser l'attribut aria-label +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label +tags: + - ARIA + - Accessibilité + - Attribut + - aria-label +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +<p>L’attribut <code>aria-label</code> est utilisé pour définir une légende non-visible associée à un élément HTML dont le sens est transmis uniquement par le visuel. Par exemple, une croix pour fermer une fenêtre modale.</p> + +<h2 id="Contexte">Contexte</h2> + +<p>Pour la plupart des usagers, le contexte et l'apparence d'un élément suffisent à déterminer son rôle. Par exemple, une croix pour fermer une fenêtre modale ou une icône de hamburger pour ouvrir un menu.</p> + +<p>En revanche, certains usagers tels que les aveugles et malvoyants ne peuvent pas faire de même. Cet attribut permet aux développeurs d'indiquer une alternative textuelle à ces contrôles visuels, qui sera lue par les technologies d'assistance. En revanche, le contenu de l'attribut <code>aria-label</code> ne sera pas visible pour les autres usagers.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<p>Les lecteurs d'écran lisent le contenu textuel de cet attribut.</p> + +<h2 id="Usage">Usage</h2> + +<p>L’attribut <code>aria-label</code> ne doit être utilisé que lorsque le texte d’un label <em>n’est pas</em> visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a>.</p> + +<p>Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément <code><label></code> pour les éléments de formulaire, ou l'attribut <code>alt</code> pour les images.</p> + +<h3 id="Valeur">Valeur</h3> + +<div class="textbody"> +<p>Une légende sous forme de chaîne de caractère.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_bouton_sans_contenu_textuel_explicite">Un bouton sans contenu textuel explicite</h3> + +<p>Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « <em>Fermer</em> » classique, avec un <code>X</code> en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut <code>aria-label</code> est utilisé pour fournir un label aux technologies d’assistance.</p> + +<pre class="brush: html"> <button aria-label="Fermer" onclick="myDialog.close()">X</button> +</pre> + +<h3 id="Un_champ_de_saisie_utilisant_contentEditable">Un champ de saisie utilisant contentEditable</h3> + +<p>Pour proposer une expérience d'édition plus personnalisée, on pourrait utiliser une <code>div</code> avec l'attribut <code>contenteditable</code> à la place d'un élément de formulaire natif comme <code><textarea></code>. Cette situation ne permettrait pas d'associer un <code><label></code> à ce champ de saisie. Ainsi on pourrait utiliser <code>aria-label</code> à la place.</p> + +<h2 id="Pour_aller_plus_loin">Pour aller plus loin</h2> + +<h3 id="Notes">Notes</h3> + +<p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p> + +<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> + +<p>Tous les éléments de balisage de base.</p> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">Utiliser l’attribut <code>aria-labelledby</code></a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="States and Properties #aria-label">Spécification WAI-ARIA pour aria-label</a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..34eac612ab --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,160 @@ +--- +title: Utiliser l'attribut aria-labelledby +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</p> +</div> + +<p>L’attribut <code>aria-labelledby</code> est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran.</p> + +<p><code>aria-labelledby</code> est très similaire à l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Using_the_aria-describedby_attribute">aria-describedby</a> : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p> + +<p>L’attribut <code>aria-labelledby</code> n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.</p> + +<p>L’attribut <code>aria-labelledby</code> peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut <code>for</code>) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA.</p> + +<p>Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Une liste d’ID d’éléments séparés par des espaces</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque les deux attributs <code>aria-labelledby</code> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_aria-label_attribute" title="Using the aria-labelledby attribute"><code>aria-label</code></a> sont utilisés, les agents utilisateurs donnent la priorité à <code>aria-labelledby</code> lors du calcul de la propriété de nom accessible.</p> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Labels_multiples">Exemple 1 : Labels multiples</h4> + +<p>Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe :</p> + +<pre class="brush: html notranslate"><div id="facturation">Facturation</div> + +<div> + <div id="nom">Nom</div> + + <input type="text" aria-labelledby="nom facturation"/> +</div> + +<div> + <div id="adresse">Adresse</div> + + <input type="text" aria-labelledby="adresse facturation"/> +</div> +</pre> + +<h4 id="Exemple_2_Association_de_titres_et_de_zones">Exemple 2 : Association de titres et de zones</h4> + +<p>Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui <em>contient</em> l’en-tête.</p> + +<pre class="brush: html notranslate"><div role="main" aria-labelledby="foo"> + <h1 id="foo">Le feu devenu incontrôlable gagne les abords d’Aubagne</h1> + Un fort mistral a propagé le feu de forêt qui s’est déclaré ce lundi soir suite aux fortes températures de ces derniers jours… +</div> +</pre> + +<h4 id="Exemple_3_Groupes_de_boutons_radio">Exemple 3 : Groupes de boutons radio</h4> + +<p>Dans l’exemple ci-dessous, le conteneur d’un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup" title="Utiliser le rôle radiogroup">radiogroup</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> + +<pre class="brush: html notranslate"><div id="radio_label">My radio label</div> + +<ul role="radiogroup" aria-labelledby="radio_label"> + <li role="radio">Élément №1</li> + <li role="radio">Élément №2</li> + <li role="radio">Élément №3</li> +</ul> +</pre> + +<h4 id="Exemple_4_Titre_de_boite_de_dialogue">Exemple 4 : Titre de boite de dialogue</h4> + +<p>Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut <code>aria-labelledby</code> :</p> + +<pre class="brush: html notranslate"><div role="dialog" aria-labelledby="titreDialogue"> + <h2 id="titreDialogue">Choisir un fichier</h2> + … Contenus de la boîte de dialogue +</div> +</pre> + +<h4 id="Exemple_5_Définition_intégrée">Exemple 5 : Définition intégrée</h4> + +<p>Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut <strong>aria-labelledby</strong>:</p> + +<pre class="brush: html notranslate"><p>Le docteur expliqua que c’était un <dfn id="placebo">placebo</dfn>, <span role="definition" aria-labelledby="placebo"> ou +une préparation inerte prescrite plus pour le soulagement mental du patient que ses effets possible sur une pathologie.</span> +</p> +</pre> + +<h4 id="Exemple_6_Listes_de_définitions">Exemple 6 : Listes de définitions</h4> + +<p>Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut <code>aria-labelledby</code> :</p> + +<pre class="brush: html notranslate"><dl> + <dt id="anatheme">anathème</dt> + <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique + et accompagnée de l’excommunication</dd> + <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse&nbsp;: condamnation</dd> + + <dt id="homelie">homélie</dt> + <dd role="definition" aria-labelledby="homelie">généralement un sermon court</dd> + <dd role="definition" aria-labelledby="homelie">une lecture ou un discours sur un thème moral</dd> + +</dl> +</pre> + +<h4 id="Exemple_7_Menus">Exemple 7 : Menus</h4> + +<p>Dans l’exemple ci-dessous, un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup" title="Utiliser l’attribut aria-haspopup">menu contextuel</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> + +<pre class="brush: html notranslate"><div role="menubar"> + <div role="menuitem" aria-haspopup="true" id="fichierMenu">Fichier</div> + <div role="menu" aria-labelledby="fichierMenu"> + <div role="menuitem">Ouvrir</div> + <div role="menuitem">Enregistrer</div> + <div role="menuitem">Enregistrer sous…</div> + … + </div> +… +</div> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Exemple de bouton</a> utilisant <code>aria-labelledby</code> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Exemple de boite combinée</a> utilisant <code>aria-labelledby</code>.</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p> + +<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> + +<p>Tous les éléments de balisage de base.</p> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="Utiliser l’attribut aria-label">Utiliser l’attribut <code>aria-label</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Utiliser l’attribut aria-describedby">Utiliser l’attribut <code>aria-describedby</code></a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">Spécification WAI-ARIA pour aria-labelledby</a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html new file mode 100644 index 0000000000..289379c098 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html @@ -0,0 +1,75 @@ +--- +title: Utiliser l'attribut aria-orientation +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation" title="States and Properties #aria-orientation">aria-orientation</a>.</p> +</div> + +<p>L’attribut <code>aria-orientation</code> est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Vocabulaire</p> + +<dl> + <dt>vertical</dt> + <dd>L’élément est orienté verticalement.</dd> + <dt>horizontal (défaut)</dt> + <dd>L’élément est orienté horizontalement.</dd> +</dl> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 :</h4> + +<p>L’extrait de code ci-dessous présente un curseur simple orienté verticalement.</p> + +<pre class="brush: html"><a href="#" id="handle_zoomSlider" + role="slider" + aria-orientation="vertical" + aria-valuemin="0" + aria-valuemax="17" + aria-valuenow="14" > + <span>11</span> +</a> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a>.</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> + +<ul> + <li>scrollbar ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role" title="Utiliser le rôle slider">slider</a> ;</li> + <li>separator.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation" title="States and Properties #aria-orientation">Spécification WAI-ARIA pour l’attribut <code>aria-orientation</code></a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html new file mode 100644 index 0000000000..2354a7be55 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html @@ -0,0 +1,30 @@ +--- +title: Utiliser l'attribut aria-relevant +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute +--- +<p><span class="seoSummary">L’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">aria-relevant</a> est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a>, ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut <code>aria-live</code> n’était pas activé.</span></p> + +<p>L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :</p> + +<ul> + <li>« additions » L’insertion de noeuds au sein de la région live doit être considérée comme pertinente</li> + <li>« removals » La suppression de noeuds doit être considérée comme pertinente</li> + <li>« text » Des changements apportés au contenu texte de noeuds existants doivent être considérés comme pertinents</li> + <li>« all » Equivalent à « additions removals text »</li> +</ul> + +<p><code>aria-relevant="additions text"</code> est la valeur par défaut d’une région live.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant" title="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">Spécification WAI-ARIA pour aria-relevant</a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..79bbf0d0ed --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,82 @@ +--- +title: Utiliser l'attribut aria-required +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="States and Properties #aria-required"><code>aria-required</code></a>.</p> +</div> + +<p>L’attribut <code>aria-required</code> est utilisé pour indiquer que l’utilisateur doit obligatoirement remplir un champ de formulaire avant de le soumettre. Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML ; il n’est pas limité aux éléments auxquels a été assigné un <code>rôle</code> ARIA.</p> + +<p>{{ HTMLVersionInline("5") }} a introduit l’attribut <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributes" title="Liste des attributs HTML"><code>required</code></a>, mais <code>aria-required</code> est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p><code>true</code> ou <code>false</code> (Valeur par défaut : <code>false</code>)</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.</p> + +<p>Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_un_formulaire_simple">Exemple 1 : un formulaire simple</h4> + +<pre class="brush: html"><form action="post"> + <label for="prenom">Prénom&nbsp;:</label> + <input id="prenom" type="text" aria-required="true"> + <br/> + <label for="nom">Nom&nbsp;:</label> + <input id="nom" type="text" aria-required="true"> + <br/> + <label for="adresse">Adresse&nbsp;:</label> + <input id="adresse" type="text"> +</form> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemple d’infobulle</a> (comprenant l’utilisation de l’attribut <code>aria-required</code>).</p> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3> + +<ul> + <li>Combobox ;</li> + <li>Gridcell ;</li> + <li>Listbox ;</li> + <li>Radiogroup ;</li> + <li>Spinbutton ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox" title="Utiliser le rôle textbox">Textbox</a> ;</li> + <li>Tree.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid" title="Utiliser l’attribut aria-invalid">Utiliser l’attribut <code>aria-invalid</code></a></li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="States and Properties #aria-required">Spécification WAI-ARIA pour <code>aria-required</code></a> ;</li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="Pratiques WAI-ARIA #ariaform">WAI-ARIA Authoring Practices for forms</a> (Règles WAI-ARIA de création de formulaires) ;</li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="Validation de condition">Validation de condition</a> en {{ HTMLVersionInline("5") }}.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html new file mode 100644 index 0000000000..dfcacb5ea1 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html @@ -0,0 +1,74 @@ +--- +title: Utiliser l'attribut aria-valuemax +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax" rel="external" title="States and Properties #aria-valuemax">aria-valuemax</a>.</p> +</div> + +<p>L’attribut <code>aria-valuemax</code> est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using the aria-valuemin attribute"><code>aria-valuenow</code></a> a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de <code>aria-valuemax</code> et <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a>. La valeur de <code>aria-valuemax</code> <strong class="rfc2119">DOIT</strong> être supérieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a>.</p> + +<p><code>aria-valuemax</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Représentation d’un nombre par une chaîne</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Si la valeur <code>aria-valuemax</code> n’est pas déterminée, ou si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1:</h4> + +<p>L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.</p> + +<pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a>.</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisés_avec_les_rôles_ARIA">Utilisés avec les rôles ARIA</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin">aria-valuemin</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-label">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-required">aria-valuetext</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax" title="States and Properties #aria-valuemax">Spécification WAI-ARIA pour l’attribut <code>aria-valuemax</code></a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html new file mode 100644 index 0000000000..55e3dc2d4c --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html @@ -0,0 +1,70 @@ +--- +title: Utiliser l'attribut aria-valuemin +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute +--- +<h3 id="Description">Description</h3> + +<p>L’attribut <code>aria-valuemin</code> est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> et <code>aria-valuemin</code>. La valeur de <code>aria-valuemin</code> <strong class="rfc2119">DOIT</strong> être inférieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a>.</p> + +<p><code>aria-valuemin</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Représentation d’un nombre sous forme d'une chaîne</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 :</h4> + +<p>L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.</p> + +<pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a>.</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-valuemax">aria-valuemax</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-label">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-required">aria-valuetext</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin" title="States and Properties #aria-valuemin">Spécification WAI-ARIA pour l’attribut <code>aria-valuemin</code></a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html new file mode 100644 index 0000000000..15f5e46588 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html @@ -0,0 +1,78 @@ +--- +title: Utiliser l'attribut aria-valuenow +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation de l'attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">aria-valuenow</a>.</p> +</div> + +<p>L’attribut <code>aria-valuenow</code> est utilisé pour définir la valeur courante de l’intervalle d’un composant tel qu’un <code>slider</code>, <code>spinbutton</code> ou une <code> progressbar</code>. Si la valeur courante n'est pas connue, le développeur ne devrait pas définir l’attribut <code>aria-valuenow</code>. Si <code>aria-valuenow</code> a des valeurs minimale et maximale connues, le développeur devrait définir les attributs <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin"><code>aria-valuemin</code></a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-valuemax"><code>aria-valuemax</code></a>.</p> + +<p>Lorsque la valeur retournée ne peut être précisément représentée par une nombre, les développeurs <strong class="rfc2119">DEVRAIENT</strong> utiliser l’attribut <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l‘attribut aria-valuetext"><code>aria-valuetext</code></a> en conjonction avec <code>aria-valuenow</code> pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme <code>petite</code>, <code>moyenne</code> et <code>grande</code>. Dans ce cas, les valeurs de <code>aria-valuenow</code> peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-valuetext"><code>aria-valuetext</code></a> sera l’une des chaînes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p> + +<p>L’attribut <code>aria-valuenow</code> est <strong>obligatoire</strong> pour les rôles <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Représentation d’un nombre par une chaîne</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Pour les éléments possédant les rôles <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar"><code>progressbar</code></a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar"><code>scrollbar</code></a>, les technologies d’assistance <strong>DEVRAIENT</strong> renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a> et <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> si les deux sont définies, sinon la valeur actuelle avec un pourcentage.</p> + +<p>Pour les éléments possédant les rôles <a class="role-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Using_the_slider_role"><code>slider</code></a> et <a class="role-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton"><code>spinbutton</code></a>, les technologies d’assistance <strong class="rfc2119">DEVRAIENT</strong> retourner la valeur courante à l’utilisateur.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 :</h4> + +<p>L’extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.</p> + +<pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a></li> +</ul> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> + +<ul> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li> + <li>scrollbar</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li> + <li>spinbutton.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Using the aria-required attribute">aria-valuetext</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">Spécification WAI-ARIA pour l’attribut <code>aria-valuenow</code></a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html new file mode 100644 index 0000000000..a328cb3066 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser l'attribut aria-valuetext +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute +--- +<h3 id="Description">Description</h3> + +<p>L’attribut <code>aria-valuetext</code> est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-valuenow"><code>aria-valuenow</code></a> d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>.</p> + +<p>Les développeurs <strong class="rfc2119">DEVRAIENT</strong> uniquement définir l’attribut <code>aria-valuetext</code> lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.</p> + +<p>Par exemple, dans le cas d'un curseur qui peut retourner les valeurs <code>petite</code>, <code>moyenne</code>et <code>grand</code>, les valeurs de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de <code>aria-valuetext</code> sera l'une des chaînes suivantes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Représentation d’un nombre sous forme d'une chaîne</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Si l’attribut <code>aria-valuetext</code> est absent, les technologies d’assistance compteront uniquement sur l’attribut <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> pour la valeur courante. Si <code>aria-valuetext</code> est spécifié, les technologies d’assistance <strong class="rfc2119">DEVRAIENT</strong> retourner cette valeur plutôt que celle de <code>aria-valuenow</code>.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 :</h4> + +<p>L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut <code>aria-valuetext</code> est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement <code>aria-valuetext</code> selon la valeur de <code>aria-valuenow</code>.</p> + +<pre class="brush: html"><div role="slider" aria-valuenow="1" + aria-valuemin="1" aria-valuemax="7" + aria-valuetext="Dimanche"> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Using_the_progressbar_role">progressbar</a> ;</li> + <li>scrollbar ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Using the slider role">slider</a></li> + <li>spinbutton.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute">aria-valuenow</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">Spécification WAI-ARIA pour l’attribut <code>aria-valuetext</code></a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html new file mode 100644 index 0000000000..083051aa61 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser le rôle article +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#article" rel="external" title="Roles article"><code>article</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>article</code> est utilisé pour identifier une section de page qui forme une partie indépendante d'un document, d'une page ou d'un site. Les exemples d'article peuvent être des billets de blogs ou des articles d'un magazine ou d'un journal ou encore les commentaires soumis par les utilisateurs. Ils sont <em>indépendants</em> dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.</p> + +<p>Les articles peuvent être imbriqués. Par exemple, une entrée de blog sur un site acceptant les commentaires des visiteurs pourrait représenter ces commentaires comme des articles incluent dans l'article de l'entrée de blog.</p> + +<p>Le rôle ARIA <code>article</code> est similaire à l'élément {{ HTMLVersionInline("5") }} {{ HTMLElement("article") }}. Cependant l'élément {{ HTMLElement("article") }} devrait toujours recevoir le rôle ARIA <code>article</code> car toutes les technologies d'assistance ne prennent pas encore en charge HTML5.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque l'utilisateur navigue dans un élément ayant le rôle <code>article</code>, les technologies d'assistance qui interceptent généralement les événements clavier standards <strong class="rfc2119">doivent</strong> basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.</p> + +<p>Les technologies d'assistance <strong class="rfc2119">doivent</strong> fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments <code>article</code> imbriqués.</p> + +<div class="note"><strong>Note:</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Utilisation_du_role_article_sans_élément_article">Utilisation du role article sans élément article :</h4> + +<pre class="brush: html"><div role="article"> + + <h1>Une titre de billet de blog</h1> + <p>contenu du billet...</p> + + <div class="comments"> + <div role="article"> + <p>Un premier commentaire</p> + </div> + <div role="article"> + <p>Un deuxième commentaire</p> + </div> + </div> + +</div> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<h3 id="Notes">Notes </h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<p><a class="external" href="http://www.w3.org/TR/wai-aria/roles#article" title="http://www.w3.org/TR/wai-aria/roles#article">Spécification WAI-ARIA du rôle <code>article</code> (en)</a></p> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html new file mode 100644 index 0000000000..3e335427c7 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html @@ -0,0 +1,128 @@ +--- +title: Utiliser le rôle group +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#group">group</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>group</code> est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a>, ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle <code>group</code> est ajouté à un élément, , le navigateur émettra un événement <code>group</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> + +<p>Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments <a class="external" href="http://www.w3.org/TR/wai-aria/roles#listitem">listitem</a>. Les éléments de groupe devraient être imbriqués.</p> + +<p>La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.</p> + +<p>Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a> ou un rôle standard de <a class="external" href="http://www.w3.org/TR/wai-aria/roles#landmark_roles">point de repère</a> à cette section.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque le rôle <code>group</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ;</li> + <li>Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> + +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> + +<ul> + <li>Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><span class="s1">aria-describedby</span></a> a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé.</li> + <li>Les loupes d’écran devraient agrandir le groupe.</li> +</ul> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Utiliser_le_rôle_group_avec_une_arborescence_HTML">Exemple 1 : Utiliser le rôle <code>group</code> avec une arborescence HTML</h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>group</code> est ajouté directement dans le code source HTML.</p> + +<pre class="brush: html"><div id="tree1" class="tree" role="tree" tabindex="-1"> + <div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true"> + <img class="headerImg" role="presentation" tabindex="-1" src="images/treeExpanded.gif" /> + <span role="treeitem" tabindex="0">Animaux</span> + </div> + + <div id="animalGroup" class="group" role="group"> + <div id="birds" class="treeitem" role="presentation"> + <span role="treeitem" tabindex="-1">Oiseaux</span> + </div> + + <div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false"> + <img class="headerImg" role="presentation" tabindex="-1" src="images/treeContracted.gif" /> + <span role="treeitem" tabindex="0">Chats</span> + </div> + + <div id="catGroup" class="group" role="group"> + <div id="siamese" class="treeitem" role="presentation"> + <span role="treeitem" tabindex="-1">Siamois</span> + </div> + <div id="tabby" class="treeitem" role="presentation"> + <span role="treeitem" tabindex="-1">Tigré</span> + </div> + </div> + </div> +</div></pre> + +<h4 id="Exemple_2_Utiliser_le_rôle_group_avec_un_menu_déroulant_HTML">Exemple 2 : Utiliser le rôle <code>group</code> avec un menu déroulant HTML</h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>group</code> est ajouté directement au code source HTML.</p> + +<pre class="brush: html"><div role="menu"> + <ul role="group"> + <li role="menuitem">Courrier entrant</li> + <li role="menuitem">Archive</li> + <li role="menuitem">Corbeille</li> + </ul> + <ul role="group"> + <li role="menuitem">Dossier personnalisé 1</li> + <li role="menuitem">Dossier personnalisé 2</li> + <li role="menuitem">Dossier personnalisé 3</li> + </ul> + + <ul role="group"> + <li role="menuitem">Nouveau dossier</li> + </ul> +</div></pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://test.cita.illinois.edu/aria/tree/tree2.php">http://test.cita.illinois.edu/aria/tree/tree2.php</a></li> +</ul> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>Les membres du groupe qui se trouve à l’extérieur du sous-arbre DOM du groupe doivent avoir leurs relations avec ce dernier explicitement assignées afin de participer au groupe.</li> +</ul> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#group">group (en)</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region">region (en)</a></li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li>Bonnes pratiques ARIA – Répertoires, groupes et zones : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading">Directories, Groups, and Regions (en)</a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html new file mode 100644 index 0000000000..2a65d9f471 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html @@ -0,0 +1,75 @@ +--- +title: Utiliser le rôle link +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role +--- +<h3 id="Description">Description</h3> +<div class="summary"> + <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#link">link</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> +<p>Le rôle <code>link</code> est utilisé pour identifier un élément qui crée un hyperlien vers une ressource qui peut être dans l’application ou à l’extérieur. Lorsque ce rôle est ajouté à un élément, la tabulation peut être utilisée pour donner le focus au lien et la barre d’espace ou la touche Entrée peuvent exécuter le lien.</p> +<p>L’attribut <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#focus_tabindex">tabindex</a> peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.</p> +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +<p>Lorsque le rôle <code>link</code> est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> +<ul> + <li>Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation.</li> + <li>Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> +<ul> + <li>Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle <code>link</code>reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (<em>List Links</em>) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. </li> + <li>Les loupes d’écran devraient agrandir le lien.</li> +</ul> +<div class="note"> + <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<h3 id="Exemples">Exemples</h3> +<h4 id="Exemple_1_Ajoute_le_rôle_dans_le_code_HTML">Exemple 1 : <strong>Ajoute le rôle dans le code HTML</strong></h4> +<p>L’extrait de code ci-dessous montre comment le rôle <code>link</code> est ajouté dans le code source HTML. </p> +<pre class="brush: html"><div role=”link”>Un lien</div> +</pre> +<h4 id="Exemple_2_Lien_accessible_créé_depuis_une_application_à_l'aide_d'un_<span>"><strong>Exemple 2 : Lien accessible créé depuis une application à l'aide d'un <span></strong></h4> +<pre class="brush: html"><script type="text/javascript"> +sap = {ui:{keycodes:{SPACE:32, ENTER:13 }}}; +//gère les clics et les événement clavier sur le lien +function navigateLink(evt) { + if (evt.type=="click" || + evt.keyCode == sap.ui.keycodes.SPACE || + evt.keyCode == sap.ui.keycodes.ENTER) { + var ref = evt.target != null ? evt.target : evt.srcElement; + if (ref) window.open(ref.getAttribute("href"),"_blank"); + } +} +</script> + +<body role="application"> + + <h3>Lien simple créé avec un <span></h3> + <span href="http://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link"> + Activez ce lien en appuyant sur la barre d’espace ou la touche Entrée + </span> +</body></pre> +<h4 id="Exemples_concrets">Exemples concrets :</h4> +<ul> + <li><a class="external" href="http://codetalks.org/source/widgets/link/link.html">http://codetalks.org/source/widgets/link/link.html</a></li> + <li><a class="external" href="http://codetalks.org/source/widgets/link/link.sample.html">http://codetalks.org/source/widgets/link/link.sample.html</a></li> +</ul> +<h3 id="Notes">Notes</h3> +<p>Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button">button</a> au lieu du rôle <code>link</code>.</p> +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#link"><code>link</code></a></li> +</ul> +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button">button</a>.</li> +</ul> +<h3 id="Compatibilité">Compatibilité</h3> +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> +<h3 id="Autres_ressources">Autres ressources</h3> +<ul> + <li>Bonnes pratiques ARIA - Rôle <code>Link</code> : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#link">#link</a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html new file mode 100644 index 0000000000..17f4e5f336 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html @@ -0,0 +1,97 @@ +--- +title: Utiliser le rôle log +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#log"><code>log</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>log</code> est utilisé pour identifier un élément qui crée <a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">une zone live</a> où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>log</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> + +<p>Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser <code>aria-atomic="true"</code>. Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, <code>aria-live="assertive"</code> peut être défini pour lancer des mises à jour plus agressives.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque le rôle <code>log</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ;</li> + <li>Déclencher un événement journal accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> + +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> + +<ul> + <li>Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que <code>aria-live="assertive"</code> soit défini, dans quel cas l'utilisateur peut être interrompu.</li> + <li>Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation.</li> +</ul> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Ajout_du_rôle_dans_du_code_HTML">Exemple 1 : Ajout du rôle dans du code HTML</h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>log</code> est ajouté directement dans le code source HTML.</p> + +<pre class="brush: html"><div id=”liveregion” class=”region” role=”log”></div> +</pre> + +<h4 id="Exemple_2_Extrait_d’un_exemple_d’application">Exemple 2 : Extrait d’un exemple d’application</h4> + +<p>Cet extrait de code crée le journal dans une application de chat AJAX.</p> + +<pre class="brush: html"><div id="chatArea" role="log"> + <ul id="chatRegion" aria-live="polite" aria-atomic="false"> + <li>Veuillez choisir un pseudo pour commencer à utiliser AJAX Chat.</li> + </ul> + + <ul id="userListRegion" aria-live="off" aria-relevant="additions removals text"> + </ul> +</div></pre> + +<p>Voir l’<a class="external" href="http://codetalks.org/source/live/chat.html">exemple</a> sur CodeTalks pour plus d’informations.</p> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://test.cita.illinois.edu/aria/live/live1.php">http://test.cita.illinois.edu/aria/live/live1.php</a> ;</li> + <li><a class="external" href="http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/">http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/</a> ;</li> + <li><a class="external" href="http://codetalks.org/source/live/chat.html">http://codetalks.org/source/live/chat.html</a> [<a class="external" href="http://codetalks.org/source/live/chat_notes.html">notes</a>].</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>L'utilisation du rôle <code>log</code> sur un élément implique que cet élément possède l'attribut <code>aria-live="polite"</code>.</li> + <li>Pour une zone avec un défilement de texte, comme un bandeau défilant, il est préférable d'utiliser le rôle <code>marquee</code>.</li> +</ul> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#log">log</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#marquee" title="WAI-ARIA Role marquee">marquee</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li>Bonnes pratiques ARIA – Implémentation des zones live : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html new file mode 100644 index 0000000000..3aae7c9b84 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser le rôle presentation +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role +--- +<p><span class="seoSummary">Cette page présente l'usage du rôle <code><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role">presentation</a></code> et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.</span></p> + +<h2 id="Description">Description</h2> + +<div class="summary"> +<p>Le rôle <code>presentation</code> est utilisé pour retirer toute représentation sémantique pour un élément donnée ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle <code>presentation</code> appliqué sur l'élément <code>table</code> pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.</p> +</div> + +<h2 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h2> + +<p>Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle <code>presentation</code>.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_1_Les_icônes-fontes">Exemple 1: Les icônes-fontes</h3> + +<p>Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle <code>presentation</code>.</p> + +<pre class="brush: html"><i class="icon-user" role="presentation"></i> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<p>Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.</p> + +<pre class="brush: html"><button type="button" aria-haspopup="true"> + Technologies + <span class="main-menu-arrow" role="presentation">▼</span> +</button> +</pre> + +<h3 id="Exemple_2_Inline_SVG">Exemple 2 : Inline SVG</h3> + +<p>De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut <code>alt</code> vide sur un élément <code>img</code>, il est possible d'indiquer qu'un élément SVG est purement décoratif grave au rôle <code>presentation</code>.</p> + +<pre class="brush: html"><svg role="presentation"> +… +</svg></pre> + +<ul> +</ul> + +<h2 id="Notes">Notes</h2> + +<h2 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h2> + +<h2 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h2> + +<h2 id="Compatibilité">Compatibilité</h2> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h2 id="Autres_ressources">Autres ressources</h2> + +<p>Using Aria - 2.9 Use of Role=presentation or Role=none: <a href="https://www.w3.org/TR/using-aria/#presentation">https://www.w3.org/TR/using-aria/#presentation</a></p> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html new file mode 100644 index 0000000000..60fbba02c6 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html @@ -0,0 +1,69 @@ +--- +title: Utiliser le rôle progressbar +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="https://www.w3.org/TR/wai-aria/#progressbar" title="ARIA Roles #progressbar"><code>progressbar</code></a>.</p> +</div> + +<p>Le rôle <code>progressbar</code> devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes.</p> + +<p>Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>, <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>.</p> + +<p>Lorsqu’une tâche progresse, la valeur <code>aria-valuenow</code> doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.</p> + +<p>Si le rôle <code>progressbar</code> décrit la progression du chargement d’une zone particulière d’une page, l’auteur <strong class="rfc2119">DOIT</strong> utiliser l’attribut <a class="property-reference external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour pointer vers l’état courant, et définir l’attribut <a class="state-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy"><code>aria-busy</code></a> à <code>true</code> pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de <code>progressbar</code> car elle est toujours en lecture seule.</p> + +<div class="note"><strong>Note :</strong> généralement les technologies d’assistance retourneront la valeur de l’attribut <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a> sous la forme d’un pourcentage d’une plage de valeurs comprise entre <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>, sauf si <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext"><code>aria-valuetext</code></a> est spécifié. Il est préférable de définir les valeurs pour les attributs <code>aria-valuemin</code>, <code>aria-valuemax</code> et <code>aria-valuenow</code> de façon appropriée pour ce calcul.</div> + +<div class="note"><strong>Note :</strong> les éléments possédant le rôle <code>progressbar</code> ont une valeur <code>aria-readonly</code> implicite définie à <code>true</code>.</div> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_barre_de_progression_simple_avec_pourcentage_de_progression">Exemple 1 : barre de progression simple avec pourcentage de progression</h4> + +<pre class="brush: html"><div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> +</pre> + +<h4 id="Exemple_2_Utilisation_de_aria-valuetext">Exemple 2 : Utilisation de <code>aria-valuetext</code></h4> + +<pre class="brush: html"><div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> + Étape 2 : Copie des fichiers… +</div> + +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<h3 id="Notes">Notes</h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#progressbar" title="ARIA Roles #progressbar">progressbar</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow" title="States and Properties #aria-valuenow">aria-valuenow</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin" title="ARIA States and Properties #aria-valuemin">aria-valuemin</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax" title="ARIA States and Properties #aria-valuemax">aria-valuemax</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext" title="ARIA States and Properties #aria-valuetext">aria-valuetext</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html new file mode 100644 index 0000000000..db1bb8281e --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html @@ -0,0 +1,41 @@ +--- +title: Utilisation du groupe rôle +slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_rôle +tags: + - NeedsContent +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role +--- +<p> </p> + +<h3 id="Description">Description</h3> + +<p> </p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d'assistance">Effets possibles sur les agents utilisateurs et les technologies d'assistance</h3> + +<div class="note"><strong>Note:</strong>il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ici est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 : </h4> + +<p> </p> + +<pre class="brush: html">Code </pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> +</ul> + +<h3 id="Notes">Notes </h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html new file mode 100644 index 0000000000..81653c4e28 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -0,0 +1,120 @@ +--- +title: Utiliser le rôle slider +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" rel="external" title="http://www.w3.org/TR/wai-aria/roles#slider">slider</a>.</p> +</div> + +<p>Le rôle <code>slider</code> est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle <code>slider</code> est assigné à la « <em>molette</em> », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut <code>aria-valuenow</code> du curseur de défilement (et si possible <code>aria-valuetext</code>) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.</p> + +<h4 id="Clavier_et_focus">Clavier et focus</h4> + +<p>Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) :</p> + +<table style="width: 70%;"> + <thead> + <tr> + <th scope="col">Touche(s)</th> + <th scope="col">Action</th> + </tr> + </thead> + <tbody> + <tr> + <td>Flèches haut et droite</td> + <td>Augmente la valeur sélectionnée</td> + </tr> + <tr> + <td>Flèches bas et gauche</td> + <td>Baisse la valeur sélectionnée</td> + </tr> + <tr> + <td>Page haut et Page bas</td> + <td>Augmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)</td> + </tr> + </tbody> +</table> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Intervalle_numérique_simple">Exemple 1 : Intervalle numérique simple</h4> + +<p>Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de <code>aria-valuenow</code> en réponse à l'action de l'utilisateur.</p> + +<pre class="brush: html"><div id="slider-label">Volume</div> + +<div class="vol-slider"> + <a href="#" id="vol-handle" class="handle" role="slider" aria-labelledby="slider-label" + aria-valuemin="1" + aria-valuemax="100" + aria-valuenow="60"> + </a> +</div> +</pre> + +<h4 id="Exemple_2_Valeurs_texte">Exemple 2 : Valeurs texte</h4> + +<p>Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut <code>aria-valuetext</code> est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine .</p> + +<pre class="brush: html"><div id="slider-label">Jour de la semaine :</div> + +<div class="day-slider"> + <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label" + aria-valuemin="1" + aria-valuemax="7" + aria-valuenow="2" + aria-valuetext="Lundi"> + </a> +</div> +</pre> + +<p>L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs <code>aria-valuenow</code> et <code>aria-valuetext</code> :</p> + +<pre class="brush: js">var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; +var updateSlider = function (newValue) { + var handle = document.getElementById("day-handle"); + handle<span>.setAttribute(<span class="string">"aria-valuenow"</span><span>, </span><span class="string">newValue.toString()</span><span>);</span></span> + handle.setAttribute("aria-valuetext", dayNames[newValue]); +}; +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a></li> +</ul> + +<h3 id="Notes">Notes</h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using the aria-label attribute">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Using the aria-required attribute">aria-valuetext</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" title="http://www.w3.org/TR/wai-aria/roles#slider">Spécifications WAI-ARIA pour le rôle <code>slider</code></a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html new file mode 100644 index 0000000000..46fb52e131 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html @@ -0,0 +1,50 @@ +--- +title: Utiliser le rôle status +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role +--- +<h3 id="Description">Description</h3> +<div class="summary"> + <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#status">status</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> +<p>Le rôle <code>status</code> est un type de <a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">zone live</a> et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert">alerte</a>. Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement <code>status</code> accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.</p> +<p>Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls" title="States and Properties #aria-controls">aria-controls</a>.</p> +<p>Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.</p> +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +<p>Lorsque le rôle <code>status</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> +<ul> + <li>Présenter l’élément ayant un rôle de <code>status</code> à l’API d’accessibilité du système d’exploitation ;</li> + <li>Déclencher un événement <code>status</code> accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> +<ul> + <li>Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut <code>aria-live=”assertive”</code> soit défini dans quel cas l'utilisateur peut être interrompu ;</li> + <li>Les loupes d’écran devraient agrandir l’objet d’état.</li> +</ul> +<div class="note"> + <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<h3 id="Exemples">Exemples</h3> +<h4 id="Exemple_1_ajout_du_rôle_status_dans_le_code_HTML">Exemple 1 : ajout du rôle <code>status</code> dans le code HTML</h4> +<p>L’extrait de code ci-dessous montre comment le rôle <code>status</code> est ajouté directement dans le code source HTML.</p> +<pre class="brush: html"><p role="status">Vos modifications ont été automatiquement enregistrées.</p> +</pre> +<h4 id="Exemples_concrets">Exemples concrets :</h4> +<h3 id="Notes">Notes</h3> +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#status">status</a>.</li> +</ul> +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert">alert</a>.</li> +</ul> +<h3 id="Compatibilité">Compatibilité</h3> +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> +<h3 id="Autres_ressources">Autres ressources</h3> +<ul> + <li>Bonnes pratiques ARIA – Implémentation des zones live : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> +</ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html new file mode 100644 index 0000000000..890b809cba --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html @@ -0,0 +1,30 @@ +--- +title: Utiliser le rôle toolbar +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar +tags: + - ARIA + - Accessibilité + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role +--- +<h3 id="Description">Description</h3> +<div class="summary"> + </div> +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +<p> </p> +<div class="note"> + <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<h3 id="Exemples">Exemples</h3> +<h4 id="Exemple_1">Exemple 1 :</h4> +<p> </p> +<pre class="brush: html">Code </pre> +<h4 id="Exemples_concrets">Exemples concrets :</h4> +<ul> +</ul> +<h3 id="Notes">Notes</h3> +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<h3 id="Compatibilité">Compatibilité</h3> +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> +<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.html b/files/fr/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..24afd909f4 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,157 @@ +--- +title: Alertes +slug: Accessibilité/ARIA/formulaires/Alertes +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +<h2 id="Le_problème">Le problème</h2> + +<p>Vous avez un formulaire – par exemple un formulaire de contact – pour lequel vous voulez ajouter des contrôles d’erreurs accessibles. Les problèmes les plus courants sont une adresse électronique non valide, ou un nom qui ne contient pas un nom de famille ou un prénom.</p> + +<h2 id="Le_formulaire">Le formulaire</h2> + +<p>Tout d’abord, veuillez lire la <a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" rel="nofollow" title="Indications élémentaires pour les formulaires">technique <code>aria-required</code></a> pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.</p> + +<p>Voici un formulaire simple :</p> + +<pre class="brush: html"><form method="post" action="post.php"> +<fieldset> + <legend>Veuillez saisir les détails du contact</legend> + <label for="nom">Votre nom (obligatoire):</label> + <input name="nom" id="nom" aria-required="true"/> + <br /> + <label for="courriel">Adresse électronique (obligatoire):</label> + <input name="courriel" id="courriel" aria-required="true"/> + <br /> + <label for="siteweb">Site Web (facultatif):</label> + <input name="siteweb" id="siteweb"/> +</fieldset> +<label for="message">Veuillez saisir votre message (obligatoire):</label> +<br /> +<textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> +<br /> +<input type="submit" name="submit" value="Envoyer le message"/> +<input type="reset" name="reset" value="Réinitialiser le formulaire"/> +</form> +</pre> + +<p>Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)</p> + +<h2 id="Vérification_de_la_validité_et_avertissement_de_l’utilisateur"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Vérification de la validité et avertissement de l’utilisateur</span></h2> + +<p>Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :</p> + +<ol> + <li>Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « [ ] ».</li> + <li>Définissons l’attribut <code>aria-invalid</code> du champ et donnons lui la valeur <code>true</code>.</li> + <li>Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript <code>alert</code>, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre.</li> +</ol> + +<p>Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements <code>onblur</code>.</p> + +<p>La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :</p> + +<pre class="brush: javascript"><script type="application/javascript"> +function removeOldAlert() +{ + var oldAlert = document.getElementById("alert"); + if (oldAlert) + document.body.removeChild(oldAlert); +} +<br/> +function addAlert(aMsg) +{ + removeOldAlert(); + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var msg = document.createTextNode(aMsg); + newAlert.appendChild(msg); + document.body.appendChild(newAlert); +} +<br/> +function checkValidity(aID, aSearchTerm, aMsg) +{ + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + addAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + removeOldAlert(); + } +} +</script> +</pre> + +<h2 id="La_fonction_checkValidity_2"><span class="mw-headline" id="La_fonction_checkValidity">La fonction <code>checkValidity</code></span></h2> + +<p>Le cœur est la fonction <code>checkValidity</code>. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte.</p> + +<p>Pour déterminer la validité, la fonction vérifie si l’<code>indexOf</code> de la valeur d’entrée est plus grande que <code>-1</code>. Une valeur de <code>-1</code> ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur.</p> + +<p>Si non valide, la fonction fait deux choses :</p> + +<ol> + <li>Elle définit l’attribut <code>aria-invalid</code> de l’élément à <code>true</code>, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct.</li> + <li>Elle appellera la fonction <code>addAlert</code> pour ajouter une alerte avec le message d’erreur donné.</li> +</ol> + +<p>Si le terme recherché est trouvé, l’attribut <code>aria-invalid</code> est réinitialisé à <code>true</code>. De plus, toute alerte qui subsisterait serait supprimée.</p> + +<h2 id="La_fonction_addAlert_2"><span class="mw-headline" id="La_fonction_addAlert">La fonction <code>addAlert</code></span></h2> + +<p>Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant <code>alert</code>, et si elle en trouve un, l’enlève du modèle objet de document (DOM).</p> + +<p>Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID <code>alert</code>. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribut Module">XHTML Role Attribut</a> qui a été tout simplement porté sur HTML pour plus de simplicité.</p> + +<p>Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.</p> + +<p>Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné.</p> + +<h2 id="Ajouter_de_la_magie_à_l’événement_onblur"><span class="mw-headline" id="Ajouter_de_la_magie_a_l_evenement_onblur">Ajouter de la magie à l’événement <code>onblur</code></span></h2> + +<p>Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit :</p> + +<pre class="brush: html"><input name="nom" id="nom" aria-required="true" + onblur="checkValidity('nom', ' ', 'Le nom saisi est invalide&nbsp;!');"/> +<br /> +<input name="courriel" id="courriel" aria-required="true" + onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie est invalide&nbsp;!');"/> +</pre> + +<p><strong>Test de l’exemple</strong></p> + +<p>Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :</p> + +<ol> + <li>Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur.</li> + <li>Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide.</li> +</ol> + +<p>Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge.</p> + +<h2 id="Quelques_questions_qu’on_peut_se_poser"><span class="mw-headline" id="Quelques_questions_qu_on_peut_se_poser">Quelques questions qu’on peut se poser</span></h2> + +<dl> + <dt>Q. Pourquoi mettre à la fois un <code>(required)</code> dans le texte du label et l’attribut <code>aria-required</code> sur certains éléments {{ HTMLElement("input") }} ?</dt> + <dd>R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ.</dd> + <dt>Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ?</dt> + <dd>R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire.</dd> +</dl> + +<div class="warning"> +<p>TBD : let's rethink this – personally, I think setting focus might be good if done without causing a keyboard trap.</p> + +<p>()Il faudrait y réfléchir – personnellement, je pense que définir le focus peut être une bonne chose si c’est fait sans causer de perturbation à la navigation au clavier).</p> +</div> + +<h2 id="Conclusion"><span class="mw-headline" id="In_conclusion">Conclusion</span></h2> + +<p>L’accessibilité des sites web est grandement améliorée lorsqu’on fournit des alertes accessibles pour la validation côté client. Il n’y a rien de plus frustrant pour un utilisateur que de remplir un formulaire d’une vingtaine de champs, voire plus, de le soumettre, de constater que seuls quelques champs ne sont pas correctement renseignés et de devoir tout recommencer depuis le début pour s’assurer que les valeurs sont correctement mémorisées, ou de fournir des informations redondantes.</p> diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..10191bc959 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,119 @@ +--- +title: Indications élémentaires pour les formulaires +slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires +tags: + - ARIA + - Accessibilité + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +<h2 id="Labels_de_formulaire" name="Labels_de_formulaire">Labels de formulaire</h2> + +<p>Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.</p> + +<p>L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un <code>id</code>, et chaque élément {{ HTMLElement("label") }} a un attribut <code>for</code> indiquant l’<code>id</code> de l’{{ HTMLElement("input") }} associé.</p> + +<p><em>Exemple 1. Formulaire basique avec labels</em></p> + +<pre class="brush: html"><form> + <ul> + <li> + <input id="vin-1" type="checkbox" value="riesling"/> + <label for="vin-1">Berg Rottland Riesling</label> + </li> + <li> + <input id="vin-2" type="checkbox" value="weissbergunder"/> + <label for="vin-2">Weissbergunder</label> + </li> + <li> + <input id="vin-3" type="checkbox" value="pinot-grigio"/> + <label for="vin-3">Pinot Grigio</label> + </li> + <li> + <input id="vin-4" type="checkbox" value="gewurztraminer"/> + <label for="vin-4">Gewürztraminer</label> + </li> + </ul> +</form> +</pre> + +<h2 id="Labelliser_avec_ARIA" name="Labelliser_avec_ARIA">Labelliser avec ARIA</h2> + +<p>L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. <a href="http://www.w3.org/WAI/intro/aria.php" hreflang="en" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, la spécification <strong>Accessible Rich Internet Applications</strong> (Applications Internet Riches Accessibles) de la <a href="http://www.w3.org/WAI/" hreflang="en" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" hreflang="en" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> dans ces cas de figure.</p> + +<p>L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut <code>aria-labelledby</code> de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’<code>id</code> de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.</p> + +<p><em>Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée (d'après <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p> + +<pre class="brush: html"><h3 id="rg1_label">Options du déjeuner</h3> + +<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> + <li id="r1" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> Thaï + </li> + <li id="r2" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> Subway + </li> + <li id="r3" tabindex="0" role="radio" aria-checked="true"> + <img role="presentation" src="radio-checked.gif" /> Libanais + </li> +</ul> +</pre> + +<h2 id="Decrire_avec_ARIA" name="Decrire_avec_ARIA">Décrire avec ARIA</h2> + +<p>Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour associer directement une description à un contrôle donné.</p> + +<p>L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut <code>aria-describedby</code> du {{ HTMLElement("button") }} fait référence à l’<code>id</code> de l’élément {{ HTMLElement("div") }}.</p> + +<p><em>Exemple 3. Un bouton décrit par un élément séparé.</em></p> + +<pre class="brush: html"><button aria-describedby="descriptionRevert">Annuler</button> +<div id="descriptionRevert">L’annulation supprimera toutes les modifications + intervenues depuis le dernier enregistrement.</div></pre> + +<p>(Notez que l’attribut <code>aria-describedby</code> est utilisé de différentes façons, en plus des contrôles de formulaires.)</p> + +<h2 id="Champs_obligatoires_et_invalides" name="Champs_obligatoires_et_invalides">Champs obligatoires et invalides</h2> + +<p>Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :</p> + +<ul> + <li>La propriété <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><code>aria-required</code></a> peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire.</li> + <li>L’état <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><code>aria-invalid</code></a> peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides.</li> +</ul> + +<p>L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs <code>aria-required</code> sont définis à <code>true</code> (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut <code>aria-invalid</code> du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).</p> + +<p><em>Exemple 4a. Un formulaire avec des champs obligatoires.</em></p> + +<pre class="brush: html"><form> + <div> + <label for="nom">* Nom :</label> + <input type="text" value="nom" id="nom" aria-required="true"/> + </div> + <div> + <label for="telephone">Téléphone :</label> + <input type="text" value="telephone" id="telephone" aria-required="false"/> + </div> + <div> + <label for="courriel">* Courriel :</label> + <input type="text" value="courriel" id="courriel" aria-required="true"/> + </div> +</form></pre> + +<p><em>Exemple 4b. Portion d’un script qui valide une entrée de formulaire.</em></p> + +<pre class="brush: js">var validate = function () { + var emailElement = document.getElementById(emailFieldId); + var valid = emailValid(formData.email); // retourne true si valide, false dans le cas contraire + + emailElement.setAttribute("aria-invalid", !valid); + setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false +};</pre> + +<h2 id="Fournir_des_messages_d_erreur_utiles" name="Fournir_des_messages_d_erreur_utiles">Fournir des messages d’erreur utiles</h2> + +<p>Découvrez comment utiliser <a href="/fr/docs/Accessibilité/ARIA/formulaires/Alertes" title="Accessibilité/ARIA/formulaires/Alertes">les alertes ARIA pour améliorer les formulaires</a>.</p> + +<p>Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document <a href="http://www.w3.org/TR/wai-aria-practices/" hreflang="en" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>.</p> diff --git a/files/fr/web/accessibility/aria/forms/index.html b/files/fr/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..e61cd13904 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/index.html @@ -0,0 +1,19 @@ +--- +title: Formulaires +slug: Accessibilité/ARIA/formulaires +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms +--- +<p>Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :</p> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" title="Indications élémentaires pour les formulaires">Indications élémentaires pour les formulaires</a> : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires</li> + <li><a href="/fr/Accessibilité/ARIA/formulaires/Alertes" title="alertes">Alertes</a> : Utiliser les alertes pour fournir des messages d'erreur de validation côté client</li> + <li><a href="/fr/Accessibilité/ARIA/formulaires/Labels_multi-options" title="https://developer.mozilla.org/fr/aria/formulaires/multi-options">Labels multi-options</a>: fournir des labels de formulaire complexes avec un contrôle pour chaque label</li> +</ul> + +<p>Voir également l’<a class="external" href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" hreflang="en" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)</a> (version archivée par archive.org), couvrant pour une bonne part le même sujet.</p> diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.html b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html new file mode 100644 index 0000000000..18e7adbe71 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html @@ -0,0 +1,41 @@ +--- +title: Labels multi-options +slug: Accessibilité/ARIA/formulaires/Labels_multi-options +tags: + - ARAI + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +--- +<h2 id="Utiliser_ARIA_avec_des_labels_comportant_des_champs">Utiliser ARIA avec des labels comportant des champs</h2> + +<h3 id="Problem_2" name="Problem_2">Problème</h3> + +<p>Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « <code>Effacer l’historique après [x] jours</code>. » « <code>Effacer l’historique après</code> » est à la gauche de la boîte texte, « <code>x</code> » est le nombre, par exemple 21, et le mot « <code>jours</code> » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.</p> + +<p>Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « <code>Effacer l’historique après 21 jours</code> ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran.</p> + +<p>La solution se trouve dans l'attribut ARIA <code>aria-labelledby</code>. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible.</p> + +<p><code>aria-labelledby</code> et <code>aria-describedby</code> sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle <code><label for></code>/<code><label></code> pouvant exister, sont neutralisées par <code>aria-labelledby</code>. Si, dans une page HTML vous fournissez <code>aria-labelledby</code>, vous devriez également fournir un <code><label for></code> afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir.</p> + +<p>Exemple :</p> + +<p><input><span id="labelShutdown">Éteindre l’ordinateur après</span> <input> <span id="shutdownUnit"> minutes</span></p> + +<pre class="brush: html"> <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> + <span id="labelShutdown">Éteindre l’ordinateur après</span> + <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /> + <span id="shutdownUnit"> minutes</span> +</pre> + +<h3 id="A_Note_for_JAWS_8_users_2" name="A_Note_for_JAWS_8_users_2">Pour les utilisateurs de JAWS 8</h3> + +<p>JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le <code>nomAccessible</code> que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus.</p> + +<h3 id="Can_this_be_done_without_ARIA.3F_2" name="Can_this_be_done_without_ARIA.3F_2">Peut-on faire la même chose sans ARIA ?</h3> + +<p>Ben Millard fait remarquer dans un billet que <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4</a>, simplement en imbriquant l'élément <code>input</code> dans le <code>label</code>. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de <code>aria-labelledby</code> est encore la meilleure approche.</p> + +<div class="note">TBD: Ajouter plus d’infos sur la compatibilité</div> diff --git a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html new file mode 100644 index 0000000000..503d23637e --- /dev/null +++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html @@ -0,0 +1,96 @@ +--- +title: Comment déposer un bug lié à ARIA +slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA +tags: + - ARIA + - Bugzilla +translation_of: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs +--- +<p>L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :</p> + +<div class="note">Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la <a href="/en/ARIA/examples" title="https://developer.mozilla.org/en/ARIA/examples">page des exemples.</a></div> + +<p>A faire : ajouter la bon lien d'accessibilité à la table</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th>Genre</th> + <th>Programme</th> + <th>Où déposer</th> + <th>Notes</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="4">Lecteurs d'écran</td> + <td> + <p><a class="external" href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Freedom Scientific JAWS</a></p> + </td> + <td><a class="external" href="http://www.freedomscientific.com/Support" title="http://www.freedomscientific.com/forms/Contact_Us.asp?ID=TECHNICAL-SUPPORT">formulaire de support technique JAWS</a></td> + </tr> + <tr> + <td><a href="/en/Inner_and_outer_windows" title="Inner and outer windows">GW Micro Window Eyes</a></td> + <td><a class="link-mailto" href="mailto:support@gwmicro.com" title="mailto:support@gwmicro.com">commentaires, questions et retours Window-Eyes </a>(email)</td> + <td> </td> + </tr> + <tr> + <td><a class="external" href="http://www.nvda-project.org/" title="http://www.nvda-project.org/">Non Visual Desktop Access (NVDA)</a></td> + <td><a class="external" href="http://www.nvda-project.org/wiki/ReportingIssues" title="http://www.nvda-project.org/wiki/ReportingIssues">Déposer un bug NVDA</a> (github)</td> + <td><a href="/en/Accessibility/JAWS_Issues_with_Firefox" title="JAWS Issues with Firefox">Discuter des problèmes NVDA</a></td> + </tr> + <tr> + <td><a href="/User:orca.clock" title="User:orca.clock">Orca</a></td> + <td><a href="/fr/DOM/File" title="File">Déposer un bug Orca</a></td> + <td> </td> + </tr> + <tr> + <td colspan="1" rowspan="5">Navigateurs</td> + <td>Apple Safari</td> + <td><a class="external" href="http://www.webkit.org/quality/reporting.html" title="http://www.webkit.org/quality/reporting.html">Déposer un bug WebKit.org</a></td> + <td> </td> + </tr> + <tr> + <td>Google Chrome</td> + <td><a class="external" href="http://code.google.com/p/chromium/issues/list" title="http://code.google.com/p/chromium/issues/list">Déposer un bug Chromium</a></td> + <td> </td> + </tr> + <tr> + <td> + <p>Microsoft Internet Explorer</p> + </td> + <td><a class="link-https" href="https://connect.microsoft.com/IE/Feedback" title="https://connect.microsoft.com/IE/Feedback">Déposer un bug IE</a></td> + <td><a class="external text" href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=343213&hide_resolved=1" rel="nofollow">Voir les bugs ARIA Firefox existants</a></td> + </tr> + <tr> + <td>Mozilla Firefox</td> + <td> + <p><a class="external" href="http://bugzilla.mozilla.org/" title="http://bugzilla.mozilla.org/">Déposer un bug Firefox</a></p> + </td> + <td> + <p>Utiliser le composant : Disability Access APIs</p> + </td> + </tr> + <tr> + <td>Opera</td> + <td><a class="link-https" href="https://bugs.opera.com/wizard/" title="https://bugs.opera.com/wizard/">Déposer un bug Opera</a></td> + <td><span class="external">Marquer [ARIA] dans le sommaire</span></td> + </tr> + <tr> + <td colspan="1" rowspan="3">Librairies JS</td> + <td>Dojo Toolkit</td> + <td><a class="external" href="http://dojotoolkit.org/blog/how-file-dojo-bug-report" title="http://dojotoolkit.org/blog/how-file-dojo-bug-report">Déposer un bug Dojo</a></td> + <td><span class="external">Marquer [Accessibilité] dans le champ composant</span></td> + </tr> + <tr> + <td>Google Web Toolkit (GWT)</td> + <td><a href="/fr/DOM/File" title="File">Déposer un bug GWT</a></td> + <td> </td> + </tr> + <tr> + <td>Yahoo User Interface</td> + <td><a class="external" href="http://sourceforge.net/tracker/?func=add&group_id=165715&atid=836476" rel="external" title="http://sourceforge.net/tracker/?func=add&group_id=165715&atid=836476">Déposer un bug YUI</a></td> + <td><span class="external">Déposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire</span></td> + </tr> + </tbody> +</table> diff --git a/files/fr/web/accessibility/aria/index.html b/files/fr/web/accessibility/aria/index.html new file mode 100644 index 0000000000..86ca0aa284 --- /dev/null +++ b/files/fr/web/accessibility/aria/index.html @@ -0,0 +1,123 @@ +--- +title: ARIA +slug: Accessibilité/ARIA +tags: + - ARIA + - Accessibilité + - Applications + - Web +translation_of: Web/Accessibility/ARIA +--- +<p class="summary"><span class="seoSummary"><em>Accessible Rich Internet Applications</em> <strong>(ARIA) </strong>(qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles. </span></p> + +<p><span class="seoSummary">ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas.</span> Ainsi, ARIA permet de rendre accessible les <em>widgets</em> JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.</p> + +<div class="warning"> +<p><strong>Attention !</strong> La plupart de ces <em>widgets</em> ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités <a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier">de navigation au clavier</a>, de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts.</p> +</div> + +<p>Voici un <em>widget</em> utilisé pour une barre de progression :</p> + +<pre class="brush: html"><div id="percent-loaded" role="progressbar" aria-valuenow="75" + aria-valuemin="0" aria-valuemax="100" /></pre> + +<p>Cette barre de progression utilise un élément <code><div></code> qui n'a pas de sémantique forte. Malheureusement, HTML 4 ne possède pas d'élément natif avec la sémantique nécessaire et on doit donc inclure les rôles et propriétés ARIA. Ici, l'attribut <code>role="progressbar"</code> indique au navigateur qu'il s'agit d'une barre de progression mise à jour en JavaScript. Les attributs <code>aria-valuemin</code> et <code>aria-valuemax</code> indiquent les valeurs minimales et maximales pour cette barre tandis que <code>aria-valuenow</code> décrit l'état actuel de la barre et cette valeur doit être mise à jour par le code JavaScript.</p> + +<p>En plus des déclarations <em>statiques</em> dans le contenu HTML, les attributs ARIA peuvent être ajoutés aux éléments et être mis à jour grâce à JavaScript :</p> + +<pre class="brush: js"><code>// Trouver la barre de progression <div> dans le DOM. + var progressBar = document.getElementById("percent-loaded");</code> + +<code>// Définir les rôles et les états ARIA +// afin que les technologies d'assistance puissent les +// identifier/exploiter correctement</code> + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + +// Créer une fonction qui peut être appelée à tout moment +// pour mettre à jour la valeur de la barre de progression + function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); + }</pre> + +<div class="note"> +<p><strong>Note :</strong> ARIA a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité.</p> + +<p>En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (<code><main></code>, <code><header></code>, <code><nav></code> etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer.</p> +</div> + +<h2 id="Prise_en_charge">Prise en charge</h2> + +<p>À l'instar des autres technologies web, la prise en charge d'ARIA est plus ou moins hétérogène parmi les différents navigateurs. La prise en charge d'ARIA repose à la fois sur le navigateur, sur le système d'exploitation sous-jacent et sur la technologie d'assistance utilisée. Certaines versions antérieures de logiciels pourront ne pas prendre en charge (ou que partiellement) certains rôles ARIA.</p> + +<p>On notera également que certaines personnes qui utilisent des outils d'assistance hésitent à mettre à jour leurs logiciels de peur de perdre les fonctionnalités liées à l'ordinateur et au navigateur. Pour ces raisons, mieux vaudra <a href="/fr/docs/Apprendre/a11y/HTML">utiliser des éléments HTML « sémantiques »</a> dès que possible car cela maximisera la prise en charge des technologies d'assistance.</p> + +<p>Il est aussi important de tester l'ARIA écrit avec des technologies d'assistance réelles. Bien qu'il existe certains émulateurs et simulateurs, rien ne vaut un test réel afin d'obtenir suffisamment de garanties.</p> + +<section id="sect1"> +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tutoriels">Tutoriels</h2> + +<dl> + <dt><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles">Introduction à ARIA</a></dt> + <dd>Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi <a class="external" href="https://dev.opera.com/articles/introduction-to-wai-aria/">l'introduction à ARIA de Gez Lemon</a> en 2008</dd> + <dt><a class="external" href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Vidéos de lecteurs d'écran utilisant ARIA</a></dt> + <dd>Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».</dd> + <dt><a class="external" href="https://w3c.github.io/using-aria/">Utiliser ARIA</a></dt> + <dd>Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes.</dd> +</dl> + +<h2 id="Améliorations_légères_avec_ARIA">Améliorations légères avec ARIA</h2> + +<dl> + <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Améliorer la navigation avec les balises (<em>landmarks</em>) ARIA</a></dt> + <dd>Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Voir aussi les notes d'implémentation pour les balises ARIA</a> (mis à jour en juillet 2011).</dd> + <dt><a href="/fr/docs/Accessibilité/ARIA/formulaires">Améliorer l'accessibilité des formulaires</a></dt> + <dd>ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.</dd> +</dl> + +<h2 id="ARIA_pour_les_widgets_scriptés">ARIA pour les <em>widgets</em> scriptés</h2> + +<dl> + <dt><a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier">Concevoir des <em>widgets</em> JavaScript navigables au clavier</a></dt> + <dd>Les éléments tels que <code><input></code>, <code><button></code> disposent de fonctionnalités natives pour l'utilisation au clavier. Si on triche en utilisant des <code> <div></code> et ARIA, on doit s'assurer que l'accessibilité au clavier soit préservée.</dd> + <dt><a href="/fr/docs/Accessibilité/ARIA/Zones_live_ARIA">Régions dynamiques</a> (<em>live regions</em>)</dt> + <dd>Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page.</dd> + <dt><a class="external" href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm">Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu</a></dt> + <dd>Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par VoiceOver avec Safari.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Processus_de_standardisation">Processus de standardisation</h2> + +<dl> + <dt><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/">La spécification WAI-ARIA</a></dt> + <dd>La spécification rédigée par le W3C.</dd> + <dt><a class="external" href="https://www.w3.org/TR/wai-aria-practices-1.1/">Bonnes pratiques afin d'écrire avec WAI-ARIA</a></dt> + <dd> + <p>Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux <em>widgets</em> et aux mécanismes interactifs.</p> + </dd> +</dl> + +<h2 id="Videos">Videos</h2> + +<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, les API pour l'accessibilité : coder comme si ça vous intéressait ! de Léonie Watson (en anglais)</a></p> + +<h2 id="Rapporter_des_bogues">Rapporter des bogues</h2> + +<p><a href="/fr/docs/Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA">Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.</a></p> +</div> +</div> +</section> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Accessibilité">Accessibilité</a></li> + <li><a href="/fr/docs/Web/Guide/AJAX">AJAX</a></li> + <li><a href="/fr/docs/Web/JavaScript">JavaScript</a></li> + <li><a href="/fr/docs/Mozilla/Accessibility">Accessibilité et Mozilla</a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.html b/files/fr/web/accessibility/aria/roles/banner_role/index.html new file mode 100644 index 0000000000..3a717bbdaa --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.html @@ -0,0 +1,39 @@ +--- +title: Utilisation du rôle banner +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner +tags: + - ARIA + - Accessibilité + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/Banner_role +--- +<h3 id="Description">Description</h3> + +<div class="summary">Cette technique présente l’utilisation du rôle <a class="external external-icon" href="https://www.w3.org/TR/wai-aria/roles#banner" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert"><code>banner</code> (en)</a>.</div> + +<p>La zone d’entête principale d'un site devrait être structurée avec <code><header role="banner"></code>. Cette zone peut contenir le logo du site, sa description, le moteur de recherche.</p> + +<p>Une page web ne doit pas contenir plus d'un rôle <code>banner</code>, mais il est tout à fait possible d'utiliser plusieurs éléments <code><header></code> dans une page.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p> </p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Une_zone_d'entête_typique_de_site">Une zone d'entête typique de site </h4> + +<pre class="brush: html"><header role="banner"> + <p><img src="logo.png" alt="Nom du site"></p> + <p>Description du site</p> + <div role="search"> + ... + </div> +</header> </pre> + +<h2 id="Autres_ressources">Autres ressources</h2> + +<p>La <a href="http://www.accede-web.com/notices/html-css-javascript/1-structure/1-1-header-role-banner/">fiche accede-web</a>.</p> diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.html b/files/fr/web/accessibility/aria/roles/button_role/index.html new file mode 100644 index 0000000000..55038b46da --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/button_role/index.html @@ -0,0 +1,123 @@ +--- +title: Utilisation du rôle button +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button +tags: + - ARIA + - Accessibilité + - Role(2) + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/Roles/button_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button" title="http://www.w3.org/TR/wai-aria/roles#button">button</a>.</p> +</div> + +<p>Ce rôle devrait être utilisé pour des éléments cliquables qui déclenchent une réponse lorsqu’activés par l’utilisateur. Par lui-même, <code>role="button</code> peut faire apparaître n’importe quel élément (par exemple <p>, <span> ou <div>) sous la forme d'un contrôle bouton à un lecteur d’écran. De plus ce rôle peut être utilisé en combinaison avec l’attribut <code>aria-pressed</code> pour créer des boutons à bascule.</p> + +<div class="note"><strong>Note :</strong> lorsque c’est possible, il est recommandé d’utiliser les boutons HTML natifs (<code><button></code>, <code><input type="button" /></code> et <code><input type="image" /></code>) plutôt que le rôle <code>button</code>, les boutons HTML étant plus largement pris en charge par les anciennes technologies d’assistance. Les boutons HTML natifs obéissent également par défaut aux évènements clavier et aux règles de focus, sans besoin de personnalisation supplémentaire.</div> + +<h4 id="Clavier_et_focus">Clavier et focus</h4> + +<p>Les boutons sont des contrôles interactifs et doivent donc être focalisables. Si le rôle <code>button</code> est ajouté à un élément qui n’est par lui-même pas focalisable (tels que <code><span></code>,<code><div></code> ou<code><p></code>), l’attribut <code>tabindex</code> devra être utilisé pour rendre le bouton focalisable.</p> + +<p>Les boutons doivent pouvoir être actionnés tant par une souris qu’avec un clavier. Pour les boutons HTML natifs, l’évènement <code>onclick</code> du bouton sera déclenché par les clics de souris et lorsque la <kbd>barre d’espace</kbd> ou la touche <kbd>entrée</kbd> est actionnée alors que le bouton a le focus. Si <code>role="button"</code> est utilisé pour créer un bouton personnalisé, l’évènement <code>onclick</code> ne sera déclenché qu’après un clic par le pointeur de la souris. À cause de cela, le développeur devra explicitement ajouter un gestionnaire d’évènements clavier séparé à l’élément pour que le bouton puisse être actionné lorsque les touches <kbd>barre d’espace</kbd> ou <kbd>entrée</kbd> sont pressées.</p> + +<div class="warning"><strong>Attention :</strong> faites attention à l’utilisation de rôle <code>button</code> pour des liens. Les boutons devraient être actionnés à l’aide de la <kbd>barre d’espace</kbd> ou la touche <kbd>entrée</kbd>, alors qu’on s’attend à ce que les liens soient déclenchés avec la touche <kbd>Entrée</kbd>. En d’autres termes, lorsque des liens sont utilisés comme des boutons, le seul ajout de <code>role="button"</code> n’est pas suffisant. Il est également nécessaire d’ajouter un gestionnaire d’évènement clavier qui surveillera la <kbd>barre d'espace</kbd> afin d’être cohérent avec les boutons natifs.</div> + +<h4 id="Boutons_à_bascule">Boutons à bascule</h4> + +<p>Un des avantages de l’utilisation de <code>role="button"</code> est qu’il permet la création de boutons à bascule. Un bouton à bascule peut avoir deux états : pressé et non pressé. Qu’un bouton soit ou non un bouton à bascule peut être indiqué avec l’attribut <code>aria-pressed</code> en plus du rôle <code>button</code> :</p> + +<ul> + <li>Si <code>aria-pressed</code> n’est pas utilisé, le bouton n’est pas un bouton à bascule ;</li> + <li>Si <code>aria-pressed="false"</code> est utilisé, le bouton est un bouton à bascule au repos ;</li> + <li>Si <code>aria-pressed="true"</code> est utilisé, le bouton est un bouton à bascule actionné ;</li> + <li>Si <code>aria-pressed="mixed"</code> est utilisé, le bouton est considéré comme étant partiellement actionné.</li> +</ul> + +<h4 id="Labelliser_les_boutons">Labelliser les boutons</h4> + +<p>Les boutons doivent toujours avoir un nom accessible. Pour la plupart des boutons, ce nom sera le même que le texte du bouton. Dans certains cas, par exemple pour des boutons icônes, le nom accessible peut être donné à l’aide des attributs <code>aria-label</code> ou <code>aria-labelledby</code>.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque le rôle <code>button</code> est utilisé, les agents utilisateurs doivent présenter l’élément comme un contrôle bouton à l’API accessibilité du système d’exploitation. Les lecteurs d’écran doivent annoncer l’élément comme un bouton et décrire son nom accessible. Les logiciels de reconnaissance vocale doivent autoriser le bouton à s’activer en dictant le mot « clic » suivi par le nom accessible du bouton.</p> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_un_bouton_simple">Exemple 1 : un bouton simple</h4> + +<p>Dans l’extrait de code ci-dessous, on donne le rôle <code>button</code> à un élément <code><span></code>. Parce qu’un élément <code><span></code> est utilisé, l’attribut <code>tabindex</code> est requis pour rendre le bouton focalisable et le faire appartenir à l’ordre de tabulation. Remarquez que cet extrait de code implique que les styles CSS sont fournis pour donner l’apparence d’un bouton à l’élément <code><span></code> et que <code>hanldeBtnClick</code> et <code>handleBtnKeyUp</code> sont des gestionnaires d’événements qui exécutent l’action du bouton lorsqu’il est cliqué et lorsque la barre d’espace est pressée.</p> + +<pre class="brush: html"><span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()">Enregistrer</span></pre> + +<h4 id="Exemple_2_un_bouton_à_bascule">Exemple 2 : un bouton à bascule</h4> + +<p>Dans cet extrait de code, un bouton HTML natif est converti en un bouton à bascule à l’aide de l’attribut <code>aria-pressed</code>. Remarquez que l’attribut <code>tabindex</code> n’a pas à être utilisé ici car l’élément <code><button></code> est déjà focalisable par défaut. Lorsque le bouton est activé, la valeur de <code>aria-pressed</code> bascule entre <code>true</code> et <code>false</code> :</p> + +<pre class="brush: html"><!DOCTYPE HTML> +<html lang="fr"> + <head> + <meta charset="UTF-8"> + <title>Exemple de rôle ARIA button</title> + <style type="text/css"> + [role="button"] { + padding:3px; + border: 1px solid #CCC; + } + [role="button"][aria-pressed="true"] { + border: 2px solid #000; + } + </style> + <script type="text/JavaScript"> + function handleBtnClick(event) { + event = event || window.event; + var pressed = event.target.getAttribute("aria-pressed") == "true"; + //change la valeur de aria-pressed quand le bouton est basculé : + event.target.setAttribute("aria-pressed", pressed ? "false" : "true"); + //… (perform the button's logic here) + } + + function handleBtnKeyUp(event) { + event = event || window.event; + if (event.keyCode === 32) { // contrôle la touche espace + handleBtnClick(event); + } + } + </script> + </head> + + <body> + <button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)">Mode Édition</button> + </body> +</html> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li>Exemples de boutons <a class="external" href="http://test.cita.illinois.edu/aria/button/index.php" title="Exemples de boutons ARIA"><abbr title="Illinois Center for Information Technology and Web Accessibility">ICITA</abbr> (en)</a> ;</li> + <li><a class="external" href="http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html" title="Boutons à bascule ARIA">Exemples de boutons par Paciello Group (en)</a>.</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#button" title="http://www.w3.org/TR/wai-aria/roles#button">button</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed">aria-pressed</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.html b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html new file mode 100644 index 0000000000..5b42eb0583 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html @@ -0,0 +1,52 @@ +--- +title: Utilisation du rôle checkbox +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/checkbox_role +--- +<h3 id="Description">Description</h3> +<div class="summary"> + <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a>.</p> +</div> +<p>Le rôle <code>checkbox</code> est utilisé pour des contrôles interactifs à cocher. Si un élément utilise <code>role="checkbox",</code> il est obligatoire pour cet élément d’avoir également un attribut <code>aria-checked</code> qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif <code>checkbox</code> ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle <code>role=checkbox</code> peut présenter trois états pour l'attribut <code>aria-checked</code> :</p> +<ul> + <li><code>aria-checked="true"</code> : la case est cochée ;</li> + <li><code>aria-checked="false"</code> : la case est décochée ;</li> + <li><code>aria-checked="mixed"</code> : la case est partiellement cochée.</li> +</ul> +<p>Le développeur doit modifier dynamiquement la valeur de l’attribut <code>aria-checked</code> lorsque la case est cochée.</p> +<p>Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir le focus et être accessible au clavier. Si le rôle est appliqué à un élément qui ne peut recevoir le focus, l’attribut <code>tabindex</code> devra être utilisé pour corriger cela. Le raccourci clavier attendu pour activer une case à cocher est la barre d’espace.</p> +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +<p>Lorsque le rôle <code>checkbox</code> est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes :</p> +<ul> + <li>Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ;</li> + <li>Lorsque la valeur de l’attribut <code>aria-checked</code> change, envoyer un événement accessible de changement d’état.</li> +</ul> +<p>Les technologies d’assistance doivent faire la chose suivante :</p> +<ul> + <li>Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer.</li> +</ul> +<div class="note"> + <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<h3 id="Exemples">Exemples</h3> +<h4 id="Exemple_1_Ajout_du_rôle_ARIA_checkbox">Exemple 1 : Ajout du rôle ARIA <code>checkbox</code></h4> +<pre class="brush: html"><span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> +<label for="chk1">Enregistrer mes préférences</label> +</pre> +<h4 id="Exemples_concrets">Exemples concrets :</h4> +<ul> + <li><a class="external" href="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php" title="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php">http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php</a></li> +</ul> +<h3 id="Notes">Notes</h3> +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="ARIA Roles #checkbox">checkbox</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked" title="ARIA States and Properties #aria-checked">aria-checked</a></li> +</ul> +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<h3 id="Compatibilité">Compatibilité</h3> +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> +<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.html b/files/fr/web/accessibility/aria/roles/dialog_role/index.html new file mode 100644 index 0000000000..62da7745fb --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.html @@ -0,0 +1,148 @@ +--- +title: Utilisation du rôle dialog +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog +tags: + - ARIA + - Accessibilité + - Développement Web + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/dialog_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog (en)</a></code>.</p> +</div> + +<p>Le rôle <code>dialog</code> est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue).</p> + +<p>Marquer un élément de dialogue avec le rôle <code>dialog</code> aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de <code>role="dialog"</code> n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit :</p> + +<ul> + <li>La boîte de dialogue doit être correctement labélisée ;</li> + <li>Le focus clavier doit être géré correctement.</li> +</ul> + +<p>Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.</p> + +<h4 id="Labélisation">Labélisation</h4> + +<p>Bien qu’il ne soit pas obligatoire que la boîte de dialogue elle-même reçoive le focus, elle doit quand même besoin d’être labélisée. Le label donné à la boîte de dialogue fournira des informations contextuelles pour les contrôles interactifs qu’elle contient. En d’autres termes, le label de la boîte de dialogue agit comme label de regroupement pour les contrôles qu’elle contient. On peut comparer cela à la façon dont un élément <code><legend></code> fournit un label de regroupement pour les contrôles contenus dans un élément <code><fieldset></code>.</p> + +<p>Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut <code>aria-labelledby</code> pour l’élément <code>role="dialog"</code>. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut <code>aria-describedby</code>. Cette approche est illustrée dans l’extrait de code ci-dessous :</p> + +<pre class="brush: html notranslate"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> + <h2 <strong>id="dialog1Title"</strong>>Vos informations personnelles ont correctement été actualisées.</h2> + + <p <strong>id="dialog1Desc"</strong>>Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p> + + <button>Fermer</button> +</div> +</pre> + +<div class="note">Gardez en tête que le titre d’une boîte de dialogue et sa description ne doivent pas être focalisables afin de toujours être perçus par les lecteurs d’écran opérant en mode non-virtuel. La combinaison du rôle ARIA <code>dialog</code> et des techniques de labélisation devrait permettre aux lecteurs d’écran d’annoncer les informations de la boîte de dialogue lorsque le focus arrive sur cette dernière.</div> + +<h4 id="Gestion_du_focus">Gestion du focus</h4> + +<p>Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :</p> + +<ul> + <li>Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets.</li> + <li>Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire.</li> + <li>Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte <em>tourne</em>, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue.</li> + <li>Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier.</li> + <li>Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue <em>modale</em> s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue <em>non modales</em> il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide <a href="/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux" title="/en-US/docs/ARIA/Guides_ARIA/Managing_Modal_and_Non_Modal_Dialogs">Gérer les dialogues modaux et non modaux</a>.</li> +</ul> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque le rôle <code>dialog</code> est utilisé, l’agent utilisateur doit faire la chose suivante :</p> + +<ul> + <li>Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation.</li> +</ul> + +<p>Lorsque la boîte de dialogue est correctement labélisée et que le focus est déplacé vers un contrôle à l’intérieur de la boîte, les lecteurs d’écran devraient annoncer le rôle accessible du dialogue, son nom et éventuellement sa description avant d’annoncer l’élément qui a reçu le focus.</p> + +<div class="note"><strong>Note :</strong> plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_une_boîte_de_dialogue_contenant_un_formulaire">Exemple 1 : une boîte de dialogue contenant un formulaire</h4> + +<pre class="brush: html notranslate"><div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <h2 id="dialog1Title">Formulaire de souscription</h2> + + <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p> + + <form> + <p> + <label for="firstName">Prénom</label> + <input id="firstName" type="text" /> + </p> + + <p> + <label for="lastName">Nom</label> + <input id="lastName" type="text" /> + </p> + + <p> + <label for="interests">Intérêts</label> + <textarea id="interests"></textarea> + </p> + + <p> + <input type="checkbox" id="autoLogin" /> + <label for="autoLogin">Intérêts</label> + </p> + + <p> + <input type="submit" value="Enregistrer les informations"/> + </p> + </form> +</div> +</pre> + +<h4 id="Exemple_2_une_boîte_de_dialogue_basée_sur_un_Fieldset_comme_contenu_alternatif">Exemple 2 : une boîte de dialogue basée sur un <code>Fieldset</code> comme contenu alternatif</h4> + +<p>Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage <code>dialog</code> à un élément <code>fieldset</code> comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement :</p> + +<pre class="brush: html notranslate"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <strong><legend></strong> + <span id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</span> + <span id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur ».</span> + </legend> + + <button>Fermer</button> +</fieldset> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li> +</ul> + +<h3 id="Notes">Notes</h3> + +<div class="note"><strong>Note :</strong> bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle <code>application</code> : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.</div> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">dialog (en)</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby (en)</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby (en)</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog">Utiliser le rôle <code>alertdialog</code></a></li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.html b/files/fr/web/accessibility/aria/roles/listbox_role/index.html new file mode 100644 index 0000000000..5deca20928 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.html @@ -0,0 +1,97 @@ +--- +title: Utiliser le rôle listbox +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/listbox_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>listbox</code> est utilisé pour identifier un élément qui crée une liste à partir de laquelle un utilisateur peut sélectionner un ou plusieurs éléments statiques et peut contenir des images, contrairement à l’élément HTML {{ HTMLElement("select") }}. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement accessible <code>listbox</code> aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> + +<p>Chaque entrée de la boîte liste devrait avoir un rôle d’<a class="external" href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option">option</a> et devrait être une descendante de la boîte liste dans l’arbre DOM. Si une ou plusieurs entrées ne sont pas des descendantes de la boîte liste dans le DOM, référez-vous aux <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a> pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.</p> + +<p>Lorsqu’on navigue entre les différents éléments d’une liste, le premier élément de la liste sera sélectionné par défaut en l’absence de sélection existante. Les flèches haut et bas permettent de naviguer dans la liste, et appuyer sur <kbd>Maj+Flèche haut/bas</kbd> déplacera et développera la sélection. Saisir un ou plusieurs lettres permet de naviguer dans la liste des éléments (une seule et même lettre positionnera la sélection sur chacun des éléments qui commence par elle, plusieurs lettres placeront la sélection sur le premier élément commençant par la chaîne). Si l’élément courant est associé à un menu contextuel, <kbd>Maj+F10</kbd> affichera ce menu. Si les éléments de la liste peuvent être cochés, <kbd>Espace</kbd> peut être utilisée pour basculer l’état de la <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#checkbox">checkboxes</a>. Pour les éléments de liste sélectionnables, <kbd>Espace</kbd> bascule l’état de sélection, <kbd>Maj+Espace</kbd> peut être utilisé pour sélection des éléments contigus, <kbd>Ctrl+Flèche</kbd> déplace le curseur sans sélectionner d’élément, et <kbd>Ctrl+Espace</kbd> peut être utilisé pour sélectionner des éléments non-contigus. Il est recommandé d’utiliser une case à cocher, un lien ou tout autre méthode pour permettre la sélection de tous les éléments, et <kbd>Ctrl+A</kbd> peut être utilisé comme raccourci pour cela.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque le rôle <code>listbox</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée <a class="external" href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>, présenter l’élément comme un <a class="external" href="http://www.w3.org/TR/wai-aria/roles#menu">menu</a> ;</li> + <li>Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> + +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> + +<ul> + <li>Les lecteurs d’écran devraient annoncer le label et le rôle de la boîte liste lorsqu’elle obtient le focus. Si un élément de la liste obtient le focus, il devrait être annoncé après, suivi par une indication de la position de l’élément dans la liste si le lecteur d’écran prend en charge cette fonction. Lorsque le focus se déplace dans la liste, le lecteur d’écran devrait annoncer les éléments de la liste appropriés.</li> + <li>Les loupes d’écran devraient agrandir la boîte liste.</li> +</ul> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_une_liste_de_sélection_simple_qui_utilise_l’attribut_aria-activedescendant">Exemple 1 : une liste de sélection simple qui utilise l’attribut <code>aria-activedescendant</code></h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>listbox</code> est ajouté directement dans le code source HTML :</p> + +<pre class="brush: html"><div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);" + onkeydown="return listItemKeyEvent(event);" onkeypress="return listItemKeyEvent(event);" + onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox1-1"> + <div role="option" id="listbox1-1" class="selected">Vert</div> + <div role="option" id="listbox1-2">Orange</div> + <div role="option" id="listbox1-3">Rouge</div> + <div role="option" id="listbox1-4">Bleu</div> + <div role="option" id="listbox1-5">Violet</div> + <div role="option" id="listbox1-6">Pervenche</div> +</div> +</pre> + +<p>Voir l’<a class="external" href="http://codetalks.org/source/widgets/listbox/listbox.html">exemple</a> CodeTalks pour plus de détails.</p> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html">https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html</a></li> +</ul> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>Pour être accessible au clavier, les développeurs doivent <a class="external" href="http://www.w3.org/TR/wai-aria/roles#option">gérer le focus</a> de chaque descendant de ce rôle.</li> + <li>Il est recommandé aux développeurs d’utiliser différents styles pour la sélection lorsque la liste n’a pas le focus, par exemple, une sélection inactive est parfois affichée avec une couleur d’arrière-plan plus claire.</li> + <li>Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété <a class="external" href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</li> + <li>Si une ou plusieurs entrées ne sont pas des descendants DOM de la boîte liste, il faudra définir des propriétés <code>aria-*</code> supplémentaires (voir <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a>).</li> + <li>S’il existe une bonne raison pour <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded">étendre</a> la boîte liste, le rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a> peut être plus approprié.</li> +</ul> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li>Bonnes pratiques ARIA – Listbox : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">#listbox_div</a></li> + <li>Le modèle de rôles ARIA – Listbox : <a href="http://www.w3.org/TR/wai-aria/roles#listbox">#listbox</a></li> +</ul> diff --git a/files/fr/web/accessibility/aria/roles/switch_role/index.html b/files/fr/web/accessibility/aria/roles/switch_role/index.html new file mode 100644 index 0000000000..2aec6523ed --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/switch_role/index.html @@ -0,0 +1,13 @@ +--- +title: Utilisation du groupe switch +slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch +tags: + - ARIA + - Accessibility + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/Switch_role +--- +<p>Le rôle ARIA switch est très similaire au <a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox">role checkbox</a>, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.</p> + +<p>Extrait des <a href="http://rawgit.com/w3c/aria/master/aria/aria.html#switch">spec ARIA 1.1 </a>: l'attribut <code>aria-checked</code> d'un <code>switch</code> indique si l'entrée est on (<code>true</code>) ou off (<code>false</code>). La valeur <code>mixed</code> n'est pas supportée, et les agents utilisateurs <em>DOIVENT</em> la traiter comme équivalente à <code>false</code> pour ce rôle.</p> diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.html b/files/fr/web/accessibility/aria/roles/textbox_role/index.html new file mode 100644 index 0000000000..0fe3c2efbd --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.html @@ -0,0 +1,82 @@ +--- +title: Utiliser le rôle textbox +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/textbox_role +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#textbox"><code>textbox</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>textbox</code> est utilisé pour identifier un élément permettant la saisie d’un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>textbox</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> + +<p>L’utilisation par défaut est pour un champ de saisie monoligne où <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, enverra le formulaire, par exemple, comme avec le HTML <code><input type="text"></code>. Lorsqu’on a un champ multilignes et que les retours à la ligne sont pris en charge, par exemple avec l’utilisation d’un élément HTML <code><textarea></code>, il est également nécessaire de définir l’attribut <code>aria-multiline="true"</code>.</p> + +<p>Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut <code>aria-readonly="true"</code> sur l’élément concerné.</p> + +<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> + +<p>Lorsque le rôle <code>textbox</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément comme ayant un rôle <code>textbox</code> à l’API d’accessibilité du système d’exploitation ;</li> + <li>Déclencher un événement <code>textbox</code> accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> + +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> + +<ul> + <li>Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ;</li> + <li>Les loupes d’écran devraient agrandir la boite de texte.</li> +</ul> + +<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_ajout_du_rôle_textbox_dans_le_code_HTML_d’un_champ_de_saisie_monoligne_<input>">Exemple 1 : ajout du rôle <code>textbox</code> dans le code HTML d’un champ de saisie monoligne <code><input></code></h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>textbox</code> est ajouté directement dans le code source HTML.</p> + +<pre class="brush: html"><input type="text" role="textbox" value="Voici du texte" /></pre> + +<h4 id="Exemple_2_ajout_du_rôle_textbox_dans_le_code_HTML_d’un_champ_de_saisie_multilignes_<textarea>">Exemple 2 : ajout du rôle <code>textbox</code> dans le code HTML d’un champ de saisie multilignes <code><textarea></code></h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>textbox</code> est ajouté directement dans le code source HTML.</p> + +<pre class="brush: html"><textarea role="textbox" aria-multiline="true"> + Voici du texte + … + sur plusieurs lignes. +</textarea> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ;</li> + <li>Les champs en lecture seule devraient être indiqués avec l’attribut <code>aria-readonly</code>.</li> +</ul> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#textbox">textbox</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<p>N/A</p> + +<h3 id="Compatibilité">Compatibilité</h3> + +<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html new file mode 100644 index 0000000000..01b32548d2 --- /dev/null +++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html @@ -0,0 +1,305 @@ +--- +title: FAQ Applications Web et ARIA +slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA +tags: + - ARIA + - Accessibilité + - Développement Web + - À relire +translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +--- +<h2 id="Qu’est-ce_qu’ARIA">Qu’est-ce qu’ARIA ?</h2> + +<p>WAI-ARIA est la spécification <a class="external" href="http://www.w3.org/WAI/intro/aria.php" hreflang="en" title="http://www.w3.org/WAI/intro/aria.php">Applications Internet Riches Accessibles</a> de la <a class="external" href="http://www.w3.org/WAI/" hreflang="en" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’accessibilité du Web) du <a class="external" href="http://www.w3.org/" hreflang="en" title="http://www.w3.org/">W3C</a>. ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs.</p> + +<p>ARIA fournit des éléments sémantiques additionnels afin de décrire les rôles, les états et la fonction de nombreux contrôles d’interfaces utilisateurs répandus, tels que les menus, les curseurs, les arbres et les dialogues. Il fournit également des informations structurelles supplémentaires, permettant aux auteurs d’identifier des points de repère, des zones et des grilles dans leurs pages Web. ARIA permet aux applications et aux composants JavaScript dynamiques d’interagir avec une grande variété de technologies d’assistance de bureau.</p> + +<p>Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article <a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles" title="Aperçu d’applications Web et de composants dynamiques accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a>.</p> + +<h2 id="Où_ARIA_est-il_pris_en_charge">Où ARIA est-il pris en charge ?</h2> + +<p>ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance.</p> + +<h3 id="Navigateurs">Navigateurs</h3> + +<p>ARIA est pris en charge dans les navigateurs suivants :</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Version minimale</th> + <th>Notes</th> + </tr> + <tr> + <td>Firefox</td> + <td>3.0+</td> + <td>Fonctionne avec NVDA, JAWS 10+ et Orca</td> + </tr> + <tr> + <td><a class="external" href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support" hreflang="en" title="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td> + <td>Dernière</td> + <td>Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15</td> + </tr> + <tr> + <td>Safari</td> + <td>4+</td> + <td>La prise en charge par Safari 5 est grandement améliorée.<br> + La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion</td> + </tr> + <tr> + <td><a class="external" href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/" hreflang="en" title="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td> + <td>9.5+</td> + <td>Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ?</td> + </tr> + <tr> + <td><a class="external" href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx" hreflang="en" title="http://msdn.microsoft.com/en-us/library/cc891505(v=vs.85).aspx">Internet Explorer</a></td> + <td>8+</td> + <td>Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA.<br> + La prise en charge dans IE9 est grandement améliorée.</td> + </tr> + </tbody> +</table> + +<p>Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources :</p> + +<ul> + <li><a class="external" href="http://caniuse.com/wai-aria" hreflang="en" title="http://caniuse.com/wai-aria">caniuse.com</a></li> + <li><a class="external" href="http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html" hreflang="en" title="http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html">Le groupe Paciello</a></li> +</ul> + +<h3 id="Technologies_d’assistance">Technologies d’assistance</h3> + +<p>Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont :</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Technologies d’assistance</th> + <th>Version minimale pour un ARIA de base</th> + <th>Version minimale pour la prise en charge des zones live et des alertes</th> + </tr> + <tr> + <td>NVDA</td> + <td>2010.2<br> + (NVDA propose toujours des mises à jour gratuites)</td> + <td>2011.1 pour Firefox, pas de prise en charge des zones live dans IE avant 2011.2.</td> + </tr> + <tr> + <td>Orca</td> + <td>? (À définir)</td> + <td>? (À définir)</td> + </tr> + <tr> + <td>VoiceOver</td> + <td>OSX 10.5,<br> + iOS 4</td> + <td>OS X 10.7<br> + iOS 5</td> + </tr> + <tr> + <td>JAWS</td> + <td>8</td> + <td>10</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>7</td> + <td>Pas de prise en charge des zones live</td> + </tr> + <tr> + <td>ZoomText</td> + <td>?</td> + <td>Pas de prise en charge des zones live</td> + </tr> + </tbody> +</table> + +<p>Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes.</p> + +<p>For notes on JAWS support for ARIA as of JAWS 10, lire cet article du <em>groupe Paciello</em> : <a class="external" href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/" hreflang="en" title="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>.</p> + +<h3 id="Kits_de_développement_JavaScript">Kits de développement JavaScript</h3> + +<p>Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris :</p> + +<ul> + <li>Dojo/Dijit</li> + <li>jQuery UI</li> + <li>Fluid Infusion</li> + <li>Google Closure</li> + <li>Google Web Toolkit</li> + <li>BBC Glow</li> + <li>Yahoo! User Interface Library (YUI)</li> +</ul> + +<p>Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :</p> + +<ul> + <li><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" hreflang="en" title="WAI-ARIA Implementation in JavaScript UI Libraries">WAI-ARIA Implementation in JavaScript UI Libraries</a> (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner</li> +</ul> + +<h2 id="Pouvez-vous_me_montrez_un_exemple_d’ARIA_en_action">Pouvez-vous me montrez un exemple d’ARIA en action ?</h2> + +<p><a name="aria-in-action">Voici le code HTML pour une barre de progression :</a></p> + +<pre class="brush:html;"><div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> +</pre> + +<p>Cette barre de progression est construite à l’aide de l’élément <code><div></code>, qui n’est pas des plus descriptif. Malheureusement, en HTML4 il n’existe pas de balise plus sémantique pour les développeurs, aussi avons nous besoin d’inclure les rôles et les propriétés ARIA. Ils sont spécifiés en ajoutant des attributs à l’élément <code><div></code>. Dans cet exemple, l’attribut <code>role="progressbar"</code> informe le navigateur que cet élément est actuellement un composant de barre de progression codé en JavaScript. Les attributs <code>aria-valuemin</code> et <code>aria-valuemax</code> spécifient les valeurs limites de la barre de progression, et <code>aria-valuenow</code> décrit a valeur courante.</p> + +<p>Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci :</p> + +<pre class="brush: javascript" id="line96">// Trouver le <div> de la barre de progression dans le DOM. +var progressBar = document.getElementById("percent-loaded"); + +// Définition de ses rôles et états ARIA , +// pour que les technologies d’assistance sachent quel type de composant il s’agit. +progressBar.setAttribute("role", "progressbar"); +progressBar.setAttribute("aria-valuemin", 0); +progressBar.setAttribute("aria-valuemax", 100); + +// Création d’une fonction qui peut être appelée à n’importe quel moment +// pour actualiser la valeur de la barre de progression. +function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); +}</pre> + +<h2 id="L’ajout_d’ARIA_changera-t-il_le_style_ou_le_comportement_de_mes_pages">L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ?</h2> + +<p>Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assistance, et n’affecte pas les fonctionnalités natives du navigateur en respectant le DOM ou les styles. Du point de vue des navigateurs, le HTML natif définit le sens et le comportement sémantique d’un élément, et les attributs ARIA agissent comme une surcouche permettant de prendre en charge les APIs des technologies d’assistance. Bien qu’ARIA ne modifiera aucun style par lui-même, comme pour tous les attributs HTML les CSS peuvent profiter des attributs ARIA comme sélecteurs d’élément. Ceci peut fournir un mécanisme pratique pour styles les composants intégrant ARIA.</p> + +<pre class="brush: css">.tab-panel[aria-hidden="true"] { + display: none; + } + +.tab-panel[aria-hidden="false"] { + display: block; + } +</pre> + +<h2 id="Qu'en_est-il_de_la_validation">Qu'en est-il de la validation ?</h2> + +<p>Les nouveaux attributs introduits dans ARIA, tels que les <strong><code>role</code></strong> et ceux préfixés avec <strong><code>aria-</code></strong>, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au <a class="external" href="http://validator.w3.org/" hreflang="en" title="http://validator.w3.org/">validateur du W3C</a>.</p> + +<p>La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question <a href="#aria-in-action" title="#aria-in-action">Pouvez-vous me montrez un exemple d’ARIA en action ?</a> ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques.</p> + +<p>Une autre alternative est l’utilisation d’un <em>doctype</em> HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5.</p> + +<h2 id="Comment_HTML5_s’associe-t-il_avec_ARIA">Comment HTML5 s’associe-t-il avec ARIA ?</h2> + +<p>HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <code><progress></code>. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon <a class="external" href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/" hreflang="en" title="HTML5 and the Myth of WAI-ARIA Redundance">aperçu des relations entre HTML5 et ARIA</a>.</p> + +<h4 id="Dégradation_élégante_de_HTML5_vers_ARIA">Dégradation élégante de HTML5 vers ARIA</h4> + +<p>Pour fournir du contenu aux navigateurs qui n’implémentent pas HTML5, vous pouvez considérer une dégradation élégante de l’utilisation d’ARIA là où c’est nécessaire. Ainsi, en utilisant l’exemple de la barre de progression, vous pouvez dégrader élégamment un <code>role="progressbar"</code> pour les cas où la balise <code><progressbar></code> n’est pas prise en charge.</p> + +<p>Voici un exemple de code utilisé pour une barre de progression en HTML5 :</p> + +<pre class="brush: html" id="line96"><!DOCTYPE html> +<html> + <head><title>Dégrader élégamment la barre de progression</title></head> + <body> + <progress id="progress-bar" value="0" max="100">0% complété(s)</progress> + <button id="update-button">Actualiser</button> + </body> +</html> +</pre> + +<p>… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :</p> + +<pre class="brush: javascript" id="line97">var progressBar = document.getElementById("progress-bar"); + +// Vérifions que le navigateur implémente la balise HTML5 <progress>. +var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined"); + +function setupProgress() { + if (!supportsHTML5Progress) { + // HTML5 <progress> n’est pas implémenté dans ce navigateur, aussi + // avons-nous besoin d’ajouter des rôles et des états ARIA à l’élément. + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + } +} + +function updateProgress(percentComplete) { + if (!supportsHTML5Progress) { + // HTML5 <progress> n’est pas implémenté dans ce navigateur, + // aussi avons-nous besoin de mettre à jour l’attribut aria-valuenow + progressBar.setAttribute("aria-valuenow", percentComplete); + } else { + // HTML5 <progress> is supported, so update the value attribute instead. + progressBar.setAttribute("value", percentComplete); + } + + progressBar.textContent = percentComplete + "% complété(s)"; +} + +function initDemo() { + setupProgress(); // Setup the progress bar. + + // Lier un événement clic au bouton, ce qui actualisera la barre de progression à 75%. + document.getElementById("update-button").addEventListener("click", function (e) { + updateProgress(75); + e.preventDefault(); + }, false); +} +initDemo(); +</pre> + +<h2 id="Comment_fonctionnent_les_technologies_d’assistance">Comment fonctionnent les technologies d’assistance ?</h2> + +<p>Les technologies d’assistance utilisent une API intégrée à chaque système d’exploitation spécifiquement conçue pour décrire les rôles, les états et la structure de l’interface utilisateur d’une application. Par exemple, un lecteur d’écran utilise cette API pour lire l’interface utilisateur avec un moteur de synthèse vocale (text-to-speech), une loupe l’utilise pour mettre en évidence les zones importantes ou actives de l’écran et un clavier virtuel peut s’en servir pour fournir la disposition de clavier la plus efficace dans un contexte donné ou au contrôle d’une interface utilisateur. Les technologies d’assistance accèdent souvent au DOM d’une page au travers de cette API afin de comprendre la sémantique et les attributs de la page.</p> + +<p>ARIA fournit un pont entre le monde du DOM et le bureau. Les navigateurs exposent les éléments ARIA aux API des technologies d’assistance comme s’ils étaient des composants natifs. En conséquence, l’utilisateur a potentiellement une expérience plus cohérente là où les composants dynamiques JavaScript sont comparables sur le Web à leurs équivalents bureau.</p> + +<h2 id="Comment_tester_mon_utilisation_d’ARIA_Existe-t-il_des_outils_libres_ou_gratuits">Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ?</h2> + +<p>Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA :</p> + +<ul> + <li><em>Object Inspector</em> sur Windows</li> + <li><em>Accessibility Inspector</em> sur Mac OS X</li> + <li><em>AccProbe</em> sur Linux</li> + <li><em>Inspecteur DOM</em> de Firebug</li> + <li>L’<a class="external" href="http://code.google.com/p/ainspector/" hreflang="en" title="http://code.google.com/p/ainspector/"><em>Inspecteur d’accessibilité</em> de Firebug</a></li> +</ul> + +<p>Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :</p> + +<ul> + <li><a class="external" href="http://live.gnome.org/Orca" hreflang="en" title="http://live.gnome.org/Orca">Orca</a> pour Linux</li> + <li><a class="external" href="http://www.nvda-project.org/" hreflang="en" title="http://www.nvda-project.org/">NVDA</a> pour Windows</li> + <li><a class="external" href="http://www.apple.com/accessibility/voiceover/" hreflang="en" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> est intégré à Mac OS X</li> +</ul> + +<p>Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :</p> + +<ol> + <li>Les tests occasionnels avec un lecteur d’écran ne pourront jamais remplacer les retours d’expérience, les tests ou l’aide de véritables utilisateurs au quotidien.</li> + <li>L’accessibilité est plus vaste que la simple prise en charge des lecteurs d’écran. Essayez de mener des tests avec divers cas d’utilisation et techniques d’accessibilité.</li> +</ol> + +<p>Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :</p> + +<ul> + <li><a class="external" href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html" hreflang="en" title="Test ARIA Focus Bookmarklets">Yahoo!'s ARIA bookmarklets</a></li> + <li><a class="external" href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol" hreflang="en" title="Simple Accessibility Review Protocol">simple accessibility evaluation techniques</a> du <em>Fluid Project</em> (techniques simples d’évaluation de l’accessibilité)</li> +</ul> + +<h2 id="Où_se_tiennent_les_discussion_concernant_ARIA">Où se tiennent les discussion concernant ARIA ?</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/wai-xtech/" hreflang="en" title="WAI XTech Public List">Liste de diffusion Wai-xtech</a> – Discussions sur les spécification d’ARIA.</li> + <li><a class="external" href="http://groups.google.com/group/free-aria" hreflang="en" title="http://groups.google.com/group/free-aria">groupe Google Free-ARIA</a> – pour les développeurs et les utilisateurs d’outils et de ressources libres.</li> +</ul> + +<h2 id="Où_peut-on_en_apprendre_davantage_à_propos_d’ARIA">Où peut-on en apprendre davantage à propos d’ARIA ?</h2> + +<ul> + <li><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles" title="Aperçu d’applications Web et de composants dynamiques accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a></li> + <li><a href="/fr/docs/Accessibilité/Formulaires_accessibles" title="Formulaires_accessibles">Formulaires accessibles</a></li> + <li>La <a class="external" href="http://www.w3.org/WAI/aria/faq" hreflang="en" title="http://www.w3.org/WAI/aria/faq">FAQ WAI-ARIA</a> du W3C.</li> + <li><a class="external" href="http://webaim.org/techniques/aria/" hreflang="en" title="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a> (Accessibilité des applications Internet riches) de WebAIM.</li> +</ul> diff --git a/files/fr/web/accessibility/community/index.html b/files/fr/web/accessibility/community/index.html new file mode 100644 index 0000000000..505756ec1c --- /dev/null +++ b/files/fr/web/accessibility/community/index.html @@ -0,0 +1,17 @@ +--- +title: Communauté +slug: Accessibilité/Communauté +tags: + - Accessibilité +translation_of: Web/Accessibility/Community +--- +<p class="summary"><span class="seoSummary">Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.</span></p> + +<p>Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous.</p> + +<ul> + <li><a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.accessibility">Newsgroup Mozilla Accessibility</a></li> + <li><a class="external" href="http://www.w3.org/WAI/IG/">Liste de discussion du groupe WAI</a></li> + <li><a class="external" href="http://www.mozilla.org/projects/ui/accessibility/unix">Projet d'accessibilité d'Unix</a> (référence en anglais)</li> + <li><a class="external" href="http://www.mozilla.org/access/resources">SUN Mozilla Accessibility Task Force</a></li> +</ul> diff --git a/files/fr/web/accessibility/index.html b/files/fr/web/accessibility/index.html new file mode 100644 index 0000000000..eb607344a4 --- /dev/null +++ b/files/fr/web/accessibility/index.html @@ -0,0 +1,78 @@ +--- +title: Accessibilité +slug: Accessibilité +tags: + - Accessibilité + - Avancé + - Développement Web + - Guide +translation_of: Web/Accessibility +--- +<p><span class="seoSummary">L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible.</span></p> + +<p>« <strong>L'accessibilité du web</strong> signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( <a href="http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web">L'accessibilité du Web définie dans Wikipédia</a>)</p> + +<p>« <strong>L'accessibilité numérique est la mise à la disposition de tous les individus</strong> – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » <a href="http://www.w3.org/standards/webdesign/accessibility" hreflang="en" title="http://www.w3.org/standards/webdesign/accessibility">W3C Accessibility</a></p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Tutoriels clefs</h2> + +<p>La documentation MDN <a href="/fr/docs/Accessibilit%C3%A9">Accessibilité</a> contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:</p> + +<dl> + <dt><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est-ce que l'accessibilité?</a></dt> + <dd>Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela inclut ce que des groupes de personnes ont besoin de considérer et pourquoi, quels outils ils utilisent afin d'interagir avec les pages web et comment rendre accessible la partie de notre espace de travail web.</dd> + <dt><a href="/fr/docs/Apprendre/a11y/HTML">HTML: Une bonne base pour l'accessibilité</a></dt> + <dd>Un nombre important de ressources du web peuvent être accessibles juste en utilisant correctement les éléments HTML dans leur usage approprié. Cet article résume en détail comment le HTML peut être utilisé afin de garantir une accessibilité maximum.</dd> + <dt><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleure pratiques d'accessibilité CSS et JavaScript </a></dt> + <dd>CSS et JavaScript, quand ils sont utilisés convenablement, ont le potentiel de permettre des expériences Web accessibles… ou bien ils peuvent significativement nuire à celle-ci si mal utilisés. <span lang="fr">Cet article décrit certaines pratiques exemplaires en langages CSS et JavaScript qui devraient être prises en compte pour garantir que le contenu, même complexe, soit aussi accessible que possible.</span></dd> + <dt><a href="/fr/docs/Apprendre/a11y/WAI-ARIA_basics">Les bases de WAI-ARIA</a></dt> + <dd><span lang="fr">Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité.</span></dd> + <dt><a href="/fr/docs/Apprendre/a11y/Multimedia">Multimédia accessible </a></dt> + <dd><span lang="fr">Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire.</span></dd> + <dt><a href="/fr/docs/Apprendre/a11y/Mobile">Accessibilité sur mobile</a></dt> + <dd><span lang="fr">Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plate</span>s‑<span lang="fr">formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plate</span>s‑<span lang="fr">formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles.</span></dd> +</dl> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + +<dl> + <dt><a href="/fr/docs/Accessibilité/Développement_Web" title="Développement Web">Développement web</a></dt> + <dd>Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.</dd> + <dt><a href="/fr/docs/Accessibilité/ARIA" title="/fr/docs/Accessibilité/ARIA">ARIA</a></dt> + <dd>Un ensemble d'articles pour apprendre à utiliser ARIA pour améliorer l'accessibilité de vos documents HTML.</dd> + <dt><a href="/fr/docs/Accessibilité/Développement_TA" title="Développement AT">Développement de Technologie d'assistance (TA)</a></dt> + <dd>Un ensemble d'articles destiné aux développeurs de technologies d'assistance.</dd> + <dt><a href="/fr/docs/Accessibilité/Checklist_accessibilite_mobile">Check-list pour l'accessibilité mobile</a></dt> + <dd>Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.</dd> +</dl> + +<p><span class="alllinks"><a href="/fr/docs/tag/Accessibilité" title="/fr/docs/tag/Accessibilité">Tous les articles relatifs à l'accessibilité…</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Outils pour les développeurs web</h2> + +<ul> + <li><a class="external" href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html" title="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Tests d'accessibilité automatisés</a></li> + <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs, un émulateur de lecteur d'écran</a></li> +</ul> + +<p><span class="alllinks"><a href="/fr/docs/tag/Accessibilité:Outils" title="fr/docs/tag/Accessibilité:Outils">Tous les outils…</a></span></p> + +<h2 class="Tools" id="Tools" name="Tools">Autres ressources</h2> + +<ul> + <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Liste des lecteurs d'écran</a></li> + <li><a class="external" href="http://openweb.eu.org/">OpenWeb</a> — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.</li> + <li><a class="external" href="http://opquast.com/">Opquast.com</a> — Bonnes pratiques qualité pour les services en ligne.</li> + <li><a class="external" href="http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html">AccessiWeb</a> — Référentiel AccessiWeb pour l'accessibilité.</li> + <li><a href="http://accede-web.com/fr/projet-accede-web/" title="http://accede-web.com/fr/projet-accede-web/">AcceDe Web</a> — Documents adaptés aux principaux intervenants d’un projet web.</li> +</ul> +</div> +</div> +</div> diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html new file mode 100644 index 0000000000..2bd83f5568 --- /dev/null +++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -0,0 +1,90 @@ +--- +title: Contrôles DHTML personnalisés navigables au clavier +slug: Contrôles_DHTML_personnalisés_navigables_au_clavier +tags: + - AJAX + - Accessibilité + - DHTML +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +<p> </p> +<h3 id="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier" name="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier">Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier</h3> +<p>Un nombre croissant d'applications Web utilise <a href="fr/JavaScript">JavaScript</a> pour imiter des contrôles ( + <i> + widgets</i> + ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des <code><div></code> et autres <code><span></code> stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte.</p> +<p>Prenons un exemple concret : la plupart des menus <a href="fr/DHTML">DHTML</a> ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément <code><a></code>). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets.</p> +<p>Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : <a href="fr/ARIA/Applications_riches_Internet_accessibles">ARIA : Applications riches Internet accessibles</a>.</p> +<h3 id="La_solution_:_modifier_le_comportement_standard_de_tabindex" name="La_solution_:_modifier_le_comportement_standard_de_tabindex">La solution : modifier le comportement standard de <code>tabindex</code></h3> +<p>Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut <code>tabindex</code> pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp">système d'IE pour <code>tabindex</code></a>, il devient possible de permettre aux contrôles <a href="fr/DHTML">DHTML</a>, déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles.</p> +<p>Le tableau qui suit décrit le nouveau comportement de <code>tabindex</code> :</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Attribut <code>tabindex</code></th> + <th>Focus disponible à la souris ou par JavaScript via <code>element.focus()</code></th> + <th>Navigable avec tabulation</th> + </tr> + <tr> + <td>non présent</td> + <td>Suit le comportement par défaut de l'élément (oui pour les contrôles de formulaires, les liens, etc).</td> + <td>Suit le comportement par défaut de l'élément.</td> + </tr> + <tr> + <td>Négatif<br> + (par exemple <code>tabindex="-1"</code>)</td> + <td>Oui</td> + <td>Non, l'auteur doit donner le focus avec <code>element.focus()</code> suite à l'utilisation des flèches ou d'autres touches.</td> + </tr> + <tr> + <td>Zéro<br> + (par exemple <code>tabindex="0"</code>)</td> + <td>Oui</td> + <td>Dans l'ordre de tabulation relativement à la position de l'élément dans le document.</td> + </tr> + <tr> + <td>Positif<br> + (par exemple <code>tabindex="33"</code>)</td> + <td>Oui</td> + <td>La valeur <code>tabindex</code> change manuellement lorsque cet élément est positionné dans l'ordre de tabulation. Ces éléments seront positionnés dans l'ordre de tabulation avant les éléments ayant <code>tabindex="0"</code> ou qui sont naturellement + <i> + tabulables</i> + .</td> + </tr> + </tbody> +</table> +<h3 id="Utilisation_du_nouveau_syst.C3.A8me" name="Utilisation_du_nouveau_syst.C3.A8me">Utilisation du nouveau système</h3> +<p>Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser <code>tabindex="0"</code> sur l'élément <code><div>></code> ou <code><span></code> le représentant. Vous pouvez consulter un exemple d'une <a class="external" href="http://www.mozilla.org/access/dhtml/class/checkbox">case à cocher basée sur un <code><span></code></a> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle <code>:before</code> pour l'image de la case à cocher ne fonctionne pas dans IE).</p> +<p>Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir <code>tabindex="0"</code>, et chaque choix descendant (onglet/cellule/ligne) doit avoir <code>tabindex="-1"</code>. Un évènement <code>keydown</code> surveillant les flèches directionnelles peut ensuite utiliser <code>element.focus()</code> pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une <a class="external" href="http://www.mozilla.org/access/dhtml/class/tree">vue arborescente DHTML</a> accessible au clavier et aux lecteurs d'écran dans Firefox ( + <i> + nightlies</i> + ). Le travail pour le faire fonctionner dans IE est encore en cours.</p> +<p>N'oubliez pas que ceci ne fait pas encore partie d'un standard W3C ou autre organisme officiel. Pour l'instant, il est nécessaire de faire quelques entorses aux règles afin d'obtenir une pleine accessibilité au clavier.</p> +<h3 id="Astuces_d.27.C3.A9criture" name="Astuces_d.27.C3.A9criture">Astuces d'écriture</h3> +<h4 id="Utilisation_d.27onfocus_pour_suivre_le_focus" name="Utilisation_d.27onfocus_pour_suivre_le_focus">Utilisation d'<code>onfocus</code> pour suivre le focus</h4> +<p>Les attributs de gestion d'évènements <code>onfocus</code> et <code>onblur</code> peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface <a href="fr/DOM">DOM</a> standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable <a href="fr/JavaScript">JavaScript</a> pour le suivre.</p> +<p>Ne supposez pas que tous les changements de focus viendront des évènements clavier ou souris, car les technologies d'assistance, comme les lecteurs d'écran, peuvent donner le focus à n'importe quel élément pouvant en disposer et cela doit être traité élégamment par le contrôle JavaScript.</p> +<h4 id="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex" name="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex">Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété <code>tabIndex</code></h4> +<p>Ceci peut être utile à réaliser si un contrôle personnalisé devient actif ou inactif. Les contrôles inactifs ne doivent pas être dans l'ordre de tabulation. Cependant, il est typiquement possible de les atteindre avec les flèches s'ils font partie d'un contrôle de navigation groupé.</p> +<h4 id="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus" name="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus">Utilisation de <code>setTimeout</code> avec <code>element.focus()</code> pour donner le focus</h4> +<p>N'utilisez pas <code>createEvent()</code>, <code>initEvent()</code> et <code>dispatchEvent()</code> pour donner le focus à un élément, parce que les évènements DOM <code>focus</code> sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci :</p> +<pre class="eval">setTimeout("gFocusItem.focus();",0); // gFocusItem doit être une variable globale +</pre> +<h4 id="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus" name="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus">Ne pas utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler le focus</h4> +<p>Il ne sera pas possible d'utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler l'élément ayant le focus, si vous voulez que cela apparaisse également dans IE. Changez plutôt le style dans un gestionnaire d'évènement <code>onfocus</code>. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez <code>this.style.backgroundColor = "gray";</code>.</p> +<h4 id="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation" name="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation">Toujours dessiner le focus pour les éléments avec <code>tabindex="-1"</code> et qui reçoivent le focus par programmation</h4> +<p>IE ne dessinera pas automatiquement l'encadrement du focus pour les éléments qui reçoivent le focus de manière programmée. Choisissez entre changer la couleur de fond via quelque chose comme <code>this.style.backgroundColor = "gray";</code> ou ajoutez une bordure pointillée via <code>this.style.border = "1px dotted invert"</code>. Dans le cas d'une bordure pointillée, il sera nécessaire de s'assurer que ces éléments aient une bordure invisible de <tt>1px</tt> au départ, afin que l'élément ne change pas de taille lorsque le style de bordure est appliqué (les bordures prennent de la place et IE n'implémente pas les encadrements CSS).</p> +<h4 id="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress" name="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress">Utilisation de <code>onkeydown</code> pour les évènements clavier, plutôt que <code>onkeypress</code></h4> +<p>IE ne déclenchera pas les évènements <code>keypress</code> pour les touches non alphanumériques.</p> +<h4 id="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur" name="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur">Empêcher les évènements clavier d'effectuer des fonctions du navigateur</h4> +<p>Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit :</p> +<pre class="eval"><span tabindex="-1" onkeydown="return handleKeyDown();"> +</pre> +<p>Si <code>handleKeyDown()</code> renvoie <code>false</code>, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée.</p> +<h4 id="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment" name="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment">Utilisation d'évènements clavier pour permettre l'activation de l'élément</h4> +<p>Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez <code>onclick="faireQuelqueChose()"</code> vous aurez aussi besoin de <code>onkeydown="return event.keyCode != 13 || faireQuelqueChose();"</code> afin de permettre à la touche Entrée d'activer cet élément.</p> +<h4 id="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript" name="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript">Utilisation de try/catch pour éviter les erreurs JavaScript</h4> +<p>Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété <code>tabIndex</code> sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du <a class="external" href="http://whatwg.org/">WHATWG</a>).</p> +<h4 id="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant" name="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant">Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant</h4> +<p>Malheureusement, <code>onkeydown</code> peut ou non être répété suivant le système d'exploitation utilisé. Consultez le {{ Bug(91592) }} dans la base de données Bugzilla.</p> +<p>{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }}</p> diff --git a/files/fr/web/accessibility/mobile_accessibility_checklist/index.html b/files/fr/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..6e90ebca17 --- /dev/null +++ b/files/fr/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,89 @@ +--- +title: Check-list pour l'accessibilité mobile +slug: Accessibilité/Checklist_accessibilite_mobile +tags: + - Accessibility + - B2G + - Firefox OS + - Mobile + - checklist +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +<div class="summary"> + <p><span class="seoSummary">Ce document fournit une liste concise des points à vérifier par les développeurs pour garantir l’accessibilité d’une application mobile. Ce document est amené à évoluer pour tenir compte de nouvelles bonnes pratiques.</span></p> +</div> +<h2 id="Couleur">Couleur</h2> +<ul> + <li>Le contraste des couleurs <strong>DOIT</strong> respecter le niveau AA de <a href="http://www.w3.org/TR/WCAG/" hreflang="en">WCAG 2.0</a> : + <ul> + <li>Un contraste dont le ratio est de 4.5:1 pour les textes normaux (dont la fonte est inférieure à 18 points ou 14 points en gras) ;</li> + <li>Un contraste dont le ratio est de 3:1 pour les grands textes (18 points minimum ou 14 points en gras).</li> + </ul> + </li> + <li>L’information véhiculée par la couleur <strong>DOIT</strong> toujours être disponible via un autre moyen (ex : les liens peuvent être bleus mais aussi soulignés, etc.).</li> +</ul> +<div class="note"> + <p><strong>Note</strong> :</p> + <ul> + <li>Sur <a href="www.yoyodesign.fr">Yoyo Design</a> vous trouverez l’outil <a href="http://www.yoyodesign.org/outils/ncolor/index.fr" title="Le sélecteur de couleurs nColor">nColor</a> de sélection des couleurs. Il vous permettra de simuler les différents types de visions daltoniennes ;</li> + <li>Jon Snook a écrit un outil intéressant permettant de vérifier le contraste des couleurs : <a href="http://snook.ca/technical/colour_contrast/colour.html" hreflang="en">Colour Contrast Checker (en)</a> ;</li> + <li>Alternativement, le <em>Tanaguru Contrast-Finder</em> fait un travail similaire, mais il propose en plus une palette de couleurs similaires mais offrant un meilleur contraste.</li> + </ul> +</div> +<h2 id="La_visibilité">La visibilité</h2> +<ul> + <li>Les techniques de masquage du contenu comme une opacité nulle, l’ordre des z-index et la position hors-écran <strong>NE DOIVENT PAS</strong> être utilisées aux seules fins de visibilité ;</li> + <li>Tout ce qui n’apparaît pas dans la partie visible de l’écran <strong>DOIT </strong>réellement être invisible (en particulier pour les applications d’une page comportant plusieurs « cartes » ) : + <ul> + <li>Il <strong>FAUT </strong>utiliser l’attribut <code>hidden</code> ou les propriétés de style <code>visibility</code> ou <code>display</code> ;</li> + <li>À moins d’être absolument indispensable, l’attribut <code>aria-hidden</code> <strong>NE DOIT PAS </strong>être utilisé.</li> + </ul> + </li> +</ul> +<h2 id="Le_focus">Le focus</h2> +<ul> + <li>Tous les éléments activables <strong>DOIVENT</strong> pouvoir porter le focus : + <ul> + <li>Les contrôles standards tels que les liens, les boutons et les champs de formulaire peuvent, par défaut, porter le focus ;</li> + <li>Les contrôles non standards <strong>DOIVENT</strong> être assignés à un <a href="http://www.w3.org/TR/wai-aria/roles" hreflang="en">rôle ARIA</a>, comme <code>button</code>, <code>link</code> ou <code>checkbox</code>.</li> + </ul> + </li> + <li>Le focus doit être géré de façon logique et cohérente.</li> +</ul> +<h2 id="Les_équivalents_textuels">Les équivalents textuels</h2> +<ul> + <li>Les équivalents textuels <strong>DOIVENT</strong> être fournis pour chacun des éléments de l’application qui n’est pas strictement lié à la mise en forme : + <ul> + <li>Les attributs <code>alt</code> et <code>title</code> doivent être utilisés aux endroits appropriés (<em>lire l’article de </em>Steve Faulkner sur <a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/" hreflang="en">L’utilisation de l’attribut HTML <code>title</code> (en)</a>) ;</li> + <li>Si les attributs ci-dessus ne sont pas appliquables, on utilise les <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header" hreflang="en">propriétés ARIA</a> appropriées comme <code>aria-label</code>, <code>aria-labelledby</code> et <code>aria-describedby</code>.</li> + </ul> + </li> + <li>Les images avec du texte <strong>DOIVENT</strong> être évitées ;</li> + <li>Tous les contrôles de formulaire <strong>DOIVENT</strong> posséder des éléments {{ htmlelement("label") }} pour permettre aux lecteurs d’écran de les utiliser.</li> +</ul> +<h2 id="La_gestion_des_états">La gestion des états</h2> +<ul> + <li>Les contrôles standards comme les boutons radio, les cases à cocher, sont gérés par le système d’exploitation. En revanche, pour les contrôles spécifiques, les changements d’états doivent être fournis via les <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header" hreflang="en">états ARIA</a> tels que <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code> et <code>aria-pressed</code>.</li> +</ul> +<h2 id="Principales_recommandations">Principales recommandations</h2> +<ul> + <li>Un titre <strong>DOIT </strong>être fourni pour désigner l’application ;</li> + <li>Les titres <strong>DOIVENT</strong> respecter une structure hiérarchique : + <pre class="brush: html"><h1>Titre de premier niveau</h1> + <h2>Titre de deuxième niveau</h2> + <h2>Un autre titre de niveau 2</h2> + <h3>Un titre inférieur</h3></pre> + </li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header" hreflang="en">Les points de repères ARIA</a> <strong>DOIVENT</strong> être utilisés pour décrire une application ou la structure d’un document comme <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code> ;</li> + <li>Les gestionnaires d’événements tactiles <strong>NE DOIVENT PAS</strong> être déclenchés avant l’événement <code>touchend</code> ;</li> + <li>Les points d’interaction tactiles <strong>DOIVENT </strong>être suffisamment grands pour garantir une bonne interaction (voir <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size" hreflang="en">les recommandations de la BBC sur l’accessibilité mobile (en)</a> sur ce sujet).</li> +</ul> + +<div class="note"> + <p><strong>Note</strong> : <a href="http://www.tanaguru.com/">Le service de test automatique d'accessibilité de Tanaguru</a> fournit un moyen pratique de corriger les erreurs d'accessibilité pouvant se glisser dans une page Web, ou d'une application Web locale (par exemple Firefox OS). Vous trouverez plus d'informations concernant l'implémentation technique de Tanaguru, et comment contribuer au projet, sur <a href="http://tanaguru.org/">tanaguru.org</a>.</p> +</div> + +<div class="note"> + <p><strong>Note</strong> : la <a href="http://yzen.github.io/2014/04/30/mobile-accessibility-checklist.html" hreflang="en">version originale, anglaise, de ce document</a> a été écrite par <a href="http://yzen.github.io/" hreflang="en">Yura Zenevich</a>.</p> +</div> +<p> </p> diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html index 497a2675f7..497a2675f7 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html diff --git a/files/fr/web/api/ambient_light_events/index.html b/files/fr/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..4f30f285d0 --- /dev/null +++ b/files/fr/web/api/ambient_light_events/index.html @@ -0,0 +1,98 @@ +--- +title: Utiliser les événements de luminosité +slug: WebAPI/Utiliser_les_événéments_de_luminosité +tags: + - WebAPI +translation_of: Web/API/Ambient_Light_Events +--- +<p>{{SeeCompatTable }}</p> +<h2 id="Résumé">Résumé</h2> +<p>Les événements concernant la lumière environnante permettent à une application de percevoir simplement les changements de luminosité dans l'environnement de l'appareil. L'application peut donc ainsi réagir aux changements de luminosité : par exemple changer le contraste de l'interface ou changer l'exposition lors de la prise d'une photo.</p> +<h2 id="Les_événements_liés_à_la_lumière">Les événements liés à la lumière</h2> +<p>Lorsque le capteur de lumière détecte un changement de luminosité, il envoie une notification au navigateur. Lorsque le navigateur reçoit une notification, il déclenche un événement {{domxref("DeviceLightEvent")}} qui fournit des informations sur la valeur exacte de l'intensité lumineuse.</p> +<p>Cet événement peut être capturé au niveau de l'objet <code>window</code> en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant le nom d'événement {{event("devicelight")}}) ou en attachant le gestionnaire d'événément à la propriété {{domxref("window.ondevicelight")}}.</p> +<p>Une fois qu'il a été capturé, l'événement permet un accès à la valeur de l'intensité lumineuse, exprimée en <a href="http://fr.wikipedia.org/wiki/Lux_%28unit%C3%A9%29" title="http://en.wikipedia.org/wiki/Lux">lux</a> avec la propriété {{domxref("DeviceLightEvent.value")}}.</p> +<h2 id="Exemple">Exemple</h2> +<pre class="brush: js">window.addEventListener('devicelight', function(event) { + var html = document.getElementsByTagName('html')[0]; + + if (event.value < 50) { + html.classList.add('darklight'); + html.classList.remove('brightlight'); + } else { + html.classList.add('brightlight'); + html.classList.remove('darklight'); + } +});</pre> +<h2 id="Specifications" name="Specifications">Spécifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}</td> + <td>{{ Spec2('AmbientLight') }}</td> + <td>Spécification initiale</td> + </tr> + </tbody> +</table> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{domxref("DeviceLightEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoDesktop("22.0")}} (Mac OS X seulement)</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{domxref("DeviceLightEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3> +<p>L'événement {{event("devicelight")}} est implémenté et activé par défaut via un paramètre dans Firefox Mobile pour Android (15.0) et dans Firefox OS (B2G). Une implémentation pour un navigateur de bureau sur Mac OS X est également disponible à partir de Gecko 22.0 {{geckoRelease("22.0")}}. Le support pour Windows 7 est en cours de progression (voir {{bug(754199)}}).</p> +<h2 id="Voir_aussi">Voir aussi</h2> +<ul> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{event("devicelight")}}</li> +</ul> diff --git a/files/fr/web/api/audiocontext/creategain/index.html b/files/fr/web/api/baseaudiocontext/creategain/index.html index b9142efffc..b9142efffc 100644 --- a/files/fr/web/api/audiocontext/creategain/index.html +++ b/files/fr/web/api/baseaudiocontext/creategain/index.html diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..b729a42222 --- /dev/null +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,52 @@ +--- +title: Un raycaster basique avec canvas +slug: Un_raycaster_basique_avec_canvas +tags: + - 3D + - Canvas + - Exemples + - Graphismes + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +<p>{{CanvasSidebar}}</p> + +<p class="summary">Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D <span id="result_box" lang="fr"><span>à l'aide de la projection de rayons.</span></span></p> + +<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p> + +<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Ouvrir une nouvelle fenêtre</a></strong></p> + +<h2 id="Pourquoi.C2.A0.3F" name="Pourquoi.C2.A0.3F">Pourquoi ?</h2> + +<p>Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <code><canvas></code> dont j'avais <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">entendu parler (en)</a>, non seulement allait être supporté par Firefox, mais était<em> </em><strong>déjà</strong> supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.</p> + +<p>La <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas">présentation</a> et le <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas">tutoriel </a><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas"> </a>canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.</p> + +<h2 id="Comment.C2.A0.3F" name="Comment.C2.A0.3F">Comment ?</h2> + +<p>L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">y conduire</a>, et je voulais voir si je pouvais y arriver.</p> + +<p>Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.</p> + +<p>Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe<em> Tricks of the Game Programming Gurus</em> (<small>ISBN: 0672305070</small>), et d'un <a class="external" href="http://www.shinelife.co.uk/java-maze/">Projeteur de rayons Java</a> que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.</p> + +<h2 id="R.C3.A9sultats" name="R.C3.A9sultats">Résultats</h2> + +<p>Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.</p> + +<p>De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)</p> + +<h2 id="Le_RayCaster" name="Le_RayCaster">Le projeteur de rayons <em>(ray-caster)</em></h2> + +<p>De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un <a class="external" href="https://mdn.github.io/canvas-raycaster/">coup d'oeil</a>, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).</p> + +<p>Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <code><canvas></code> et amusez-vous!<br> + <br> + <small><a href="fr/Un_raycaster_basique_avec_canvas/input.js">input.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Level.js">Level.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Player.js">Player.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.html">RayCaster.html</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.js">RayCaster.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.css">trace.css</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.js">trace.js</a> </small></p> + +<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir aussi</h3> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas">Canvas tutorial</a></li> +</ul> diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html new file mode 100644 index 0000000000..8a95281220 --- /dev/null +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -0,0 +1,158 @@ +--- +title: Manipulation vidéo avec la balise canvas +slug: HTML/Manipulating_video_using_canvas +tags: + - Canvas + - Video +translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +--- +<p>{{CanvasSidebar}}</p> + +<p class="summary">En combinant les possibilités de l'élément <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> avec celles de l'élément <a class="internal" href="/en/HTML/Canvas" title="En/Canvas"><code>canvas</code></a>, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (<em>fond vert</em>) en utilisant JavaScript.</p> + +<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">Voir l'exemple</a>.</p> + +<h2 id="Le_contenu_du_document">Le contenu du document</h2> + +<p>Le document XHTML utilisé <span id="result_box" lang="fr"><span>pour rendre ce contenu est montré ci-dessous :</span></span></p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> + <span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">background</span><span class="punctuation token">:</span> black<span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span><span class="hexcode token">#CCCCCC</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="selector token"><span class="id token">#c2</span> </span><span class="punctuation token">{</span> + <span class="property token">background-image</span><span class="punctuation token">:</span> <span class="token url">url(foo.png)</span><span class="punctuation token">;</span> + <span class="property token">background-repeat</span><span class="punctuation token">:</span> no-repeat<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="selector token">div </span><span class="punctuation token">{</span> + <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span> + <span class="property token">border</span> <span class="punctuation token">:</span><span class="number token">1</span>px solid <span class="hexcode token">#444444</span><span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span><span class="hexcode token">#3B3B3B</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>main.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>processor.doLoad()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video.ogv<span class="punctuation token">"</span></span> <span class="attr-name token">controls</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c1<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>160<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>96<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c2<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>160<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>96<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p>Les éléments clés à retenir sont :</p> + +<ol> + <li>Ce document dispose de deux balises <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="En/Canvas"><code>canvas</code></a>, avec les IDs <code>c1 </code>et <code>c2 :</code> l'élément <code>c1</code> est utilisé pour afficher l'image courante de la vidéo originale, pendant que <code>c2</code> est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; <code>c2</code> est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.</li> + <li>Le code JavaScript est importé dans le script nommé <code>main.js</code> ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.</li> + <li>Quand le document se charge, la méthode <code>processor.doLoad()</code>, dans le script <code>main.js</code>, est exécutée.</li> +</ol> + +<h2 id="Le_code_JavaScript">Le code JavaScript</h2> + +<p>Le code JavaScript <code>main.js</code> est composé de trois méthodes.</p> + +<h3 id="Initialisation_du_lecteur_avec_effet_d'incrustation_(chroma-key)">Initialisation du lecteur avec effet d'incrustation (<em>chroma-key</em>)</h3> + +<p>La métode <code>doLoad()</code> est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (<em>chroma-key</em>), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> processor<span class="punctuation token">;</span> + + processor<span class="punctuation token">.</span>doLoad <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">doLoad</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>video <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>c1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'c1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1 <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>c1<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>c2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'c2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>ctx2 <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>c2<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> self <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'play'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + self<span class="punctuation token">.</span>width <span class="operator token">=</span> self<span class="punctuation token">.</span>video<span class="punctuation token">.</span>videoWidth <span class="operator token">/</span> <span class="number token">2</span><span class="punctuation token">;</span> + self<span class="punctuation token">.</span>height <span class="operator token">=</span> self<span class="punctuation token">.</span>video<span class="punctuation token">.</span>videoHeight <span class="operator token">/</span> <span class="number token">2</span><span class="punctuation token">;</span> + self<span class="punctuation token">.</span><span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre> + +<p>Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément <code>video</code> et les deux éléments <code>canvas</code>. Il définit également les contextes graphique de chacun des éléments <code>canvas</code>. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.</p> + +<p>Ensuite, l'écouteur d'évènement <code>addEventListener()</code> est appelé sur l'élément <code>video</code> pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode <code>timerCallback()</code> pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.</p> + +<h3 id="Le_rappel_du_minuteur"><span class="short_text" id="result_box" lang="fr"><span>Le rappel du minuteur</span></span></h3> + +<p><span id="result_box" lang="fr"><span>Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">processor<span class="punctuation token">.</span>timerCallback <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span>paused <span class="operator token">||</span> <span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span>ended<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">computeFrame</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> self <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span> + <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + self<span class="punctuation token">.</span><span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre> + +<p><span id="result_box" lang="fr"><span>La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer.</span> <span>Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.</span></span></p> + +<p><span id="result_box" lang="fr"><span>Ensuite, il appelle la méthode <code>computeFrame()</code>, qui effectue l'effet </span></span> "chroma-keying" <span lang="fr"><span> sur l'image vidéo en cours.</span></span></p> + +<p><span id="result_box" lang="fr"><span>La dernière chose que fait le rappel est d'appeler <code>setTimeout()</code> pour programmer un nouvel appel.</span> <span>En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.</span></span></p> + +<h3 id="Manipulation_des_données_des_images_vidéo">Manipulation des données des images vidéo</h3> + +<p>La méthode <code>computeFrame()</code> , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">processor<span class="punctuation token">.</span>computeFrame <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">computeFrame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>width<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> frame <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1<span class="punctuation token">.</span><span class="function token">getImageData</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>width<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> l <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">.</span>length <span class="operator token">/</span> <span class="number token">4</span><span class="punctuation token">;</span> + + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> l<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> r <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> g <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> b <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>g <span class="operator token">></span> <span class="number token">100</span> <span class="operator token">&&</span> r <span class="operator token">></span> <span class="number token">100</span> <span class="operator token">&&</span> b <span class="operator token"><</span> <span class="number token">43</span><span class="punctuation token">)</span> + frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">3</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>ctx2<span class="punctuation token">.</span><span class="function token">putImageData</span><span class="punctuation token">(</span>frame<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span></code></pre> + +<p>²</p> + +<p>Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :</p> + +<p><img alt="video.png" class="default internal" src="/@api/deki/files/3282/=video.png" style="height: 192px; width: 320px;"></p> + +<p>À la seconde ligne, cette image est copiée dans le contexte graphique <code>ctx1</code> du premier élément <code>canvas</code>, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode <code>drawImage()</code>. Voici ce que cela donne :</p> + +<p><img alt="sourcectx.png" class="default internal" src="/@api/deki/files/3284/=sourcectx.png" style="height: 96px; width: 160px;"></p> + +<p><span id="result_box" lang="fr"><span>La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode <code>getImageData() </code>sur le premier contexte.</span> <span>Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler.</span> <span>La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.</span></span></p> + +<p><span id="result_box" lang="fr"><span>La boucle <code>for</code>, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image</span><span> de fond importée de <code>foo.png</code>.</span></span></p> + +<p><span id="result_box" lang="fr"><span>Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent.</span> <span>En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.</span></span></p> + +<p><span class="short_text" id="result_box" lang="fr"><span>L'image résultante ressemble à ceci :</span></span></p> + +<p><img alt="output.png" class="default internal" src="/@api/deki/files/3283/=output.png" style="height: 96px; width: 161px;"></p> + +<p><span id="result_box" lang="fr"><span>Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.</span></span></p> + +<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">Voyez cet exemple réel</a>.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="En/Using audio and video in Firefox">Using audio and video</a></li> +</ul> diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html index fadf515090..fadf515090 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index 15eef37006..15eef37006 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html index f44929e8be..f44929e8be 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html index 6182dee589..6182dee589 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html index 8fbb3ec79c..8fbb3ec79c 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/index.html index cc646762dd..cc646762dd 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html index 233d1baeb2..233d1baeb2 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html index 761b5baf3d..761b5baf3d 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html index 59a4d1ce35..59a4d1ce35 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/index.html index a430b361bd..a430b361bd 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html +++ b/files/fr/web/api/canvas_api/tutorial/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html index d8e6e8383c..d8e6e8383c 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html index a2182f43c1..a2182f43c1 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html index bf21fab4c8..bf21fab4c8 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html b/files/fr/web/api/canvas_api/tutorial/using_images/index.html index 50a286e0fa..50a286e0fa 100644 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.html diff --git a/files/fr/web/api/randomsource/getrandomvalues/index.html b/files/fr/web/api/crypto/getrandomvalues/index.html index 28682a0c2a..28682a0c2a 100644 --- a/files/fr/web/api/randomsource/getrandomvalues/index.html +++ b/files/fr/web/api/crypto/getrandomvalues/index.html diff --git a/files/fr/web/api/detecting_device_orientation/index.html b/files/fr/web/api/detecting_device_orientation/index.html new file mode 100644 index 0000000000..63d99497df --- /dev/null +++ b/files/fr/web/api/detecting_device_orientation/index.html @@ -0,0 +1,289 @@ +--- +title: Détecter l'orientation de l'appareil +slug: WebAPI/Detecting_device_orientation +tags: + - Device Orientation + - Firefox OS + - Mobile + - Motion + - Orientation +translation_of: Web/API/Detecting_device_orientation +--- +<p>{{SeeCompatTable}}</p> + +<h2 id="Résumé">Résumé</h2> + +<p>De plus en plus d'appareils connectés à Internet sont capable de déterminer leur <strong>orientation</strong>. C'est-à-dire qu'ils peuvent fournir des données indiquant des changements dans leur orientation par rapport à la gravité. En particulier les appareils portables, comme les téléphones mobiles, peuvent utiliser cette information pour effectuer automatiquement une rotation de l'écran, afin de toujours proposer la meilleure disposition possible pour le contenu à afficher.</p> + +<p>Il existe deux événements JavaScript pour gérer l'orientation. Le premier est {{domxref("DeviceOrientationEvent")}}, qui est envoyé quand l'accéléromètre détecte un changement d'orientation de l'appareil. En recevant et en analysant les données fournies par ces événements d'orientation, il est possible de répondre de manière interactive aux changements d'orientation et d'élévation causés par les mouvements imprimés à l'appareil par l'utilisateur.</p> + +<p>Le second événement est {{ domxref("DeviceMotionEvent") }}, qui est envoyé quand un changement d’accélération est ajouté. Il est différent de {{domxref("DeviceOrientationEvent")}}, car il écoute les changements d'accélération par opposition à l'orientation. Parmi les capteurs capables de détecter {{ domxref("DeviceMotionEvent") }}, on trouve les capteurs des ordinateurs portables utilisés pour protéger des chutes les périphériques de stockage. Ils sont communément présents dans les appareils mobiles (tablettes, téléphones intelligents).</p> + +<h2 id="Traitement_des_événements_d'orientation">Traitement des événements d'orientation</h2> + +<p>Tout ce dont vous avez besoin pour commencer à recevoir les changements d'orientation est d’écouter l’événement {{ event("deviceorientation") }} :</p> + +<div class="note"> +<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> est un polyfill <span id="result_box" lang="fr"><span>pour normaliser les données de l'accéléromètre et du gyroscope sur les appareils mobiles.</span> C'<span>est utile pour surmonter certaines différences dans la prise en charge des périphériques pour l'orientation du périphérique.</span></span></p> +</div> + +<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true); +</pre> + +<p>Après l’enregistrement de votre gestionnaire d'événements (<em>event listener</em> en anglais), dans ce cas, une fonction JS appelée handleOrientation(), votre fonction d'écoute est appelée périodiquement pour récupérer les données de l'orientation mise à jour.</p> + +<p>L'événement d'orientation contient quatre valeurs ::</p> + +<ul> + <li>{{domxref("DeviceOrientationEvent.absolute")}}</li> + <li>{{domxref("DeviceOrientationEvent.alpha")}}</li> + <li>{{domxref("DeviceOrientationEvent.beta")}}</li> + <li>{{domxref("DeviceOrientationEvent.gamma")}}</li> +</ul> + +<p>La fonction gérant l’événement pourrait ressembler à ceci :</p> + +<pre class="brush: js">function handleOrientation(event) { + var absolute = event.absolute; + var alpha = event.alpha; + var beta = event.beta; + var gamma = event.gamma; + + // Faites quelque chose avec les données acquises. ;) +} +</pre> + +<h3 id="Détail_des_valeurs_d'orientation">Détail des valeurs d'orientation</h3> + +<p>La valeur reportée pour chaque axe indique l'angle de rotation autour d'un axe donné, en référence à un système de coordonnées standard. Ces valeurs sont décrites de façon plus détaillée dans cet article <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation et déplacement expliquée">Orientation et déplacement expliquée</a>.</p> + +<ul> + <li>La valeur {{ domxref("DeviceOrientationEvent.alpha") }} représente le mouvement de l'appareil, autour de l'axe « z », en degrés sur une échelle de 0° à 360° ;</li> + <li>La valeur {{ domxref("DeviceOrientationEvent.beta") }} représente le mouvement de l'appareil autour de l'axe « y » en degrés, sur une échelle de -180° à 180°. Cela représente le mouvement d'avant en arrière de l'appareil ;</li> + <li>La valeur {{ domxref("DeviceOrientationEvent.gamma") }} représente le mouvement de l'appareil autour de l'axe « x », exprimée en degrés sur une échelle de -90° à 90°. Cela représente le mouvement de gauche à droite de l'appareil.</li> +</ul> + +<h3 id="Exemple_d'orientation">Exemple d'orientation</h3> + +<p>Cet exemple fonctionne sur tout navigateur supportant l’événement {{event("deviceorientation")}} et sur tout appareil capable de détecter son orientation.</p> + +<p>Imaginons une balle dans un jardin :</p> + +<pre class="brush: html"><div class="jardin"> + <div class="balle"></div> +</div> + +<pre class="resultat"></pre> +</pre> + +<p>Ce jardin fait 200 pixels de long (Oui c'est un « petit » jardin !), et la balle est au centre :</p> + +<pre class="brush: css">.jardin { + position: relative; + width : 200px; + height: 200px; + border: 5px solid #CCC; + border-radius: 10px; +} + +.balle { + position: absolute; + top : 90px; + left : 90px; + width : 20px; + height: 20px; + background: green; + border-radius: 100%; +} +</pre> + +<p>Maintenant, on définit le déplacement de la balle en fonction de celui de l'appareil :</p> + +<pre class="brush: js">var jardin = document.querySelector('.jardin'), + balle = document.querySelector('.balle'), + resultat = document.querySelector('.resultat'), + maxX = jardin.clientWidth - balle.clientWidth, + maxY = jardin.clientHeight - balle.clientHeight; + +function handleOrientation(event) { + var x = event.beta, // En degré sur l'interval [-180,180]. + y = event.gamma; // En degré sur l'interval [-90,90]. + + resultat.innerHTML = "beta : " + x + "<br />"; + resultat.innerHTML += "gamma: " + y + "<br />"; + + // Parce-que l'on ne veut pas avoir l'appareil à l'envers. + // On restreint les valeurs de x à l'intervalle [-90,90]. + if (x > 90) { x = 90}; + if (x < -90) { x = -90}; + // Pour rendre le calcul plus simple. + // On délimite l'intervalle de x et y sur [0, 180]. + x += 90; + y += 90; + + // 10 est la moitié de la taille de la balle. + // Cela centre le point de positionnement au centre de la balle. + + balle.style.top = (maxX * x / 180 - 10) + "px"; + balle.style.left = (maxY * y / 180 - 10) + "px"; +} + +window.addEventListener('deviceorientation', handleOrientation); +</pre> + +<p>Et voici le résultat en temps réel :</p> + +<div>{{EmbedLiveSample("Exemple_d'orientation", '230', '260')}}</div> + +<div> </div> + +<div>{{LiveSampleLink("Exemple_d'orientation", "Cliquez ici")}} pour ouvrir cet exemple dans une nouvelle fenêtre; l'événement {{event("deviceorientation")}} ne marche pas dans les {{HTMLElement("iframe", "iframes")}} cross-origin dans tous les navigateurs.</div> + +<div> </div> + +<div class="warning"> +<p><strong>Attention :</strong> Chrome et Firefox ne gèrent pas les angles de la même façon, certaines directions sur les axes sont inversées.</p> +</div> + +<h2 id="Traiter_les_événement_de_mouvement">Traiter les événement de mouvement</h2> + +<p>Les événements de mouvement gèrent l'orientation de la même façon à l'exception près qu’ils portent un nom d’événement différent : {{event("devicemotion")}}</p> + +<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true); +</pre> + +<p>Ce qui change réellement est l'information fournie par l'objet {{ domxref("DeviceMotionEvent") }} passée comme paramètre par la fonction <em>HandleMotion</em>.</p> + +<p>Les événements de mouvement contiennent quatre propriétés :</p> + +<ul> + <li>{{domxref("DeviceMotionEvent.acceleration")}}</li> + <li>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}}</li> + <li>{{domxref("DeviceMotionEvent.rotationRate")}}</li> + <li>{{domxref("DeviceMotionEvent.interval")}}</li> +</ul> + +<h3 id="Explication_des_valeurs_de_mouvement">Explication des valeurs de mouvement</h3> + +<p>L'objet {{ domxref("DeviceMotionEvent") }} fourni aux développeurs Web des informations sur la vitesse de changement d'orientation et de position de l'appareil. Les changements rapportés sont fournis pour les trois axes (voir <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation et déplacement expliquées</a> pour les détails).</p> + +<p>Pour {{domxref("DeviceMotionEvent.acceleration","acceleration")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, Les axes correspondent à :</p> + +<ul> + <li><code>x</code> : représente l'axe d'Ouest en Est ;</li> + <li><code>y</code> : représente l'axe Sud vers Nord :</li> + <li><code>z</code> : représente l'axe perpendiculaire au sol.</li> +</ul> + +<p>Pour {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, c'est un peu différent. L'information correspond à :</p> + +<ul> + <li><code>alpha</code> : représente le ratio de rotation le long de l'axe perpendiculaire à l'écran (ou du clavier au bureau) ;</li> + <li><code>bêta</code> : représente le ratio de rotation le long de l'axe allant de la gauche vers la droite de l'écran (ou du clavier au bureau) ;</li> + <li><code>gamma</code> : représente le ratio de rotation le long de l'axe allant du bas vers le haut de l'écran (ou clavier vers le bureau).</li> +</ul> + +<p>Au final, {{domxref("DeviceMotionEvent.interval","interval")}} représente l'intervalle de temps, en millisecondes, pour les données générées par l'appareil.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Device Orientation')}}</td> + <td>{{Spec2('Device Orientation')}}</td> + <td>Spécification initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>{{domxref("DeviceOrientationEvent")}}</td> + <td>7.0</td> + <td>3.6<sup>[1]</sup><br> + 6</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{domxref("DeviceMotionEvent")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>6</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{domxref("DeviceOrientationEvent")}}</td> + <td>3.0</td> + <td>3.6<sup>[1]</sup><br> + 6</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.2</td> + </tr> + <tr> + <td>{{domxref("DeviceMotionEvent")}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>6</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notes_d'implementation_pour_Gecko">Notes d'implementation pour Gecko </h3> + +<ol> + <li>Firefox 3.6, 4, et 5 supportent <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>au lieu de l'événement standard {{domxref("DeviceOrientationEvent")}}.</li> +</ol> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> +</ul> diff --git a/files/fr/web/api/devicerotationrate/alpha/index.html b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html index b5ea61916c..b5ea61916c 100644 --- a/files/fr/web/api/devicerotationrate/alpha/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html diff --git a/files/fr/web/api/devicerotationrate/beta/index.html b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html index 75fa4b5ced..75fa4b5ced 100644 --- a/files/fr/web/api/devicerotationrate/beta/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html diff --git a/files/fr/web/api/devicerotationrate/gamma/index.html b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html index bd4731d90c..bd4731d90c 100644 --- a/files/fr/web/api/devicerotationrate/gamma/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html diff --git a/files/fr/web/api/devicerotationrate/index.html b/files/fr/web/api/devicemotioneventrotationrate/index.html index f6cf9b4988..f6cf9b4988 100644 --- a/files/fr/web/api/devicerotationrate/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/index.html diff --git a/files/fr/web/api/deviceorientationevent.absolute/index.html b/files/fr/web/api/deviceorientationevent/absolute/index.html index 3b1c6f593a..3b1c6f593a 100644 --- a/files/fr/web/api/deviceorientationevent.absolute/index.html +++ b/files/fr/web/api/deviceorientationevent/absolute/index.html diff --git a/files/fr/web/api/document/document.anchors/index.html b/files/fr/web/api/document/anchors/index.html index 09fadf1b61..09fadf1b61 100644 --- a/files/fr/web/api/document/document.anchors/index.html +++ b/files/fr/web/api/document/anchors/index.html diff --git a/files/fr/web/events/readystatechange/index.html b/files/fr/web/api/document/readystatechange_event/index.html index f4adf81f7a..f4adf81f7a 100644 --- a/files/fr/web/events/readystatechange/index.html +++ b/files/fr/web/api/document/readystatechange_event/index.html diff --git a/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html b/files/fr/web/api/document_object_model/events/index.html index cd96a7446c..cd96a7446c 100644 --- a/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html +++ b/files/fr/web/api/document_object_model/events/index.html diff --git a/files/fr/web/api/document_object_model/exemples/index.html b/files/fr/web/api/document_object_model/examples/index.html index 08bd432a1e..08bd432a1e 100644 --- a/files/fr/web/api/document_object_model/exemples/index.html +++ b/files/fr/web/api/document_object_model/examples/index.html diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..9e74fa2870 --- /dev/null +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,146 @@ +--- +title: Comment créer un arbre DOM +slug: Comment_créer_un_arbre_DOM +tags: + - AJAX + - DOM + - Extensions +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +<p> </p> + +<p>Cet article décrit comment utiliser l'API <a class="external" href="https://www.w3.org/TR/DOM-Level-3-Core/">DOM Core (en)</a> en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).</p> + +<h3 id="Cr.C3.A9er_dynamiquement_un_arbre_DOM" name="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3> + +<p>Considérons le document XML suivant :</p> + +<pre class="eval"><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> + +<p>L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :</p> + +<pre class="eval">var doc = document.implementation.createDocument("", "", null); +var peopleElem = doc.createElement("people"); + +var personElem1 = doc.createElement("person"); +personElem1.setAttribute("first-name", "eric"); +personElem1.setAttribute("middle-initial", "h"); +personElem1.setAttribute("last-name", "jung"); + +var addressElem1 = doc.createElement("address"); +addressElem1.setAttribute("street", "321 south st"); +addressElem1.setAttribute("city", "denver"); +addressElem1.setAttribute("state", "co"); +addressElem1.setAttribute("country", "usa"); +personElem1.appendChild(addressElem1); + +var addressElem2 = doc.createElement("address"); +addressElem2.setAttribute("street", "123 main st"); +addressElem2.setAttribute("city", "arlington"); +addressElem2.setAttribute("state", "ma"); +addressElem2.setAttribute("country", "usa"); +personElem1.appendChild(addressElem2); + +var personElem2 = doc.createElement("person"); +personElem2.setAttribute("first-name", "jed"); +personElem2.setAttribute("last-name", "brown"); + +var addressElem3 = doc.createElement("address"); +addressElem3.setAttribute("street", "321 north st"); +addressElem3.setAttribute("city", "atlanta"); +addressElem3.setAttribute("state", "ga"); +addressElem3.setAttribute("country", "usa"); +personElem2.appendChild(addressElem3); + +var addressElem4 = doc.createElement("address"); +addressElem4.setAttribute("street", "123 west st"); +addressElem4.setAttribute("city", "seattle"); +addressElem4.setAttribute("state", "wa"); +addressElem4.setAttribute("country", "usa"); +personElem2.appendChild(addressElem4); + +var addressElem5 = doc.createElement("address"); +addressElem5.setAttribute("street", "321 south avenue"); +addressElem5.setAttribute("city", "denver"); +addressElem5.setAttribute("state", "co"); +addressElem5.setAttribute("country", "usa"); +personElem2.appendChild(addressElem5); + +peopleElem.appendChild(personElem1); +peopleElem.appendChild(personElem2); +doc.appendChild(peopleElem); +</pre> + +<p>Voir également le chapitre <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model"> DOM du tutoriel XUL</a></p> + +<p>Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span> + <span class="string token">"people"</span><span class="punctuation token">:</span> <span class="punctuation token">{</span> + <span class="string token">"person"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> + <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> + <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south st"</span><span class="punctuation token">,</span> + <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span> + <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span> + <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 main st"</span><span class="punctuation token">,</span> + <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"arlington"</span><span class="punctuation token">,</span> + <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ma"</span><span class="punctuation token">,</span> + <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> + <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span> + <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"eric"</span><span class="punctuation token">,</span> + <span class="string token">"@middle-initial"</span><span class="punctuation token">:</span> <span class="string token">"H"</span><span class="punctuation token">,</span> + <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"jung"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> + <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 north st"</span><span class="punctuation token">,</span> + <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"atlanta"</span><span class="punctuation token">,</span> + <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ga"</span><span class="punctuation token">,</span> + <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 west st"</span><span class="punctuation token">,</span> + <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"seattle"</span><span class="punctuation token">,</span> + <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"wa"</span><span class="punctuation token">,</span> + <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south avenue"</span><span class="punctuation token">,</span> + <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span> + <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span> + <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> + <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span> + <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"jed"</span><span class="punctuation token">,</span> + <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"brown"</span> + <span class="punctuation token">}</span><span class="punctuation token">]</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="Alors_quoi_.3F" name="Alors_quoi_.3F">Et après ?</h3> + +<p>Les arbres DOM peuvent être interrogés en utilisant des <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">expressions XPath</a>, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML">XMLSerializer</a> (sans avoir à le convertir en chaîne de caractères auparavant), <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">envoyés à un serveur Web</a> (via XMLHttpRequest), transformés en utilisant <a href="https://developer.mozilla.org/fr/docs/XSLT">XSLT</a>, <a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">XLink</a>, convertis en un objet JavaScript à travers un <a href="https://developer.mozilla.org/fr/docs/Archive/JXON">algorithme JXON</a>, etc.</p> + +<p>Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Glossaire/XML" title="en/XML">XML</a></li> + <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/JXON" title="en/JXON">JXON</a></li> + <li><a class="internal" href="https://developer.mozilla.org/fr/docs/XPath" title="en/XPath">XPath</a></li> + <li><a class="internal" href="https://developer.mozilla.org/fr/docs/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li> + <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> +</ul> diff --git a/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index aae8808be0..aae8808be0 100644 --- a/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html diff --git a/files/fr/web/api/document_object_model/préface/index.html b/files/fr/web/api/document_object_model/préface/index.html deleted file mode 100644 index 77c272f5b2..0000000000 --- a/files/fr/web/api/document_object_model/préface/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Préface -slug: Web/API/Document_Object_Model/Préface -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface ---- -<p>{{ ApiRef() }}</p> -<h3 id=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence" name=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence">À propos de cette référence</h3> -<p>Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.</p> -<p>Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la <a href="fr/DOM/document">référence de DOM document</a>) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.</p> -<h3 id=".C3.80_qui_est_destin.C3.A9_ce_guide" name=".C3.80_qui_est_destin.C3.A9_ce_guide">À qui est destiné ce guide</h3> -<p>Le lecteur de la <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko">Référence du DOM Gecko</a> est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, <a href="fr/XML">XML</a>, les serveurs et standards du Web, et même en ce qui concerne <a href="fr/JavaScript">JavaScript</a>, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec <a href="fr/HTML">HTML</a>, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.</p> -<p>Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.</p> -<h3 id="Pr.C3.A9sentation_de_Gecko" name="Pr.C3.A9sentation_de_Gecko">Présentation de Gecko</h3> -<p>Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p> -<p>Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple <a href="fr/DOM/window"><code>window</code></a> etc.) dans le contexte des pages Web et de l'interface applicative (ou - <i> - chrome</i> - ) du navigateur.</p> -<p>Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.</p> -<h3 id="Syntaxe_de_l.27API" name="Syntaxe_de_l.27API">Syntaxe de l'API</h3> -<p>Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.</p> -<p>Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule <code>availHeight</code> de l'objet <code>screen</code> est présentée de la manière suivante :</p> -<pre class="eval"><i>screenObj</i> = window.screen.availHeight; -</pre> -<p>Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :</p> -<pre class="eval"><i>chaine</i> = window.status; -window.status =<i>chaine</i>; -</pre> -<p>En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme <code>element</code> pour tous les éléments, <code>document</code> pour l'objet de document racine, <code>table</code> pour un objet de tableau, etc. Consultez <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Types_de_donn.C3.A9es_importants">Types de données importants</a> pour plus d'informations à propos des types de données.</p> -<h3 id="Utilisation_des_exemples" name="Utilisation_des_exemples">Utilisation des exemples</h3> -<p>Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété <a href="fr/DOM/window.document">window.document</a> peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :</p> -<pre><html> - -<script> -function testWinDoc() { - - doc= window.document; - - alert(doc.title); - -} -</script> - -<button onclick="testWinDoc();">test de la propriété document</button> - -</html> -</pre> -<p>Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Test_de_l.27API_DOM">Test de l'API DOM</a> de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.</p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p> diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html new file mode 100644 index 0000000000..9e3407a0aa --- /dev/null +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -0,0 +1,351 @@ +--- +title: Explorer un tableau HTML avec des interfaces DOM et JavaScript +slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript +tags: + - DOM + - Guide + - HTML + - JavaScript +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +--- +<p> </p> + +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.</p> + +<div class="note">Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).</div> + +<h2 id="Overview_of_Sample1.html" name="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2> + +<h3 id="Contenu_HTML">Contenu HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Generate a table.<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>generate_table()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">generate_table</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// get the reference for the body</span> + <span class="keyword token">var</span> body <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + + <span class="comment token">// creates a <table> element and a <tbody> element</span> + <span class="keyword token">var</span> tbl <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> tblBody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// creating all cells</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">2</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// creates a table row</span> + <span class="keyword token">var</span> row <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token"><</span> <span class="number token">2</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Create a <td> element and a text node, make the text</span> + <span class="comment token">// node the contents of the <td>, and put the <td> at</span> + <span class="comment token">// the end of the table row</span> + <span class="keyword token">var</span> cell <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> cellText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"cell in row "</span><span class="operator token">+</span>i<span class="operator token">+</span><span class="string token">", column "</span><span class="operator token">+</span>j<span class="punctuation token">)</span><span class="punctuation token">;</span> + cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cellText<span class="punctuation token">)</span><span class="punctuation token">;</span> + row<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cell<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">// add the row to the end of the table body</span> + tblBody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>row<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">// put the <tbody> in the <table></span> + tbl<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tblBody<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// appends <table> into <body></span> + body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbl<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// sets the border attribute of tbl to 2;</span> + tbl<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">"border"</span><span class="punctuation token">,</span> <span class="string token">"2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p> + +<p>Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :</p> + +<ol> + <li>On crée d'abord l'élément <table>.</li> + <li>Ensuite, l'élément <tbody> qui est un enfant de l'élément <table>.</li> + <li>Puis, grâce à une boucle, on crée les éléments <tr>, qui sont des enfants de l'élément <tbody>.</li> + <li>Pour chaque élément <tr>, on emploie une boucle pour créer les éléments enfants <td>.</li> + <li>Enfin pour chaque élément <td>, on crée le nœud texte contenant le texte de la cellule du tableau.</li> +</ol> + +<p>Après avoir créé les éléments <table>, <tbody>, <tr>, <td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :</p> + +<ol> + <li>On attache d'abord chaque nœud texte à son élément parent <td> en utilisant + <pre>cell.appendChild(texte);</pre> + </li> + <li>Ensuite, on lie chaque élément <td> à son élément <tr> parent avec + <pre>row.appendChild(cell);</pre> + </li> + <li>Puis chaque <tr> à son parent <tbody> avec + <pre>tablebody.appendChild(row);</pre> + </li> + <li>Puis l'élément <tbody> est attaché à son élément parent <table> grace à + <pre>table.appendChild(tablebody);</pre> + </li> + <li>Enfin, <table> est rattaché à <body> avec + <pre>body.appendChild(table);</pre> + </li> +</ol> + +<p>Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.</p> + +<p>Voici l'HTML généré par ce code JavaScript :</p> + +<pre>... +<table border="2"> +<tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr> +<tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr> +</table> +... +</pre> + +<p>Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :</p> + +<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> + +<p>Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre <table> de la figure 1, l'élément <table> a un enfant, l'élément <tbody>, qui lui-même a deux enfants <tr>, qui à leur tour ont chacun un enfant <td>. Enfin, chacun de ces éléments <td> a un enfant, un nœud texte.</p> + +<h2 id="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html" name="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : <span id="result_box" lang="fr"><span>Définition de la couleur d'arrière-plan d'un paragraphe</span></span></h2> + +<p><code>getElementsByTagName</code> est à la fois une méthode de l'interface Document et de l'interface Element. <span id="result_box" lang="fr"><span>Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette.</span> <span>Le premier élément de la liste se trouve à la position [0] dans le tableau.</span></span></p> + +<h3 id="Contenu_HTML_2">Contenu HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Set paragraph background color<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>set_background()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hi<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">set_background</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// </span></code>récupère une liste de tous les éléments body (il n'y en aura qu'un)<code class="language-js"><span class="comment token">,</span> + <span class="comment token">// </span></code>et sélectionne le premier (indice 0) de ces éléments<code class="language-js"> + myBody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + + <span class="comment token">// </span></code>à présent, trouve tous les éléments p enfants de cet élément body<code class="language-js"> + myBodyElements <span class="operator token">=</span> myBody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// </span></code>récupère le second élément de cette liste d'éléments p<code class="language-js"> + myP <span class="operator token">=</span> myBodyElements<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + myP<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"rgb(255,0,0)"</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p> + +<p>Dans cet exemple, on assigne à la variable <code>myP</code> l'objet DOM du second élément <code>p</code> du corps (body).</p> + +<ol> + <li>On récupère d'abord une liste de tous les éléments body avec + <pre class="line-numbers language-html"><code class="language-html">myBody = document.getElementsByTagName("body")[0]</code></pre> + Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à <code>{{mediawiki.external(0)}}</code>.</li> + <li>Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant + <pre class="line-numbers language-html"><code class="language-html">myBodyElements = myBody.getElementsByTagName("p");</code></pre> + </li> + <li>Pour finir on prend le deuxième élément de la liste des éléments p avec + <pre class="line-numbers language-html"><code class="language-html">myP = myBodyElements[1];</code></pre> + </li> +</ol> + +<p><img alt="Image:sample2a2.jpg" src="https://developer.mozilla.org/@api/deki/files/834/=Sample2a2.jpg"></p> + +<p>Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :</p> + +<pre class="eval">myP.style.background = "rgb(255,0,0)"; +// ajoute une propriété de style inline +</pre> + +<h3 id="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29" name="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29">Création de nœuds texte avec <code>document.createTextNode("..")</code></h3> + +<p>Employez l'objet <code>document</code> pour appeler la méthode <code>createTextNode</code> et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.</p> + +<pre class="line-numbers language-html"><code class="language-html">myTextNode = document.createTextNode("world");</code></pre> + +<p>Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte <code>"world"</code>, et <code>monNoeudTexte</code> est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.</p> + +<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29" name="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3> + +<p>En invoquant <code>myP.appendChild</code> ({{mediawiki.external('node_element')}}) , vous définissez <code>element_nœud</code> comme un nouvel enfant du second élément <code>p</code> (<code>myP</code> a été défini plus haut comme étant le second élément p).</p> + +<pre class="eval">myP.appendChild(noeudTexte); +</pre> + +<p>En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : <code>helloworld</code>. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise <p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :</p> + +<p><img alt="Image:sample2b2.jpg" src="https://developer.mozilla.org/@api/deki/files/835/=Sample2b2.jpg"></p> + +<div class="note">L'utilisation de <code>createTextNode</code> et de <code>appendChild</code> permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode <code>appendChild</code> ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez <code>insertBefore</code> à la place de <code>appendChild</code>.</div> + +<h3 id="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29" name="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29">Création de nouveaux éléments avec l'objet document et la méthode <code>createElement(...)</code></h3> + +<p>Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec <code>createElement</code>. Pour créer un élément <p> enfant de l'élément <body>, vous pouvez vous servir de <code>body</code> défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez <code>document.createElement("nombalise")</code>. Voici un exemple :</p> + +<pre class="eval">nouveauNoeudBALISEP = document.createElement("p"); +body.appendChild(nouveauNoeudBALISEP); +</pre> + +<p><img alt="Image:sample2c.jpg" src="https://developer.mozilla.org/@api/deki/files/836/=Sample2c.jpg"></p> + +<h3 id="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29" name="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29">Suppression de nœuds avec la méthode <code>removeChild(...)</code></h3> + +<p>Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de <code>myP</code> (deuxième élément <p>) le nœud texte contenant le mot « world » :</p> + +<pre class="eval">myP.removeChild(noeudTexte); +</pre> + +<p>Vous pouvez ensuite ajouter <code>monNoeudTexte</code> (contenant <code>"world"</code>) dans l'élément <p> récemment créé :</p> + +<pre class="eval">nouveauNoeudBALISEP.appendChild(noeudTexte); +</pre> + +<p>L'arborescence des objets se présente désormais comme ceci :</p> + +<p><img alt="Image:sample2d.jpg" src="https://developer.mozilla.org/@api/deki/files/837/=Sample2d.jpg"></p> + +<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29" name="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2> + +<p>Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.</p> + +<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML" name="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3> + +<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> + +<h3 id="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence" name="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence">Création et insertion des éléments dans l'arborescence</h3> + +<p>On peut décomposer la création du tableau de Exemple1.html en trois étapes :</p> + +<ul> + <li>Récupérer l'objet body (c'est le premier élément de l'objet document).</li> + <li>Créer tous les éléments.</li> + <li>Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).</li> +</ul> + +<p>Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.</p> + +<div class="note">Il y a une ligne de code supplémentaire à la fin de la fonction <code>start()</code>, qui définit la propriété bordure du tableau en employant la méthode <code>setAttribute</code>. <code>setAttribute</code> utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.</div> + +<pre><head> +<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title> +<script> + function start() { + // récupère une référence vers l'élément body + var body = document.getElementsByTagName("body")[0]; + + // création des éléments <table> et <tbody> + table = document.createElement("table"); + tablebody = document.createElement("tbody"); + + // création des cellules + for(var j = 0; j < 2; j++) { + // création d'un élément <tr> + row = document.createElement("tr"); + + for(var i = 0; i < 2; i++) { + // création d'un élément <td> + cell = document.createElement("td"); + // création d'un nœud texte + texte = document.createTextNode("la cellule est ligne " + j + ", colonne " + i); + // ajoute le nœud texte créé à la cellule <td> + cell.appendChild(texte); + // ajoute la cellule <td> à la ligne <tr> + row.appendChild(cell); + } + // ajoute la ligne <tr> à l'élément <tbody> + tablebody.appendChild(row); + } + + // ajoute <tbody> à l'élément <table> + table.appendChild(tablebody); + // ajoute <table> à l'élément <body> + body.appendChild(table); + // définit l'attribut border de table à 2; + table.setAttribute("border", "2"); + } +</script> +</head> +<body onload="start()"> +</body> +</html> +</pre> + +<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS" name="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2> + +<h3 id="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau" name="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau">Récupérer un nœud texte dans le tableau</h3> + +<p>Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut <code>childNodes</code> qui est utilisé pour récupérer la liste des nœuds enfants de <code>cel</code>. A la différence de <code>getElementsByTagName</code>, la liste renvoyée par <code>childNodes</code> comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode <code>{{ mediawiki.external('x') }}</code> est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans <code>celtext</code>. Ensuite, un nouveau nœud texte contenant les données de <code>celtext</code> est greffé en tant qu'enfant sur l'élément <body>.</p> + +<div class="note">Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut <code>data</code>.</div> + +<pre class="brush:js line-numbers language-js"><code class="language-js">mybody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +mytable <span class="operator token">=</span> mybody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +mytablebody <span class="operator token">=</span> mytable<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +myrow <span class="operator token">=</span> mytablebody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +mycel <span class="operator token">=</span> myrow<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +<span class="comment token">// premier élément du noeud liste des enfants de mycel</span> +myceltext<span class="operator token">=</span>mycel<span class="punctuation token">.</span>childNodes<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +<span class="comment token">// </span></code> <span id="result_box" lang="fr"><span>contenu de currenttext est le contenu des données de</span></span><code class="language-js"><span class="comment token"> myceltext</span> +currenttext<span class="operator token">=</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>myceltext<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span> +mybody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>currenttext<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut" name="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut">Récupérer la valeur d'un attribut</h3> + +<p>A la fin d'Exemple1, l'appel à <code>setAttribute</code> sur l'objet <code>table</code> définit la propriété <code>border</code> du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode <code>getAttribute</code> :</p> + +<pre class="line-numbers language-html"><code class="language-html">mytable.getAttribute("border");</code></pre> + +<h3 id="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style" name="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style">Cacher une colonne en changeant les propriétés de style</h3> + +<p>Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.</p> + +<pre><html> +<body onload="start()"> +</body> +<script> + function start() { + var body = document.getElementsByTagName("body")[0]; + table = document.createElement("table"); + tablebody = document.createElement("tbody"); + + for(var j = 0; j < 2; j++) { + row = document.createElement("tr"); + for(var i = 0; i < 2; i++) { + cell = document.createElement("td"); + text = document.createTextNode("la cellule est :" + i + j); + cell.appendChild(text); + row.appendChild(cell); + // change la couleur de fond de la cellule + // si la colonne est 0. Si la colonne est 1, cache la cellule + if (i == 0) { + cell.style.background = "rgb(255,0,0)"; + } else { + cell.style.display = "none"; + } + } + tablebody.appendChild(row); + } + table.appendChild(tablebody); + body.appendChild(table); + } +</script> +</html> +</pre> + +<h4 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h4> + +<dl> + <dt>Author(s)</dt> + <dd>Marcio Galli</dd> + <dt>Migrated from</dt> + <dd>http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/</dd> +</dl> + +<p><br> + <span class="comment">Interwik</span></p> diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html index a9efdf8cdb..a9efdf8cdb 100644 --- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html index 0f140378e6..0f140378e6 100644 --- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/documentorshadowroot/activeelement/index.html index 5115a1135c..5115a1135c 100644 --- a/files/fr/web/api/document/activeelement/index.html +++ b/files/fr/web/api/documentorshadowroot/activeelement/index.html diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html index 493d7a55a1..493d7a55a1 100644 --- a/files/fr/web/api/document/elementfrompoint/index.html +++ b/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html diff --git a/files/fr/web/api/document/getselection/index.html b/files/fr/web/api/documentorshadowroot/getselection/index.html index 9352399ada..9352399ada 100644 --- a/files/fr/web/api/document/getselection/index.html +++ b/files/fr/web/api/documentorshadowroot/getselection/index.html diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/documentorshadowroot/stylesheets/index.html index 0c607adc5f..0c607adc5f 100644 --- a/files/fr/web/api/document/stylesheets/index.html +++ b/files/fr/web/api/documentorshadowroot/stylesheets/index.html diff --git a/files/fr/web/api/cssmatrix/index.html b/files/fr/web/api/dommatrix/index.html index 2b5039986e..2b5039986e 100644 --- a/files/fr/web/api/cssmatrix/index.html +++ b/files/fr/web/api/dommatrix/index.html diff --git a/files/fr/web/api/animationeffecttimingproperties/delay/index.html b/files/fr/web/api/effecttiming/delay/index.html index bb8c8d9e56..bb8c8d9e56 100644 --- a/files/fr/web/api/animationeffecttimingproperties/delay/index.html +++ b/files/fr/web/api/effecttiming/delay/index.html diff --git a/files/fr/web/api/animationeffecttimingproperties/index.html b/files/fr/web/api/effecttiming/index.html index cc984622c9..cc984622c9 100644 --- a/files/fr/web/api/animationeffecttimingproperties/index.html +++ b/files/fr/web/api/effecttiming/index.html diff --git a/files/fr/web/events/compositionend/index.html b/files/fr/web/api/element/compositionend_event/index.html index 8a15ab679a..8a15ab679a 100644 --- a/files/fr/web/events/compositionend/index.html +++ b/files/fr/web/api/element/compositionend_event/index.html diff --git a/files/fr/web/events/compositionstart/index.html b/files/fr/web/api/element/compositionstart_event/index.html index 8b72ed5d31..8b72ed5d31 100644 --- a/files/fr/web/events/compositionstart/index.html +++ b/files/fr/web/api/element/compositionstart_event/index.html diff --git a/files/fr/web/events/compositionupdate/index.html b/files/fr/web/api/element/compositionupdate_event/index.html index ba22586181..ba22586181 100644 --- a/files/fr/web/events/compositionupdate/index.html +++ b/files/fr/web/api/element/compositionupdate_event/index.html diff --git a/files/fr/web/events/copy/index.html b/files/fr/web/api/element/copy_event/index.html index d3a9ee8224..d3a9ee8224 100644 --- a/files/fr/web/events/copy/index.html +++ b/files/fr/web/api/element/copy_event/index.html diff --git a/files/fr/web/events/error/index.html b/files/fr/web/api/element/error_event/index.html index 5ab9de5a8c..5ab9de5a8c 100644 --- a/files/fr/web/events/error/index.html +++ b/files/fr/web/api/element/error_event/index.html diff --git a/files/fr/web/events/focusin/index.html b/files/fr/web/api/element/focusin_event/index.html index 79a9e2af63..79a9e2af63 100644 --- a/files/fr/web/events/focusin/index.html +++ b/files/fr/web/api/element/focusin_event/index.html diff --git a/files/fr/web/events/focusout/index.html b/files/fr/web/api/element/focusout_event/index.html index 01ddab4738..01ddab4738 100644 --- a/files/fr/web/events/focusout/index.html +++ b/files/fr/web/api/element/focusout_event/index.html diff --git a/files/fr/web/api/element/innerthtml/index.html b/files/fr/web/api/element/innerhtml/index.html index 6addb7d54e..6addb7d54e 100644 --- a/files/fr/web/api/element/innerthtml/index.html +++ b/files/fr/web/api/element/innerhtml/index.html diff --git a/files/fr/web/api/element/name/index.html b/files/fr/web/api/element/name/index.html deleted file mode 100644 index a4f8a6ba0a..0000000000 --- a/files/fr/web/api/element/name/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: element.name -slug: Web/API/Element/name -tags: - - API - - DOM - - Element - - Nom - - Propriétés -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -<p>{{ APIRef("DOM") }}</p> - -<p><code><strong>name</strong></code> obtient ou définit la propriété <code>name</code> (<em>nom</em>) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.</p> - -<div class="note"> -<p><strong>Note :</strong> La propriété <code>name</code> n'existe pas pour d'autres éléments ; contrairement à <a href="https://developer.mozilla.org/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> et <a href="https://developer.mozilla.org/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p> -</div> - -<p>Le <code>name</code> peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement" title="fr/DOM/form">formulaire</a> et dans la collection <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement/elements" title="fr/DOM/form.elements"><code>elements</code></a> d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.</p> - -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Exemple" name="Exemple">Exemple</h2> - -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // Obtient une référence au premier élément du formulaire - var formElement = document.forms['formA'].elements[0]; - - // Lui donne un nom - formElement.name = 'inputA'; - - // Affiche la valeur du champ - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p>Dans Internet Explorer, la propriété <code>name</code> des objets DOM créés à l'aide de <code><a href="/fr/DOM/document.createElement" title="fr/DOM/document.createElement">createElement</a></code> ne peut être définie ou modifiée.</p> - -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> - -<p>Spécification DOM 2 HTML du W3C :</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-32783304">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-39843695">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-22051454">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-91128709">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-96819659">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-47534097">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52696514">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-31037081">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-20110362">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-59871447">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-41636323">traduction</a></small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-70715578">traduction</a></small></li> -</ul> - -<p><small>Les traductions ne sont pas normatives.</small></p> diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/elementcssinlinestyle/style/index.html index 85a19bb89a..85a19bb89a 100644 --- a/files/fr/web/api/htmlelement/style/index.html +++ b/files/fr/web/api/elementcssinlinestyle/style/index.html diff --git a/files/fr/web/api/entity/index.html b/files/fr/web/api/entity/index.html deleted file mode 100644 index 2c160ead13..0000000000 --- a/files/fr/web/api/entity/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Entity -slug: Web/API/Entity -tags: - - API - - DOM - - Entités - - Interface - - Noeuds -translation_of: Web/API/Entity ---- -<p>{{APIRef("DOM")}}{{obsolete_header}}</p> - -<p>Référence en lecture seule à une entité DTD (<em>définition de type de document</em>). Hérite également des méthodes et propriétés de {{domxref("Node")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("Entity.publicId")}} {{ReadOnlyInline}}</dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd> - <dt>{{domxref("Entity.systemId")}} {{ReadOnlyInline}}</dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd> - <dt>{{domxref("Entity.notationName")}}{{ReadOnlyInline}}</dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd> - <dt>{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}</dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd> - <dt>{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}</dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd> - <dt>{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}</dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Statut</th> - <th>Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Ajout de <code>inputEncoding</code>, <code>xmlEncoding</code> et <code>xmlVersion</code>.</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Pas de changement.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/fr/web/api/entityreference/index.html b/files/fr/web/api/entityreference/index.html deleted file mode 100644 index ee21b2b83f..0000000000 --- a/files/fr/web/api/entityreference/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: EntityReference -slug: Web/API/EntityReference -tags: - - API - - Arborescence - - DOM - - Entité - - Interface - - Noeuds - - Reference -translation_of: Web/API/EntityReference ---- -<p>{{APIRef("DOM")}}{{Obsolete_header}}</p> - -<div class="warning"> -<p>NOTE : Ceci n'est pas implémenté dans Mozilla</p> -</div> - -<p>Référence en lecture seule à une référence d'entité dans l'arborescence DOM. N'a pas de propriétés ou méthodes propres mais hérite de {{domxref("Node")}}.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Statut</th> - <th>Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-11C98490", "EntityReference")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html b/files/fr/web/api/event/comparison_of_event_targets/index.html index f938d0cff5..f938d0cff5 100644 --- a/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html +++ b/files/fr/web/api/event/comparison_of_event_targets/index.html diff --git a/files/fr/web/api/event/createevent/index.html b/files/fr/web/api/event/createevent/index.html deleted file mode 100644 index 5cfbb7f05f..0000000000 --- a/files/fr/web/api/event/createevent/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Event.createEvent() -slug: Web/API/Event/createEvent -tags: - - API - - DOM - - Evènement - - Méthodes -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent ---- -<p>{{APIRef("DOM")}}</p> - -<p>Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode <code>initEvent()</code> .</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre><code>document.createEvent(type) </code></pre> - -<dl> - <dt><code>type</code></dt> - <dd>Une chaîne de caractère indiquant le type de l'évènement à créer.</dd> -</dl> - -<p>Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre>var newEvent = document.createEvent("UIEvents");</pre> - -<h2 id="Spécification">Spécification</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> -</ul> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("api.Event.createEvent")}}</p> diff --git a/files/fr/web/api/api_fichier_systeme/index.html b/files/fr/web/api/file_and_directory_entries_api/index.html index 8cef71b2fa..8cef71b2fa 100644 --- a/files/fr/web/api/api_fichier_systeme/index.html +++ b/files/fr/web/api/file_and_directory_entries_api/index.html diff --git a/files/fr/web/api/formdata/utilisation_objets_formdata/index.html b/files/fr/web/api/formdata/using_formdata_objects/index.html index a64c8be0d0..a64c8be0d0 100644 --- a/files/fr/web/api/formdata/utilisation_objets_formdata/index.html +++ b/files/fr/web/api/formdata/using_formdata_objects/index.html diff --git a/files/fr/web/guide/dom/using_full_screen_mode/index.html b/files/fr/web/api/fullscreen_api/index.html index 76144c64f2..76144c64f2 100644 --- a/files/fr/web/guide/dom/using_full_screen_mode/index.html +++ b/files/fr/web/api/fullscreen_api/index.html diff --git a/files/fr/web/guide/api/gamepad/index.html b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html index 1cfa50fc2c..1cfa50fc2c 100644 --- a/files/fr/web/guide/api/gamepad/index.html +++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html diff --git a/files/fr/web/api/element/onwheel/index.html b/files/fr/web/api/globaleventhandlers/onwheel/index.html index 837fda2ba2..837fda2ba2 100644 --- a/files/fr/web/api/element/onwheel/index.html +++ b/files/fr/web/api/globaleventhandlers/onwheel/index.html diff --git a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html b/files/fr/web/api/history_api/example/index.html index f19782d753..f19782d753 100644 --- a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html +++ b/files/fr/web/api/history_api/example/index.html diff --git a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html b/files/fr/web/api/history_api/index.html index 5e199dd521..5e199dd521 100644 --- a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html +++ b/files/fr/web/api/history_api/index.html diff --git a/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html index 0ddaad6583..0ddaad6583 100644 --- a/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html +++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html diff --git a/files/fr/web/api/api_html_drag_and_drop/index.html b/files/fr/web/api/html_drag_and_drop_api/index.html index fd73e301f8..fd73e301f8 100644 --- a/files/fr/web/api/api_html_drag_and_drop/index.html +++ b/files/fr/web/api/html_drag_and_drop_api/index.html diff --git a/files/fr/web/api/element/accesskey/index.html b/files/fr/web/api/htmlelement/accesskey/index.html index 2d84dd6dae..2d84dd6dae 100644 --- a/files/fr/web/api/element/accesskey/index.html +++ b/files/fr/web/api/htmlelement/accesskey/index.html diff --git a/files/fr/web/events/animationend/index.html b/files/fr/web/api/htmlelement/animationend_event/index.html index 1fdeba6e63..1fdeba6e63 100644 --- a/files/fr/web/events/animationend/index.html +++ b/files/fr/web/api/htmlelement/animationend_event/index.html diff --git a/files/fr/web/events/animationiteration/index.html b/files/fr/web/api/htmlelement/animationiteration_event/index.html index df8e3d89be..df8e3d89be 100644 --- a/files/fr/web/events/animationiteration/index.html +++ b/files/fr/web/api/htmlelement/animationiteration_event/index.html diff --git a/files/fr/web/events/animationstart/index.html b/files/fr/web/api/htmlelement/animationstart_event/index.html index 407bcb6dea..407bcb6dea 100644 --- a/files/fr/web/events/animationstart/index.html +++ b/files/fr/web/api/htmlelement/animationstart_event/index.html diff --git a/files/fr/web/api/node/innertext/index.html b/files/fr/web/api/htmlelement/innertext/index.html index 6b9d530411..6b9d530411 100644 --- a/files/fr/web/api/node/innertext/index.html +++ b/files/fr/web/api/htmlelement/innertext/index.html diff --git a/files/fr/web/events/transitionend/index.html b/files/fr/web/api/htmlelement/transitionend_event/index.html index 0c45cd871c..0c45cd871c 100644 --- a/files/fr/web/events/transitionend/index.html +++ b/files/fr/web/api/htmlelement/transitionend_event/index.html diff --git a/files/fr/web/api/htmlformelement/submit_event_/index.html b/files/fr/web/api/htmlformelement/submit_event/index.html index 135058c596..135058c596 100644 --- a/files/fr/web/api/htmlformelement/submit_event_/index.html +++ b/files/fr/web/api/htmlformelement/submit_event/index.html diff --git a/files/fr/web/api/urlutils/index.html b/files/fr/web/api/htmlhyperlinkelementutils/index.html index 7bbe88b470..7bbe88b470 100644 --- a/files/fr/web/api/urlutils/index.html +++ b/files/fr/web/api/htmlhyperlinkelementutils/index.html diff --git a/files/fr/web/api/element.blur/index.html b/files/fr/web/api/htmlorforeignelement/blur/index.html index 6c5f12166c..6c5f12166c 100644 --- a/files/fr/web/api/element.blur/index.html +++ b/files/fr/web/api/htmlorforeignelement/blur/index.html diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlorforeignelement/dataset/index.html index fa7ece8acc..fa7ece8acc 100644 --- a/files/fr/web/api/htmlelement/dataset/index.html +++ b/files/fr/web/api/htmlorforeignelement/dataset/index.html diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlorforeignelement/focus/index.html index 3659a5a75b..3659a5a75b 100644 --- a/files/fr/web/api/htmlelement/focus/index.html +++ b/files/fr/web/api/htmlorforeignelement/focus/index.html diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlorforeignelement/tabindex/index.html index b2dd8ca956..b2dd8ca956 100644 --- a/files/fr/web/api/htmlelement/tabindex/index.html +++ b/files/fr/web/api/htmlorforeignelement/tabindex/index.html diff --git a/files/fr/web/api/idbrequest/blocked_event/index.html b/files/fr/web/api/idbopendbrequest/blocked_event/index.html index e3fdfdfb83..e3fdfdfb83 100644 --- a/files/fr/web/api/idbrequest/blocked_event/index.html +++ b/files/fr/web/api/idbopendbrequest/blocked_event/index.html diff --git a/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html b/files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html index cb05bef3fe..cb05bef3fe 100644 --- a/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html +++ b/files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html diff --git a/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html index bfa95657cc..bfa95657cc 100644 --- a/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html +++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html diff --git a/files/fr/web/api/api_indexeddb/index.html b/files/fr/web/api/indexeddb_api/index.html index 682043df0e..682043df0e 100644 --- a/files/fr/web/api/api_indexeddb/index.html +++ b/files/fr/web/api/indexeddb_api/index.html diff --git a/files/fr/web/api/api_indexeddb/using_indexeddb/index.html b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html index a8df123888..a8df123888 100644 --- a/files/fr/web/api/api_indexeddb/using_indexeddb/index.html +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html diff --git a/files/fr/web/api/media_streams_api/index.html b/files/fr/web/api/media_streams_api/index.html new file mode 100644 index 0000000000..6722bc8885 --- /dev/null +++ b/files/fr/web/api/media_streams_api/index.html @@ -0,0 +1,85 @@ +--- +title: API MediaStream +slug: WebRTC/MediaStream_API +tags: + - API + - Audio + - Media + - Overview +translation_of: Web/API/Media_Streams_API +--- +<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div> + +<p>L'<strong>API Processing MediaStream</strong>, souvent appelée <em>Media Stream API</em> ou <em>Stream API</em>, est la partie de <a href="/fr/docs/WebRTC">WebRTC</a> décrivant un flux de données audio ou vidéo, les méthodes pour les manipuler, les contraintes associées au type de données, les erreurs et succès des callbacks avec les données asynchrones, et les évènements déclenchés durant le processus.</p> + +<h2 id="Concepts_de_base">Concepts de base</h2> + +<p>L'API est basée sur la manipulation de l'objet {{domxref("MediaStream")}} représentant un flux de données audio ou vidéo. Typiquement, un {{domxref("MediaStream")}} est une simple chaine URL qui peut être utilisée pour référencer une donnée stockée dans un {{domxref("File")}} DOM, ou un objet {{domxref("Blob")}} crée avec {{domxref("window.URL.createObjectURL()")}}, tel que décrit dans <a href="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">cette vidéo</a>.</p> + +<p>Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes <strong>pistes</strong> audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs <strong>canal</strong>. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en <em>gauche</em> et <em>droite</em> sur une piste audio en stéréo.</p> + +<p><code><font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif">Les objets </font></code> {{domxref("MediaStream")}} ont une seule <strong>entrée </strong>et une seule <strong>sortie</strong>. Un objet {{domxref("MediaStream")}} généré par <a href="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a> est dit <em>local</em>, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a>, ou un flux créé en utilisant l'API <a href="/en-US/docs/Web_Audio_API">Web Audio</a> {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un <strong>consommateur</strong>. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a> ou l'<a href="/en-US/docs/Web_Audio_API">API Web Audio</a> {{domxref("MediaStreamAudioDestinationNode")}}.</p> + +<h2 id="Interfaces">Interfaces</h2> + +<p>Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API <em>Media Capture and Streams API</em>.</p> + +<div class="index"> +<ul> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li> + <li>{{domxref("InputDeviceInfo")}}</li> + <li>{{domxref("MediaDeviceKind")}}</li> + <li>{{domxref("MediaDeviceInfo")}}</li> + <li>{{domxref("MediaDevices")}}</li> + <li>{{domxref("MediaStream")}}</li> + <li>{{domxref("MediaStreamConstraints")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MediaStreamTrack")}}</li> + <li>{{domxref("MediaStreamTrackEvent")}}</li> + <li>{{domxref("MediaTrackCapabilities")}}</li> + <li>{{domxref("MediaTrackConstraints")}}</li> + <li>{{domxref("MediaTrackSettings")}}</li> + <li>{{domxref("MediaTrackSupportedConstraints")}}</li> + <li>{{domxref("NavigatorUserMedia")}}</li> + <li>{{domxref("NavigatorUserMediaError")}}</li> + <li>{{domxref("OverconstrainedError")}}</li> + <li>{{domxref("URL")}}</li> +</ul> +</div> + +<p>Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées <code>AudioStreamTrack</code> et <code>VideoStreamTrack</code>, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser <code>MediaStreamTrack</code> directement à la place.</p> + +<h2 id="Évènements">Évènements</h2> + +<div class="index"> +<ul> + <li>{{event("addtrack")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("muted")}}</li> + <li>{{event("overconstrained")}}</li> + <li>{{event("removetrack")}}</li> + <li>{{event("started")}}</li> + <li>{{event("unmuted")}}</li> +</ul> +</div> + +<h2 id="Guides_et_tutorials">Guides et tutorials</h2> + +<p>Les articles qui suivent fournissent des manuels et guides pour utiliser cette API et réaliser des certaines tâches avec elle.</p> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.MediaStream")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> - la page d'introduction à l'API</li> + <li>{{domxref("mediaDevices.getUserMedia()")}}</li> + <li><a href="/fr/docs/Web/API/WebRTC_API/Taking_still_photos">Prendre des clichés avec WebRTC</a> : un tutoriel/une démonstration sur l'utilisation de <code>getUserMedia()</code>.</li> +</ul> diff --git a/files/fr/web/api/namelist/index.html b/files/fr/web/api/namelist/index.html deleted file mode 100644 index 9003767ee3..0000000000 --- a/files/fr/web/api/namelist/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: NameList -slug: Web/API/NameList -tags: - - API - - DOM - - Obsolete -translation_of: Web/API/NameList ---- -<div>{{APIRef("DOM")}} {{ obsolete_header("10.0") }}</div> - -<div class="note"> -<p><strong>Note:</strong> Bien que cette interface ait été précédemment implémentée dans Gecko, il n'y avait aucun moyen d'en créer une. <code>NameList</code> a été supprimé, en vigueur avec {{ Gecko("10.0") }}</p> -</div> - -<p>L'interface <code><strong>NameList</strong></code> fournit une abstraction pour une collection ordonnée de paires de valeurs de nom et d'espace de noms. Les éléments sont accessibles par un index basé sur 0. La spécification DOM ne spécifie pas comment la collection doit être implémentée.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("NameList.length")}} {{readonlyInline}}</dt> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{domxref("NameList.contains()")}}</dt> - <dd>Renvoie un {{jsxref("Boolean")}}.</dd> - <dt>{{domxref("NameList.containsNS()")}}</dt> - <dd>Renvoie un {{jsxref("Boolean")}}.</dd> - <dt>{{domxref("NameList.getName()")}}</dt> - <dd>Renvoie un {{domxref("DOMString")}}.</dd> - <dt>{{domxref("NameList.getNamespaceURI()")}}</dt> - <dd>Renvoie un {{domxref("DOMString")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Statut</th> - <th>Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#NameList", "NameList")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> diff --git a/files/fr/web/api/navigator/getusermedia/index.html b/files/fr/web/api/navigator/getusermedia/index.html new file mode 100644 index 0000000000..44921a5d48 --- /dev/null +++ b/files/fr/web/api/navigator/getusermedia/index.html @@ -0,0 +1,194 @@ +--- +title: NavigatorUserMedia.getUserMedia() +slug: NavigatorUserMedia.getUserMedia +tags: + - API + - Deprecated + - Media + - WebRTC + - getusermedia +translation_of: Web/API/Navigator/getUserMedia +--- +<div>{{APIRef("Media Capture and Streams")}}{{deprecated_header}}</div> + +<p>La fonction obsolète <strong>Navigator.getUserMedia()</strong> demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur.</p> + +<p>Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur <span>quelconque</span> se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.</p> + +<div class="note"> +<p>Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">navigator.getUserMedia(constraints, successCallback, errorCallback);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>constraints</dt> + <dd>Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de médias que vous souhaitez recevoir, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section <a href="/fr/docs/Web/API/MediaDevices/getUserMedia#Syntaxe">constraints</a> de la méthode {{domxref("MediaDevices.getUserMedia()")}}, ainsi que l'article <a href="/fr/docs/Web/API/Media_Streams_API/Constraints">Capacités, constraintes, et configurations</a>.</dd> + <dt>successCallback</dt> + <dd>Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appellée avec un paramètre: l'objet {{domxref("MediaStream")}} qui contient les flux de médias. Votre callback peut assigner le stream l'objet que vous désirez (ex: un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), comme dans l'exemple suivant: + <pre class="brush: js">function(stream) { + var video = document.querySelector('video'); + video.src = window.URL.createObjectURL(stream); + video.onloadedmetadata = function(e) { + // Do something with the video here. + }; +} +</pre> + </dd> + <dt>errorCallback</dt> + <dd>Lorsque l'appel échoue, la fonction spécifiée dans <code>errorCallback</code> est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>{{domxref("undefined")}}.</p> + +<h3 id="Erreurs">Erreurs</h3> + +<p>{{page("/fr/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}</p> + +<h2 id="Exemples"><strong>Exemples</strong></h2> + +<h3 id="Largeur_et_hauteur">Largeur et hauteur</h3> + +<p>Voici un exemple de l'utilisation de <code>getUserMedia()</code>, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les <a href="/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate">exemples</a> sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes.</p> + +<pre class="brush: js">navigator.getUserMedia = navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia; + +if (navigator.getUserMedia) { + navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } }, + function(stream) { + var video = document.querySelector('video'); + video.src = window.URL.createObjectURL(stream); + video.onloadedmetadata = function(e) { + video.play(); + }; + }, + function(err) { + console.log("The following error occurred: " + err.name); + } + ); +} else { + console.log("getUserMedia not supported"); +}</pre> + +<h2 id="Permissions">Permissions</h2> + +<p>Pour utiliser <code>getUserMedia()</code> dans une application installable (par exemple une application Firefox OS), vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifest.</p> + +<pre class="brush: js">"permissions": { + "audio-capture": { + "description": "Required to capture audio using getUserMedia()" + }, + "video-capture": { + "description": "Required to capture video using getUserMedia()" + } +} +</pre> + +<p id="errorCallback">See <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> and <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> for more information.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécifications</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="warning"> +<p>New code should use {{domxref("Navigator.mediaDevices.getUserMedia()")}} instead.</p> +</div> + +<div> +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Microsoft Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>21{{property_prefix("webkit")}} [1]</td> + <td>17{{property_prefix("moz")}} [3]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>12 [2]<br> + 18{{property_prefix("webkit")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic Support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(40.0)}}{{property_prefix("webkit")}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>24{{property_prefix("moz")}} [3]</td> + <td>1.2{{property_prefix("moz")}} [4]<br> + 1.4{{property_prefix("moz")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Les versions suivantes de Chrome supportent {{domxref("MediaDevices.getUserMedia()")}} sans préfixe qui remplace cette méthode dépréciée.</p> + +<p>[2] Chrome et Opera utilisent toujours une ancienne syntaxe de contraintes mais la syntaxe décrite ici est disponible via le polyfill <a href="https://github.com/webrtc/adapter">adapter.js</a>.</p> + +<p>[3] La syntaxe de la contrainte décrite ici est disponible depuis Firefox 38. Les versions précédentes utilisent une ancienne syntaxe de contraintes, mais la syntaxe décrite ici est disponible via le polyfill <a href="https://github.com/webrtc/adapter">adapter.js</a>.</p> + +<p>[4] Dans Firefox OS 1.2 seul <code>audio</code> était supporté, 1.4 ajoute le support de <code>video</code>.</p> + +<p>Pour le moment, utiliser WebRTC pour accéder à la caméra est supporté par Chrome, Opera, et Firefox 20.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC">WebRTC</a> - page d'introduction aux APIS</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - L'API des Media Streams Objects</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutoriel à propos de l'utilisation de <code>getUserMedia()</code> pour prendre des photos plutôt que des vidéos.</li> +</ul> diff --git a/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html b/files/fr/web/api/navigatoronline/online_and_offline_events/index.html index 4ba6a2d717..4ba6a2d717 100644 --- a/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html +++ b/files/fr/web/api/navigatoronline/online_and_offline_events/index.html diff --git a/files/fr/web/api/network_information_api/index.html b/files/fr/web/api/network_information_api/index.html new file mode 100644 index 0000000000..076718cbcc --- /dev/null +++ b/files/fr/web/api/network_information_api/index.html @@ -0,0 +1,89 @@ +--- +title: Network Information API +slug: WebAPI/Network_Information +tags: + - WebAPI +translation_of: Web/API/Network_Information_API +--- +<p>{{ SeeCompatTable() }}</p> + +<p>L'API Network Information (Informations réseau) fournit des informations sur la connexion de l'appareil : la bande-passante, si la connexion est mesurée ou non. Elle peut être utilisée pour choisir entre du contenu en haute définition ou en basse définition selon la connexion de l'utilisateur. L'API ne représente qu'un seul objet, ajouté au DOM : {{domxref("window.navigator.connection")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Détecter_les_changements_de_connexion">Détecter les changements de connexion</h3> + +<p>Cet exemple permet de connaître les changements liés à la connexion d'un utilisateur. Cela ressemble notamment à la façon dont une application saura si l'utilisateur passe d'une connexion coûteuse à une autre connexion moins chère et pourra réduire la demande de bande passante afin de réduire les coûts pour l'utilisateur.</p> + +<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; + +function updateConnectionStatus() { + alert("Bande passante de la connexion : " + connection.bandwidth + " MB/s"); + if (connection.metered) { + alert("La connexion est mesurée !"); + } +} + +connection.addEventListener("change", updateConnectionStatus); +updateConnectionStatus(); +</pre> + +<h3 id="Préchargement_de_ressources_gourmandes">Préchargement de ressources gourmandes</h3> + +<p>L'objet connexion est pratique pour décider de précharger des ressources nécessitant une grosse quantité de bande passante ou de mémoire. Cet exemple devra être appelé après que la page ait été chargé. Il détermine si précharger la vidéo est judicieux selon le type de la connexion. Si une connexion cellulaire est trouvée, alors <code>preloadVideo</code> est réglé à faux. Ici pour faire simple, on ne teste qu'un type de connexion; dans un cas réel on aurait plutôt utilisé une structure de contrôle switch ou une autre méthode pour avoir tout les cas possibles de {{domxref("NetworkInformation.type")}}. Malgré la valeur <code>type</code>, on peut avoir une estimation de la vitesse de la connexion à travers la propriété {{domxref("NetworkInformation.effectiveType")}}<strong>.</strong></p> + +<pre class="brush: js">let preloadVideo = true; +var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; +if (connection) { + if (connection.effectiveType === 'cellular') { + preloadVideo = false; + } +}</pre> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{domxref("NetworkInformation")}}</dt> + <dd>Fournit des informations sur la connexion de l'appareil et fournit la possibilité aux scriptes d'être informé en cas de changement. L'interface <code>NetworkInformation</code> ne peut pas être instanciée; à la place on y accède à travers l'interface {{domxref("Navigator")}}.</dd> +</dl> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Network Information', '', 'Network Information API')}}</td> + <td>{{Spec2('Network Information')}}</td> + <td>Spécification initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<h3 id="NetworkInformation"><code>NetworkInformation</code></h3> + + + +<p>{{Compat("api.NetworkInformation")}}</p> + +<h3 id="Navigator.connection"><code>Navigator.connection</code></h3> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.Navigator.connection")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Spécification de l'API Network Information", "ED")}}</li> + <li><a href="/fr/docs/Online_and_offline_events">Les évènement online et offline</a></li> + <li>{{domxref("window.navigator.connection")}}</li> +</ul> diff --git a/files/fr/web/api/node/baseuriobject/index.html b/files/fr/web/api/node/baseuriobject/index.html deleted file mode 100644 index 617ed79d8e..0000000000 --- a/files/fr/web/api/node/baseuriobject/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Node.baseURIObject -slug: Web/API/Node/baseURIObject -tags: - - API - - DOM - - Noeuds - - Propriétés - - URI - - URL -translation_of: Web/API/Node -translation_of_original: Web/API/Node/baseURIObject ---- -<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> - -<p>La propriété <code><strong>Node.baseURIObject</strong></code> renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (<em>chaîne de caractères</em>).</p> - -<p>Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.</p> - -<p>Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.</p> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> - -<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject -</pre> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.</p> - -<h2 id="Specification" name="Specification">Spécification</h2> - -<p>N'existe dans aucune spécification.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("api.Node.baseURIObject")}}</p> diff --git a/files/fr/web/api/node/nodeprincipal/index.html b/files/fr/web/api/node/nodeprincipal/index.html deleted file mode 100644 index 33144eae42..0000000000 --- a/files/fr/web/api/node/nodeprincipal/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Node.nodePrincipal -slug: Web/API/Node/nodePrincipal -tags: - - API - - DOM - - Noeuds - - Principal - - Propriétés -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal ---- -<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> - -<p>La propriété en lecture seule <code><strong>Node.nodePrincipal</strong></code> renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.</p> - -<p>{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}</p> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> - -<pre class="syntaxbox"><em>principalObj</em> = <em>Node</em>.nodePrincipal -</pre> - -<h3 id="Valeur">Valeur</h3> - -<p>Un objet <code>nsIPrincipal</code> représentant le contexte de sécurité du noeud.</p> - -<h2 id="Notes">Notes</h2> - -<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.</p> - -<h2 id="Specification" name="Specification">Spécifications</h2> - -<p>N'existe dans aucune spécification. C'est une propriété propre à Firefox.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("api.Node.nodePrincipal")}}</p> diff --git a/files/fr/web/api/node/rootnode/index.html b/files/fr/web/api/node/rootnode/index.html deleted file mode 100644 index 7ee512dd8f..0000000000 --- a/files/fr/web/api/node/rootnode/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Node.rootNode -slug: Web/API/Node/rootNode -tags: - - API - - Arborescence - - DOM - - Noeuds - - Propriétés - - Racine -translation_of: Web/API/Node/getRootNode -translation_of_original: Web/API/Node/rootNode ---- -<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p> - -<p>La propriété en lecture seule <code><strong>Node.rootNode</strong></code> renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.</p> - -<div class="warning"> -<p><strong>Important </strong>: Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.</p> -</div> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> - -<pre><var>rootNode</var> = <em>node</em>.rootNode; -</pre> - -<h3 id="Valeur">Valeur</h3> - -<p>Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.</p> - -<h2 id="Example" name="Example">Exemple</h2> - -<p>L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :</p> - -<pre class="brush: js">console.log(document.body.rootNode);</pre> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces - vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou - <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément - que l'auteur comptait obtenir.</p> - - <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a> - et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> - dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("api.Node.rootNode")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> diff --git a/files/fr/web/api/notification/using_web_notifications/index.html b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html index 796e7d152a..796e7d152a 100644 --- a/files/fr/web/api/notification/using_web_notifications/index.html +++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html diff --git a/files/fr/web/events/complete/index.html b/files/fr/web/api/offlineaudiocontext/complete_event/index.html index 5e3b264f1c..5e3b264f1c 100644 --- a/files/fr/web/events/complete/index.html +++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.html diff --git a/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html index 707b3e5eb3..707b3e5eb3 100644 --- a/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html +++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html diff --git a/files/fr/web/api/pointer_lock_api/index.html b/files/fr/web/api/pointer_lock_api/index.html new file mode 100644 index 0000000000..e3d6ea14f3 --- /dev/null +++ b/files/fr/web/api/pointer_lock_api/index.html @@ -0,0 +1,319 @@ +--- +title: Pointer Lock API +slug: WebAPI/Pointer_Lock +tags: + - API + - Avancé + - Jeux + - Reference + - mouse lock + - pointer lock +translation_of: Web/API/Pointer_Lock_API +--- +<div>{{DefaultAPISidebar("Pointer Lock API")}}</div> + +<p><strong>Pointer lock</strong> (en français <em>Verrouillage du pointeur</em>, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue.<br> + <br> + Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions.<br> + <br> + Comme Pointer lock continue de déclencher des évènements même quand le curseur est en dehors des limites du navigateur ou de l'écran, les joueurs peuvent cliquer sur les boutons et déplacer le curseur de la souris sans se soucier de quitter la zone de jeu et de cliquer accidentellement sur une autre application qui changerait le focus de la souris en dehors du jeu.</p> + +<h2 id="basics" name="basics">Concepts de base</h2> + +<p>Pointer Lock partage des similtudes avec la <a href="/fr/docs/Web/API/Element/setCapture" title="element.setCapture">capture de souris</a>. La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :</p> + +<ul> + <li>Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique.</li> + <li>Ne se limite pas aux bordures du navigateur ou de l'écran.</li> + <li>Continue de déclencher des évènements peu importe l'état des boutons de la souris.</li> + <li>Cache le curseur.</li> +</ul> + +<h2 id="method_overview" name="method_overview">Vue d'ensemble des méthodes/propriétées</h2> + +<p>Cette section fournit une brève description de chaque propriété et méthode associée à la spécification de Pointer Lock.</p> + +<h3 id="requestPointerLock()">requestPointerLock()</h3> + +<p>L'API Pointer lock, de manière similaire à l'<a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">API Fullscreen</a>, étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément <code>canvas</code>:</p> + +<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock || + canvas.mozRequestPointerLock || + canvas.webkitPointerLockElement; + +canvas.requestPointerLock()</pre> + +<h3 id="pointerLockElement_et_exitPointerLock()">pointerLockElement et exitPointerLock()</h3> + +<p>L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}} est utilisée pour libérer le verrou du pointeur.</p> + +<p>La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe.</p> + +<p>Voici un exemple d'utilisation de <code>pointerLockElement</code>:</p> + +<pre class="brush: js">document.pointerLockElement = document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement; + +// 1) Utiliser une vérification booléenne--le pointeur est-il verrouillé? +if (!!document.pointerLockElement) { + // pointeur verrouillé +} else { + // pointeur non verrouillé +} + +// 2) Accéder à l'élément verrouillé +if (document.pointerLockElement === someElement) { + // someElement est l'élément sur lequel le pointeur est verrouillé +} +</pre> + +<p>La méthode {{domxref("Document.exitPointerLock()")}} est utilisée pour libérer le verrouillage du pinteur, et, comme {{domxref("Element.requestPointerLock","requestPointerLock")}}, marche de manière asynchrone, on utilise les événements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}, que vous verrez plus en détails ci-dessous.</p> + +<pre class="brush: js">document.exitPointerLock = document.exitPointerLock || + document.mozExitPointerLock || + document.webkitExitPointerLock; + +// Essaie de déverrouiller +document.exitPointerLock(); +</pre> + +<h2 id="mouselocklostevent" name="mouselocklostevent">Événement pointerlockchange</h2> + +<p>Quand l'état de verrouillage du pointeur change — par exemple quand on appelle {{domxref("Element.requestPointerLock","requestPointerLock()")}}, {{domxref("Document.exitPointerLock","exitPointerLock()")}}, que l'utilisateur presse la touche ECHAP, etc.—l'événement {{event("pointerlockchange")}} est envoyé au <code>document</code>. C'est un simple événement qui ne contient pas de données supplémentaires.</p> + +<pre class="brush: js">document.pointerLockElement = document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement; + +function pointerLockChange() { + if (!!document.pointerLockElement) { + console.log("Verrouillé."); + } else { + console.log("Non verrouillé."); + } +} + +document.addEventListener('pointerlockchange', pointerLockChange, false); +document.addEventListener('mozpointerlockchange', pointerLockChange, false); +document.addEventListener('webkitpointerlockchange', pointerLockChange, false); +</pre> + +<h2 id="mouselocklostevent" name="mouselocklostevent">Événement pointerlockerror</h2> + +<p>Quand une erreur est causée par l'appel de {{domxref("Element.requestPointerLock","requestPointerLock()")}} ou {{domxref("Document.exitPointerLock","exitPointerLock()")}}, l'événement {{event("pointerlockerror")}} est envoyé au <code>document</code>. C'est un simple événement qui ne contient pas de données supplémentaires.</p> + +<pre class="brush: js">document.addEventListener('pointerlockerror', lockError, false); +document.addEventListener('mozpointerlockerror', lockError, false); +document.addEventListener('webkitpointerlockerror', pointerLockChange, false); + +function lockError(e) { + alert("Pointer lock failed"); +} +</pre> + +<div class="note"><strong>Note</strong>: Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec <code>moz</code>.</div> + +<h2 id="extensions" name="extensions">Extensions aux événements de souris</h2> + +<p>L'API Pointer lock étend l'interface {{domxref("MouseEvent")}} normale avec les attributs de mouvement. Deux nouveaux attributs sont ajoutés aux événements de souris —{{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}— fournissant le changement de position de la souris. Ces paramètres ont pour valeur les différences entre les valeurs des propriétés de {{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}} stockées dans les événements {{event("mousemove")}}, <code>eNow</code> et <code>ePrevious</code>. En d'autres termes, <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p> + +<h3 id="locked_state" name="locked_state">État verrouillé</h3> + +<p>Quand le verrouillage du pointeur est activé, les propriétés standard {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, et {{domxref("MouseEvent.screenY","screenY")}} sont gardées constantes, comme si la souris ne bougeait pas. Les propriétés {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} continuent de fournir le changement de position de la souris. Il n'y a pas de limite aux valeurs {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}, si la souris continue de bouger toujours dans la même direction. Le curseur de la souris n'existe pas et il ne peut pas sortir de la fenêtre ou être bloqué par un bord de l'écran.</p> + +<h3 id="unlocked_state" name="unlocked_state">État déverrouillé</h3> + +<p>Les paramètres {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont disponibles quel que soit l'état de la souris, verrou ou non.</p> + +<p>Quand la souris est déverrouillée, il est possible que le curseur soit en dehors de la fenêtre et il est alors remis automatiquement à l'intérieur. Si cela arrive, {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont définis à zéro.</p> + +<h2 id="example" name="example">Simple exemple pas à pas</h2> + +<p>Nous avons écrit une <a href="https://mdn.github.io/dom-examples/pointer-lock/">démo de verrouillage de pointer</a> pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple (<a href="https://github.com/mdn/dom-examples/tree/master/pointer-lock">voir le code source</a>). La démo ressemble à ça:</p> + +<p><img alt="A red circle on top of a black background." src="https://mdn.mozillademos.org/files/7953/pointer-lock.png" style="display: block; height: 362px; margin: 0px auto; width: 640px;"></p> + +<p>Cette démo utilise JavaScript pour dessiner une balle dans un élément {{ htmlelement("canvas") }}. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris. Voyons comment cela fonctionne.</p> + +<p>On définit les positions initiales x et y sur le canvas:</p> + +<pre class="brush: js">var x = 50; +var y = 50;</pre> + +<p>Les méthodes de verrouillage de pointeur sont préfixées dans les anciennes versions des navigateurs, on prend donc en compte les différentes implémentations des navigateurs:</p> + +<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock || + canvas.mozRequestPointerLock || + canvas.webkitRequestPointerLock; + +document.exitPointerLock = document.exitPointerLock || + document.mozExitPointerLock || + document.webkitExitPointerLock;</pre> + +<p>Maintenant, on définit un gestionnaire d'événement qui appelle la méthode <code>requestPointerLock()</code> quand le canvas est cliqué, ce qui déclenche le verrouillage du pointeur.</p> + +<pre class="brush: js">canvas.onclick = function() { + canvas.requestPointerLock(); +}</pre> + +<p>Et maintenant le gestionnaire d'événement pour le verrouillage: <code>pointerlockchange</code>. Quand cet événement se déclenche, on appelle <code>lockChangeAlert()</code> pour gérer le changement.</p> + +<pre class="brush: js">// Gestionnaire d'événement de changement d'état du verrouilllage pour les différents navigateurs +document.addEventListener('pointerlockchange', lockChangeAlert, false); +document.addEventListener('mozpointerlockchange', lockChangeAlert, false); +document.addEventListener('webkitpointerlockchange', lockChangeAlert, false); +</pre> + +<p>La fonction suivante vérifie si la propriété <code>pointLockElement</code> est sur notre canvas. Si c'est le cas, on attache un gestionnaire d'événement pour gérer les mouvements de la souris avec la fonction <code>updatePosition()</code>. Sinon, elle enlève le gestionnaire d'événement.</p> + +<pre class="brush: js">function lockChangeAlert() { + if (document.pointerLockElement === canvas) { + console.log('The pointer lock status is now locked'); + document.addEventListener("mousemove", updatePosition, false); + } else { + console.log('The pointer lock status is now unlocked'); + document.removeEventListener("mousemove", updatePosition, false); + } +}</pre> + +<p>La fonction <code>updatePosition()</code> met à jour la position de la balle sur le canvas (les valeurs <code>x</code> et <code>y</code>), et inclut également des instructions <code>if()</code> pour vérifier si la balle est sortie des bords du canvas. Dans ce cas, la balle se ressort au bord opposé. Elle vérifie également si un appel à <code><a href="/fr/docs/Web/API/Window/requestAnimationFrame">requestAnimationFrame()</a></code> a été effectué et si ce n'est pas le cas, l'appelle pour qu'elle déclenche la fonction <code>canvasDraw()</code> et mette à jour le canvas. Un tracker est mis en place pour afficher les valeurs X et Y à l'écran, pour référence.</p> + +<pre class="brush: js">var tracker = document.getElementById('tracker'); + +var animation; +function updatePosition(e) { + x += e.movementX; + y += e.movementY; + if (x > canvas.width + RADIUS) { + x = -RADIUS; + } + if (y > canvas.height + RADIUS) { + y = -RADIUS; + } + if (x < -RADIUS) { + x = canvas.width + RADIUS; + } + if (y < -RADIUS) { + y = canvas.height + RADIUS; + } + tracker.textContent = "X position: " + x + ", Y position: " + y; + + if (!animation) { + animation = requestAnimationFrame(function() { + animation = null; + canvasDraw(); + }); + } +}</pre> + +<p>La fonction <code>canvasDraw()</code> affiche la balle aux position <code>x</code> et <code>y</code> en cours:</p> + +<pre class="brush: js">function canvasDraw() { + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "#f00"; + ctx.beginPath(); + ctx.arc(x, y, RADIUS, 0, degToRad(360), true); + ctx.fill(); +}</pre> + +<h2 id="iframe_limitations">iframe limitations</h2> + +<p>Le verrouilage du pointeur ne peut concerner qu'une seule iframe à la fois. Quand vous verrouillez une iframe, vous ne pouvez pas essayer de verrouiller une autre iframe et y transférer la cible; une erreur sera levée. Pour éviter cette limitation, déverrouillez d'abord la première iframe, puis verrouillez la seconde.</p> + +<p>Tandis que cela fonctionne pour les iframes par défaut, les iframes en "sandbox" bloquent le verrouillage. La possibilité d'éviter cette limitation, sous la forme de la combinaison attribut/valeur <code><iframe sandbox="allow-pointer-lock"></code>, devrait bientôt apparaître dans Chrome.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Etat</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Lock')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité navigateur</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}} {{ property_prefix("-moz") }}</p> + </td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.1</td> + </tr> + <tr> + <td>Unprefixed support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("MouseEvent")}}</li> +</ul> diff --git a/files/fr/web/api/proximity_events/index.html b/files/fr/web/api/proximity_events/index.html new file mode 100644 index 0000000000..e5b3d1e199 --- /dev/null +++ b/files/fr/web/api/proximity_events/index.html @@ -0,0 +1,120 @@ +--- +title: Proximity +slug: WebAPI/Proximity +tags: + - WebAPI +translation_of: Web/API/Proximity_Events +--- +<p>{{ SeeCompatTable }}</p> +<h2 id="Résumé">Résumé</h2> +<p>Les événements de proximité permettent, simplement, de savoir lorsqu'un utilisateur est près de l'appareil. Ces événements permettent de réagir par rapport à cette proximité, par exemple en éteignant l'écran lorsqu'un utilisateur est en train de passer un appel téléphonique et que l'appareil est près de l'oreille.</p> +<div class="note"> + <p><strong>Note :</strong> Bien entendu, il faut un capteur de proximité pour que cette API fonctionne, ceux-ci sont généralement disponibles sur les appareils mobile. Les appareils ne disposant pas d'un tel capteur pourront supporter de tels événements, ils seront en revanche incapables de les déclencher.</p> +</div> +<h2 id="Événements_de_proximité">Événements de proximité</h2> +<p>Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit.</p> +<p>Cet événement peut être capturé en utilisant un objet au niveau <code>window</code> en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}.</p> +<p>Une fois qu'il a été capturé, l'événement donne accès à différentes informations :</p> +<ul> + <li>L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}.</li> + <li>L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété {{domxref("UserProximityEvent.near")}} vaut <code>true</code> si l'objet est proche ou <code>false</code> si l'objet est loin.</li> +</ul> +<h2 id="Exemple">Exemple</h2> +<pre class="brush: js">window.addEventListener('userproximity', function(event) { + if (event.near) { + // extinction de l'écran + navigator.mozPower.screenEnabled = false; + } else { + // allumage de l'écran + navigator.mozPower.screenEnabled = true; + } +});</pre> +<h2 id="Specifications" name="Specifications">Spécifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td> + <td>{{ Spec2('Proximity Events') }}</td> + <td>Spécification initiale</td> + </tr> + </tbody> +</table> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{domxref("DeviceProximityEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>{{domxref("UserProximityEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{domxref("DeviceProximityEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{ CompatGeckoMobile("15.0") }}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>{{domxref("UserProximityEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Voir_aussi">Voir aussi</h2> +<ul> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{event("deviceproximity")}}</li> + <li>{{event("userproximity")}}</li> +</ul> diff --git a/files/fr/web/events/audioprocess/index.html b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html index ae89178361..ae89178361 100644 --- a/files/fr/web/events/audioprocess/index.html +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html diff --git a/files/fr/web/api/selection_api/index.html b/files/fr/web/api/selection_api/index.html deleted file mode 100644 index bca8077699..0000000000 --- a/files/fr/web/api/selection_api/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Selection API -slug: Web/API/Selection_API -translation_of: Web/API/Selection_API ---- -<p>{{APIRef}}</p> - -<div class="summary"> -<p>L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : <em lang="en-US">ranges</em>) de texte sélectionnées par l’utilisatrice ou l’utilisateur.</p> -</div> - -<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> - -<p>Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.</p> - -<p>Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :</p> - -<ul> - <li>copier la sélection dans une chaîne en utilisant {{domxref("Selection.toString()")}} ;</li> - <li>ajouter (ou enlever) une plage (representée par un objet {{domxref("Range")}} standard) à la sélection grâce à {{domxref("Selection.addRange()")}} / {{domxref("Selection.removeRange()")}} ;</li> - <li>modifier la sélection pour qu’elle devienne le contenu entier d’un nœud DOM grâce à {{domxref("Selection.selectAllChildren()")}}.</li> -</ul> - -<p>Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.</p> - -<h2 id="Interfaces_de_l’API_Selection">Interfaces de l’API Selection</h2> - -<dl> - <dt>{{domxref("Selection")}}</dt> - <dd>Représente la plage de texte sélectionnée ou la position actuelle du curseur.</dd> -</dl> - -<h2 id="Extensions_à_d’autres_interfaces">Extensions à d’autres interfaces</h2> - -<dl> - <dt>{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}</dt> - <dd>Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. <code>Document.getSelection()</code> est en quelques sortes un alias de <code>Window.getSelection()</code>.</dd> - <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt> - <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).</dd> - <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> - <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Selection API', '#definition', 'Selection')}}</td> - <td>{{Spec2('Selection API')}}</td> - <td>La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.</td> - </tr> - <tr> - <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td> - <td>{{Spec2('HTML Editing')}}</td> - <td>Définition initiale (plus ancienne), à présent obsolète.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Support de base</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown()}}<br> - {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td> - <td>9</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>modify()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(2)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>setBaseAndExtent()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(53)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>deleteFromDocument()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(55)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(55)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>setPosition()</code> comme alias de <code>collapse()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(55)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support de base</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td> - <p>{{CompatVersionUnknown()}}<br> - {{CompatGeckoMobile(52)}}<sup>[1]</sup></p> - </td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>modify()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(2)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>setBaseAndExtent()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(53)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>deleteFromDocument()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(55)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(55)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>setPosition()</code> comme alias de <code>collapse()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(55)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.</p> - -<h2 id="See_also" name="See_also">Voir aussi</h2> - -<ul> - <li><a href="https://github.com/chrisdavidmills/selection-api-examples/tree/gh-pages#key-quote-generator" lang="en-US">Key quote generator</a>: Une démo simple montrant un usage typique de l’API Selection pour capturer la sélection actuelle à un instant donné et copier les sélections dans une liste (<a href="https://chrisdavidmills.github.io/selection-api-examples/">voir également en direct</a>).</li> - <li>L’objet {{domxref("Range")}}.</li> -</ul> diff --git a/files/fr/web/api/storage/localstorage/index.html b/files/fr/web/api/storage/localstorage/index.html deleted file mode 100644 index 9f6c400f86..0000000000 --- a/files/fr/web/api/storage/localstorage/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: LocalStorage -slug: Web/API/Storage/LocalStorage -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage ---- -<p>{{APIRef()}}</p> - -<p>La propriété <code>localStorage</code> de l’objet <code>Window</code> est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. <code>localStorage</code> a été introduit dans Firefox 3.5.</p> - -<div class="note"><strong>Note :</strong> Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.</div> - -<pre class="brush:js">// Sauvegarder les informations dans l’espace local courant -localStorage.setItem("username", "John"); - -// Accéder à des données enregistrées -alert("username = " + localStorage.getItem("username"));</pre> - -<p class="note">La persistence de <code>localStorage</code> le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce <a href="http://codepen.io/awesom3/pen/Hlfma">tutoriel sur Codepen</a>.</p> - -<h2 id="Compatibilité">Compatibilité</h2> - -<p>Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet <code>localStorage</code> dans les navigateurs qui ne le supportent pas nativement.</p> - -<p>Cet algorithme est une imitation exacte de l’objet <code>localStorage</code>, mais utilise les cookies.</p> - -<pre class="brush:js">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> - -<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.setItem()</code> et <code>localStorage.removeItem()</code> pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes <code>localStorage.yourKey = yourValue;</code> et <code>delete localStorage.yourKey;</code> pour définir ou supprimer une clé n’est <strong>pas sécurisée avec ce code.</strong> Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet <code>localStorage</code>.</div> - -<div class="note"><strong>Note :</strong> En remplaçant <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de <code>sessionStorage</code> restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div> - -<p>Voici une autre imitation, moins exacte, de l’objet <code>localStorage</code>. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer < 8 (<strong>testé et vérifié même avec Internet Explorer 6</strong>). Ce code utilise également les cookies.</p> - -<pre class="brush:js">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { - return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); - }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> - -<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, et <code>localStorage.removeItem()</code> pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode <code>localStorage.yourKey</code> pour récupérer, définir, ou supprimer une clé <strong>n’est pas possible avec ce code</strong>. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet <code>localStorage</code>.</div> - -<div class="note"><strong>Note :</strong> En remplaçant la chaîne <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec <code>sessionStorage</code> restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div> - -<h3 id="Compatibilité_et_relation_avec_globalStorage">Compatibilité et relation avec globalStorage</h3> - -<p><code>localStorage</code> est équivalent à <code>globalStorage[location.hostname]</code>, à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que <code>localStorage</code> est une instance de <code>Storage</code>, contrairement à <code>globalStorage[location.hostname]</code> qui est une instance de <code>StorageObsolete</code> (qui est abordé ci-dessous). Par exemple, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> ne sera pas capable d’accéder au même objet <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mais il pourront accéder au même élément <code>globalStorage</code>. <code>localStorage</code> est une interface standard alors que <code>globalStorage</code> n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.</p> - -<p>Veuillez noter que définir une propriété sur <code>globalStorage[location.hostname]</code> n’entraîne <strong>pas</strong> sa définition sur <code>localStorage</code>, et qu’étendre <code>Storage.prototype</code> n’affecte pas les objets <code>globalStorage</code> ; pour faire ainsi, c’est <code>StorageObsolete.prototype</code> qu’il faut étendre.</p> - -<h2 id="Format_de_stockage">Format de stockage</h2> - -<p>Les clés et les valeurs de <code>Storage</code> sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.</p> diff --git a/files/fr/web/guide/dom/events/touch_events/index.html b/files/fr/web/api/touch_events/index.html index 7f3cbae7b5..7f3cbae7b5 100644 --- a/files/fr/web/guide/dom/events/touch_events/index.html +++ b/files/fr/web/api/touch_events/index.html diff --git a/files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html index 97174a4763..97174a4763 100644 --- a/files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html +++ b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html diff --git a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html b/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html deleted file mode 100644 index b925ca7f4b..0000000000 --- a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html +++ /dev/null @@ -1,423 +0,0 @@ ---- -title: Concepts avancés et exemples -slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples -translation_of: Web/API/Web_Workers_API/Using_web_workers -translation_of_original: Web/API/Web_Workers_API/Advanced_concepts_and_examples ---- -<div class="summary"> -<p>Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.</p> -</div> - -<h2 id="Passage_de_données_copie_et_non_partage">Passage de données : copie, et non partage</h2> - -<p>Les données passées entre la page principale et les workers sont <strong>copiées</strong>, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker <strong>ne partagent pas la même instance</strong>, ainsi au final <strong>une copie</strong> est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">clonage structuré</a>.</p> - -<p>Avant de poursuivre, créons à des fins didactiques une fonction nommée <code>emulateMessage()</code>, avec pour objectif de simuler le comportement d'une valeur qui est <em>clonée et non partagée</em> durant le passage du <code>worker</code> à la page principale ou inversement :</p> - -<pre class="brush: js">function emulateMessage (vVal) { - return eval("(" + JSON.stringify(vVal) + ")"); -} - -// Tests - -// test #1 -var example1 = new Number(3); -alert(typeof example1); // objet -alert(typeof emulateMessage(example1)); // nombre - -// test #2 -var example2 = true; -alert(typeof example2); // booléen -alert(typeof emulateMessage(example2)); // booléen - -// test #3 -var example3 = new String("Hello World"); -alert(typeof example3); // objet -alert(typeof emulateMessage(example3)); // chaîne de caractères - -// test #4 -var example4 = { - "name": "John Smith", - "age": 43 -}; -alert(typeof example4); // objet -alert(typeof emulateMessage(example4)); // objet - -// test #5 -function Animal (sType, nAge) { - this.type = sType; - this.age = nAge; -} -var example5 = new Animal("Cat", 3); -alert(example5.constructor); // Animal -alert(emulateMessage(example5).constructor); // Objet</pre> - -<p>Une valeur qui est clonée et non partagée est appelée <em>message</em>. Comme vous le savez probablement dès à présent, les <em>messages</em> peuvent être envoyés à et à partir du thread principal en utilisant <code>postMessage()</code>, et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement <code>message</code> contient les données retournées par le worker.</p> - -<p><strong>example.html </strong>(la page principale) :</p> - -<pre class="brush: js">var myWorker = new Worker("my_task.js"); - -myWorker.onmessage = function (oEvent) { - console.log("Worker said : " + oEvent.data); -}; - -myWorker.postMessage("ali");</pre> - -<p><strong>my_task.js</strong> (leworker) :</p> - -<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\')."); - -onmessage = function (oEvent) { - postMessage("Hi " + oEvent.data); -};</pre> - -<p>L'algorithme de <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" style="line-height: 1.572;" title="The structured clone algorithm">clonage structurée</a> peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.</p> - -<h3 id="Exemples_de_passages_de_données">Exemples de passages de données</h3> - -<h4 id="Exemple_1_Créer_un_eval()_asynchrone_générique">Exemple #1 : Créer un "<code>eval() </code>asynchrone" générique</h4> - -<p>L'exemple suivant montre comment utiliser un worker afin d'exécuter <strong>de manière asynchrone</strong> n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval" title="/en-US/docs/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> appelée dans le worker :</p> - -<pre class="brush: js">// Syntaxe : asyncEval(code[, listener]) - -var asyncEval = (function () { - - var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D"); - - oParser.onmessage = function (oEvent) { - if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); } - delete aListeners[oEvent.data.id]; - }; - - - return function (sCode, fListener) { - aListeners.push(fListener || null); - oParser.postMessage({ - "id": aListeners.length - 1, - "code": sCode - }); - }; - -})();</pre> - -<p>La data URI est équivalente à une requête réseau, avec la réponse suivante :</p> - -<pre>onmessage = function (oEvent) { - postMessage({ - "id": oEvent.data.id, - "evaluated": eval(oEvent.data.code) - }); -}</pre> - -<p>Exemples d'utilisation :</p> - -<pre class="brush: js">// message d'alerte asynchrone... -asyncEval("3 + 2", function (sMessage) { - alert("3 + 2 = " + sMessage); -}); - -// affichage asynchrone d'un message... -asyncEval("\"Hello World!!!\"", function (sHTML) { - document.body.appendChild(document.createTextNode(sHTML)); -}); - -// néant asynchrone... -asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre> - -<h4 id="Exemple_2_passage_avancé_de_données_JSON_et_création_d'un_système_d'échange">Exemple #2 : passage avancé de données JSON et création d'un système d'échange</h4> - -<p>Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.</p> - -<p><strong>example.html</strong> (la page principale) :</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta charset="UTF-8" /> -<title>MDN Example - Queryable worker</title> -<script type="text/javascript"> - /* - QueryableWorker instances methods: - * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function - * postMessage(string or JSON Data): see Worker.prototype.postMessage() - * terminate(): terminates the Worker - * addListener(name, function): adds a listener - * removeListener(name): removes a listener - QueryableWorker instances properties: - * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly - */ - function QueryableWorker (sURL, fDefListener, fOnError) { - var oInstance = this, oWorker = new Worker(sURL), oListeners = {}; - this.defaultListener = fDefListener || function () {}; - oWorker.onmessage = function (oEvent) { - if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) { - oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh); - } else { - this.defaultListener.call(oInstance, oEvent.data); - } - }; - if (fOnError) { oWorker.onerror = fOnError; } - this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) { - if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; } - oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) }); - }; - this.postMessage = function (vMsg) { - //Je ne pense pas qu'il y ait besoin d'appeler la méthode call() - //que diriez-vous tout simplement de oWorker.postMessage(vMsg); - //le même cas se pose avec terminate - //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes - Worker.prototype.postMessage.call(oWorker, vMsg); - }; - this.terminate = function () { - Worker.prototype.terminate.call(oWorker); - }; - this.addListener = function (sName, fListener) { - oListeners[sName] = fListener; - }; - this.removeListener = function (sName) { - delete oListeners[sName]; - }; - }; - - // votre worker "queryable" personnalisé - var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */); - - // vos "écouteurs" personnalisés - - oMyTask.addListener("printSomething", function (nResult) { - document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!")); - }); - - oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) { - alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)"); - }); -</script> -</head> -<body> - <ul> - <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li> - <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li> - <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li> - </ul> -</body> -</html></pre> - -<p><strong>my_task.js</strong> (le worker) :</p> - -<pre class="brush: js">// vos fonctions PRIVEES personnalisées - -function myPrivateFunc1 () { - // instructions à exécuter -} - -function myPrivateFunc2 () { - // instructions à exécuter -} - -// etc. etc. - -// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale) - -var queryableFunctions = { - // exemple #1 : obtenir la différence entre deux nombres : - getDifference: function (nMinuend, nSubtrahend) { - reply("printSomething", nMinuend - nSubtrahend); - }, - // exemple #2 : attendre trois secondes - waitSomething: function () { - setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000); - } -}; - -// fonctions système - -function defaultQuery (vMsg) { - // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement - // instructions à exécuter -} - -function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) { - if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; } - postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) }); -} - -onmessage = function (oEvent) { - if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) { - queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1); - } else { - defaultQuery(oEvent.data); - } -};</pre> - -<p>Il est possible d'échanger le contenu de chaque message page principale -> worker et worker -> page principale.</p> - -<h3 id="Passage_de_données_par_transfert_de_propriété_(objets_transférables)">Passage de données par transfert de propriété (objets transférables)</h3> - -<p>Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets <span class="external">transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}</span>) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.</p> - -<pre class="brush: js">// Crée un "fichier" de 32MB et le remplit. -var uInt8Array = new Uint8Array(1024*1024*32); // 32MB -for (var i = 0; i < uInt8Array.length; ++i) { - uInt8Array[i] = i; -} - -worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); -</pre> - -<div class="note"> -<p><strong>Remarque </strong>: pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> sur HTML5 Rocks.</p> -</div> - -<h2 id="Workers_embarqués">Workers embarqués</h2> - -<p>Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut <code>src</code> et dont l'attribut <code>type</code> n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage. Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> -<meta charset="UTF-8" /> -<title>MDN Example - Embedded worker</title> -<script type="text/js-worker"> - // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker. - var myVar = "Hello World!"; - // Le reste du code de votre worker commence ici. -</script> -<script type="text/javascript"> - // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript. - function pageLog (sMsg) { - // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois. - var oFragm = document.createDocumentFragment(); - oFragm.appendChild(document.createTextNode(sMsg)); - oFragm.appendChild(document.createElement("br")); - document.querySelector("#logDisplay").appendChild(oFragm); - } -</script> -<script type="text/js-worker"> - // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker. - onmessage = function (oEvent) { - postMessage(myVar); - }; - // Le reste du code de votre worker commence ici. -</script> -<script type="text/javascript"> - // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript. - - // Dans le passé... : - // blob builder a existé - // ...mais nous utilisons désormais Blob...: - var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"}); - - // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker". - document.worker = new Worker(window.URL.createObjectURL(blob)); - - document.worker.onmessage = function (oEvent) { - pageLog("Received: " + oEvent.data); - }; - - // Démarrage du worker. - window.onload = function() { document.worker.postMessage(""); }; -</script> -</head> -<body><div id="logDisplay"></div></body> -</html></pre> - -<p>Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée <code>document.worker</code>.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.</p> - -<h3 id="Réaliser_des_calculs_en_arrière-plan">Réaliser des calculs en arrière-plan</h3> - -<p>Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.</p> - -<h4 id="Le_code_JavaScript">Le code JavaScript</h4> - -<p>Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.</p> - -<pre class="brush: js">var results = []; - -function resultReceiver(event) { - results.push(parseInt(event.data)); - if (results.length == 2) { - postMessage(results[0] + results[1]); - } -} - -function errorReceiver(event) { - throw event.data; -} - -onmessage = function(event) { - var n = parseInt(event.data); - - if (n == 0 || n == 1) { - postMessage(n); - return; - } - - for (var i = 1; i <= 2; i++) { - var worker = new Worker("fibonacci.js"); - worker.onmessage = resultReceiver; - worker.onerror = errorReceiver; - worker.postMessage(n - i); - } - };</pre> - -<p>Le worker affecte à la propriété <code>onmessage</code> une fonction qui recevra les messages envoyés lorsque la méthode <code>postMessage()</code> de l'objet worker est appelée (remarquez que cela diffère de définir une <em>variable</em> globale de ce nom, ou de définir une <em>fonction</em> avec ce nom. <code>var onmessage</code> <code>et function onmessage</code> définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.</p> - -<h4 id="Le_code_HTML">Le code HTML</h4> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Test threads fibonacci</title> - </head> - <body> - - <div id="result"></div> - - <script language="javascript"> - - var worker = new Worker("fibonacci.js"); - - worker.onmessage = function(event) { - document.getElementById("result").textContent = event.data; - dump("Got: " + event.data + "\n"); - }; - - worker.onerror = function(error) { - dump("Worker error: " + error.message + "\n"); - throw error; - }; - - worker.postMessage("5"); - - </script> - </body> -</html> -</pre> - -<p>La page web crée un élément <code>div</code> avec l'ID <code>result</code> , qui sera utilisé pour afficher le résultat, puis engendre le worker. Après création du worker, le gestionnaire <code>onmessage</code> est configuré pour afficher les résultats en renseignant le contenu de l'élément <code>div</code>, et le gestionnaire <code>onerror</code> est configuré pour <a class="external" href="/en/Debugging_JavaScript#dump()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en/Debugging_JavaScript#dump()">capturer</a> le message d'erreur.</p> - -<p>Finalement, un message est envoyé au worker pour le démarrer.</p> - -<p><a class="external" href="/samples/workers/fibonacci" title="https://developer.mozilla.org/samples/workers/fibonacci/">Tester cet exemple</a>.</p> - -<h3 id="Réaliser_des_ES_web_en_arrière-plan">Réaliser des E/S web en arrière-plan</h3> - -<p>Vous pouvez trouver un tel exemple dans l'article <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Using workers in extensions</a> .</p> - -<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs workers</h3> - -<p>Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a></li> - <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Utilisation des web workers</a></li> -</ul> diff --git a/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html index 379f86edd6..379f86edd6 100644 --- a/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html +++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html diff --git a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html index dfb8c20bf9..dfb8c20bf9 100644 --- a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html +++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html diff --git a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html b/files/fr/web/api/web_workers_api/using_web_workers/index.html index b1330f34bf..b1330f34bf 100644 --- a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html +++ b/files/fr/web/api/web_workers_api/using_web_workers/index.html diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html index 3995861e83..3995861e83 100644 --- a/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html +++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html diff --git a/files/fr/web/api/webgl_api/by_example/modèle_1/index.html b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html index a055a358c8..a055a358c8 100644 --- a/files/fr/web/api/webgl_api/by_example/modèle_1/index.html +++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html diff --git a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html index 086e0394a7..086e0394a7 100644 --- a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html +++ b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html index 7ca07c36e6..7ca07c36e6 100644 --- a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html +++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html index 1d8db41a20..1d8db41a20 100644 --- a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html +++ b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html diff --git a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html b/files/fr/web/api/webgl_api/by_example/color_masking/index.html index ad5e0dd461..ad5e0dd461 100644 --- a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html +++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.html diff --git a/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html index fec1fd88a0..fec1fd88a0 100644 --- a/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html +++ b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html diff --git a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html index 612dbad79c..612dbad79c 100644 --- a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html +++ b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html diff --git a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html index e9f9bcdf8c..e9f9bcdf8c 100644 --- a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html index 8eb25287ab..8eb25287ab 100644 --- a/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html +++ b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html index a38d174808..a38d174808 100644 --- a/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html +++ b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html diff --git a/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html index cd7d71f0c5..cd7d71f0c5 100644 --- a/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html +++ b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html diff --git a/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html b/files/fr/web/api/webgl_api/by_example/video_textures/index.html index ab1ea5a388..ab1ea5a388 100644 --- a/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html +++ b/files/fr/web/api/webgl_api/by_example/video_textures/index.html diff --git a/files/fr/web/api/webgl_api/données/index.html b/files/fr/web/api/webgl_api/data/index.html index f41b0e2f1d..f41b0e2f1d 100644 --- a/files/fr/web/api/webgl_api/données/index.html +++ b/files/fr/web/api/webgl_api/data/index.html diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index c7afe5f9ae..c7afe5f9ae 100644 --- a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html diff --git a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html index 534d6ef995..534d6ef995 100644 --- a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html diff --git a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html index 1c9efb8966..1c9efb8966 100644 --- a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html diff --git a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html index ccbff1a2d6..ccbff1a2d6 100644 --- a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html diff --git a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index 4388934aeb..4388934aeb 100644 --- a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html diff --git a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html index db767fe9bb..db767fe9bb 100644 --- a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html index 2bd786c015..2bd786c015 100644 --- a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html +++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html diff --git a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index 6e1d7bb67d..6e1d7bb67d 100644 --- a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html diff --git a/files/fr/web/api/webglrenderingcontext/canevas/index.html b/files/fr/web/api/webglrenderingcontext/canvas/index.html index 6b7965a1d7..6b7965a1d7 100644 --- a/files/fr/web/api/webglrenderingcontext/canevas/index.html +++ b/files/fr/web/api/webglrenderingcontext/canvas/index.html diff --git a/files/fr/web/api/webglrenderingcontext/activer/index.html b/files/fr/web/api/webglrenderingcontext/enable/index.html index 4d3b41d6c0..4d3b41d6c0 100644 --- a/files/fr/web/api/webglrenderingcontext/activer/index.html +++ b/files/fr/web/api/webglrenderingcontext/enable/index.html diff --git a/files/fr/web/guide/api/webrtc/webrtc_architecture/index.html b/files/fr/web/api/webrtc_api/connectivity/index.html index 8b512d7127..8b512d7127 100644 --- a/files/fr/web/guide/api/webrtc/webrtc_architecture/index.html +++ b/files/fr/web/api/webrtc_api/connectivity/index.html diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.html b/files/fr/web/api/webrtc_api/session_lifetime/index.html new file mode 100644 index 0000000000..0b14f417fb --- /dev/null +++ b/files/fr/web/api/webrtc_api/session_lifetime/index.html @@ -0,0 +1,21 @@ +--- +title: Introduction à WebRTC +slug: WebRTC/Introduction +translation_of: Web/API/WebRTC_API/Session_lifetime +--- +<div class="note"> + <p>WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p> +</div> +<h2 id="Etablir_la_connexion">Etablir la connexion</h2> +<p>La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.</p> +<h3 id="Signalisation">Signalisation</h3> +<p>La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'<a href="https://developers.google.com/appengine/docs/python/channel/overview" title="https://developers.google.com/appengine/docs/python/channel/overview">API Google Channel</a>) pour AppEngine.</p> +<h2 id="Transmission">Transmission</h2> +<h3 id="getUserMedia">getUserMedia</h3> +<p>Objet LocalMediaStream</p> +<h2 id="Reception">Reception</h2> +<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à <a title="about:config">about:config</a> et positionnez 'media.navigator.enabled' à 'true'.</p> +<div class="note"> + <p>Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Essayez aussi la <a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de service d'appel</a>, sa page source, et son <a href="https://github.com/anantn/webrtc-demo/">serveur source</a>.</p> +</div> +<p> </p> diff --git a/files/fr/web/guide/api/webrtc/webrtc_basics/index.html b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html index e550e4adbb..e550e4adbb 100644 --- a/files/fr/web/guide/api/webrtc/webrtc_basics/index.html +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.html b/files/fr/web/api/webrtc_api/taking_still_photos/index.html new file mode 100644 index 0000000000..854d0dd3f7 --- /dev/null +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.html @@ -0,0 +1,161 @@ +--- +title: Prendre des photos avec la webcam +slug: WebRTC/Prendre_des_photos_avec_la_webcam +tags: + - API + - Avancé + - WebRTC + - getusermedia +translation_of: Web/API/WebRTC_API/Taking_still_photos +--- +<h2 id="Introduction_et_demo">Introduction et demo</h2> +<p>Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir <a href="http://jsfiddle.net/codepo8/agaRe/4/" title="http://jsfiddle.net/codepo8/agaRe/4/">le code final en action dans JSFiddle</a>. Il y a aussi une version plus avancée pour charger des photos sur <strong>imgur</strong> en JavaScript, disponible en <a href="https://github.com/codepo8/interaction-cam/" title="https://github.com/codepo8/interaction-cam/">code source sur GitHub</a> ou <a href="http://codepo8.github.com/interaction-cam/" title="http://codepo8.github.com/interaction-cam/">en demo</a>.</p> +<h2 id="Les_balises_HTML">Les balises HTML</h2> +<p>La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.</p> +<pre class="brush:html;"><video id="video"></video> +<button id="startbutton">Prendre une photo</button> +<canvas id="canvas"></canvas> +<img src="http://placekitten.com/g/320/261" id="photo" alt="photo"> +</pre> +<h2 id="Le_script_complet">Le script complet</h2> +<p>Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.</p> +<pre class="brush:js;">(function() { + + var streaming = false, + video = document.querySelector('#video'), + cover = document.querySelector('#cover'), + canvas = document.querySelector('#canvas'), + photo = document.querySelector('#photo'), + startbutton = document.querySelector('#startbutton'), + width = 320, + height = 0; + + navigator.getMedia = ( navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia || + navigator.msGetUserMedia); + + navigator.getMedia( + { + video: true, + audio: false + }, + function(stream) { + if (navigator.mozGetUserMedia) { + video.mozSrcObject = stream; + } else { + var vendorURL = window.URL || window.webkitURL; + video.src = vendorURL.createObjectURL(stream); + } + video.play(); + }, + function(err) { + console.log("An error occured! " + err); + } + ); + + video.addEventListener('canplay', function(ev){ + if (!streaming) { + height = video.videoHeight / (video.videoWidth/width); + video.setAttribute('width', width); + video.setAttribute('height', height); + canvas.setAttribute('width', width); + canvas.setAttribute('height', height); + streaming = true; + } + }, false); + + function takepicture() { + canvas.width = width; + canvas.height = height; + canvas.getContext('2d').drawImage(video, 0, 0, width, height); + var data = canvas.toDataURL('image/png'); + photo.setAttribute('src', data); + } + + startbutton.addEventListener('click', function(ev){ + takepicture(); + ev.preventDefault(); + }, false); + +})();</pre> +<h2 id="Les_explications_pas_à_pas.">Les explications pas à pas.</h2> +<p>Voici ce qui se passe.</p> +<h3 id="Fonction_anonyme">Fonction anonyme</h3> +<pre class="brush:js;">(function() { + + var streaming = false, + video = document.querySelector('#video'), + cover = document.querySelector('#cover'), + canvas = document.querySelector('#canvas'), + photo = document.querySelector('#photo'), + startbutton = document.querySelector('#startbutton'), + width = 320, + height = 0;</pre> +<p>Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.</p> +<div class="warning"> + <p>À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.</p> +</div> +<h3 id="Obtenir_la_vidéo">Obtenir la vidéo</h3> +<p>Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:</p> +<pre class="brush:js;"> navigator.getMedia = ( navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia || + navigator.msGetUserMedia);</pre> +<p>Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:</p> +<pre class="brush:js;"> navigator.getMedia( + { + video: true, + audio: false + }, + function(stream) { + if (navigator.mozGetUserMedia) { + video.mozSrcObject = stream; + } else { + var vendorURL = window.URL || window.webkitURL; + video.src = vendorURL.createObjectURL(stream); + } + video.play(); + }, + function(err) { + console.log("An error occured! " + err); + } + );</pre> +<p>Firefox Nightly nécessite de définir la propriété <code>mozSrcObject</code> de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut <code>src</code>. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.</p> +<h3 id="Redimensionner_la_vidéo">Redimensionner la vidéo</h3> +<p>Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.</p> +<pre class="brush:js;"> video.addEventListener('canplay', function(ev){ + if (!streaming) { + height = video.videoHeight / (video.videoWidth/width); + video.setAttribute('width', width); + video.setAttribute('height', height); + canvas.setAttribute('width', width); + canvas.setAttribute('height', height); + streaming = true; + } + }, false);</pre> +<p>Nous nous abonnons à l'évènement <code>canplay</code> de la vidéo et lisons ses dimensions en utilisant <code>videoHeight</code> et <code>videoWidth</code>. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons <code>streaming</code> à true pour faire cette vérification une seule fois vu que l'évènement <code>canplay</code> se déclenchera à répétition.</p> +<p>C'est tout ce qu'il faut pour jouer la vidéo.</p> +<h3 id="Prendre_une_photo">Prendre une photo</h3> +<p>Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction <code>takepicture</code> function.</p> +<pre class="brush:js;"> startbutton.addEventListener('click', function(ev){ + takepicture(); + ev.preventDefault(); + }, false);</pre> +<p>Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.</p> +<pre class="brush:js;"> function takepicture() { + canvas.width = width; + canvas.height = height; + canvas.getContext('2d').drawImage(video, 0, 0, width, height); + var data = canvas.toDataURL('image/png'); + photo.setAttribute('src', data); + } + +})();</pre> +<p>C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.</p> +<h2 id="Support">Support</h2> +<p>Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:</p> +<ul> + <li>Entrez "about:config" dans la barre d'adresse et confirmez les changements</li> + <li>Trouver l'entrée "media.navigator.enabled" et positionnez la à true</li> +</ul> diff --git a/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html index 36b68601ff..36b68601ff 100644 --- a/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html +++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html diff --git a/files/fr/web/events/afterprint/index.html b/files/fr/web/api/window/afterprint_event/index.html index bb62ef775d..bb62ef775d 100644 --- a/files/fr/web/events/afterprint/index.html +++ b/files/fr/web/api/window/afterprint_event/index.html diff --git a/files/fr/web/events/beforeprint/index.html b/files/fr/web/api/window/beforeprint_event/index.html index 970bfb6580..970bfb6580 100644 --- a/files/fr/web/events/beforeprint/index.html +++ b/files/fr/web/api/window/beforeprint_event/index.html diff --git a/files/fr/web/events/beforeunload/index.html b/files/fr/web/api/window/beforeunload_event/index.html index c0b22cfb83..c0b22cfb83 100644 --- a/files/fr/web/events/beforeunload/index.html +++ b/files/fr/web/api/window/beforeunload_event/index.html diff --git a/files/fr/web/api/window/devicemotion_event/index.html b/files/fr/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..8d58d934f4 --- /dev/null +++ b/files/fr/web/api/window/devicemotion_event/index.html @@ -0,0 +1,97 @@ +--- +title: devicemotion +slug: FUEL/Window/devicemotion_event +translation_of: Web/API/Window/devicemotion_event +--- +<p>L'événement devicemotion est déclenché à intervalles réguliers et indique la quantité de force physique d'accélération que le périphérique reçoit à ce moment. Il fournit également des informations sur le taux de rotation, si disponible.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">DeviceMotionEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/API/EventTarget" title="EventTarget est une interface implémentée par des objets qui peuvent recevoir des évènements et avoir des auditeurs."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/API/DOMString" title="Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, DOMString est directement associé à String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>acceleration</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/API/DeviceAcceleration" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DeviceAcceleration</code></a></td> + <td>The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.</td> + </tr> + <tr> + <td><code>accelerationIncludingGravity </code><span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/API/DeviceAcceleration" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DeviceAcceleration</code></a></td> + <td>The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.</td> + </tr> + <tr> + <td><code>interval</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td>double</td> + <td>The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.</td> + </tr> + <tr> + <td><code>rotationRate</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/API/DeviceRotationRate" title="Un objet DeviceRotationRate fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes."><code>DeviceRotationRate</code></a></td> + <td>The rates of rotation of the device about all three axes.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">function handleMotionEvent(event) { + + var x = event.accelerationIncludingGravity.x; + var y = event.accelerationIncludingGravity.y; + var z = event.accelerationIncludingGravity.z; + + // Faire quelque chose de génial. +} + +window.addEventListener("devicemotion", handleMotionEvent, true); +</pre> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li><a href="/fr/docs/Mozilla_event_reference/deviceorientation"><code>deviceorientation</code></a></li> +</ul> diff --git a/files/fr/web/api/window/deviceorientation_event/index.html b/files/fr/web/api/window/deviceorientation_event/index.html new file mode 100644 index 0000000000..2bae31987e --- /dev/null +++ b/files/fr/web/api/window/deviceorientation_event/index.html @@ -0,0 +1,176 @@ +--- +title: deviceorientation +slug: FUEL/Window/deviceorientation +translation_of: Web/API/Window/deviceorientation_event +--- +<p>L'événement <strong><code>deviceorientation</code></strong> est déclenché lorsque de nouvelles données sont disponibles à partir d'un capteur d'orientation à propos de l'orientation actuelle du dispositif par rapport à la trame de coordonnées terrestres. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir <a href="/fr/docs/DOM/Orientation_and_motion_data_explained">explications sur les données de mouvements et d'orientations</a> pour plus de détails.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/orientation-event/#deviceorientation">DeviceOrientation Event</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">DeviceOrientationEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/API/EventTarget" title="EventTarget est une interface implémentée par des objets qui peuvent recevoir des évènements et avoir des auditeurs."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/API/DOMString" title="Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, DOMString est directement associé à String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>alpha</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td>double (float)</td> + <td>The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.</td> + </tr> + <tr> + <td><code>beta</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td>double (float)</td> + <td>The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.</td> + </tr> + <tr> + <td><code>gamma</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td>double (float)</td> + <td>The current orientation of the device around the Y axis; that is, how far the device is turned left or right.</td> + </tr> + <tr> + <td><code>absolute</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>boolean</code></a></td> + <td>This value is <code>true</code> if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is <code>false</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="pass: js">if (window.DeviceOrientationEvent) { + window.addEventListener("deviceorientation", function(event) { + // alpha: rotation around z-axis + var rotateDegrees = event.alpha; + // gamma: left to right + var leftToRight = event.gamma; + // beta: front back motion + var frontToBack = event.beta; + + handleOrientationEvent(frontToBack, leftToRight, rotateDegrees); + }, true); +} + +var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) { + // Faire quelque chose d'étonnant +}; +</pre> + +<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> + +<p></p><div class="blockIndicator warning"><strong><a href="https://github.com/mdn/browser-compat-data">Nous convertissons les données de compatibilité dans un format JSON</a></strong>. + Ce tableau de compatibilité utilise encore l'ancien format + car nous n'avons pas encore converti les données qu'il contient. + <strong><a href="/fr/docs/MDN/Contribute/Structures/Compatibility_tables">Vous pouvez nous aider en contribuant !</a></strong></div> + +<div class="htab"> + <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a> + <ul> + <li class="selected"><a>Ordinateur</a></li> + <li><a>Mobile</a></li> + </ul> +</div><p></p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>7.0</td> + <td>3.6<sup>[1]</sup></td> + <td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td> + <td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td> + <td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>3.0</td> + <td>3.6<sup>[1]</sup></td> + <td><span style="color: #f00;">Pas de support</span></td> + <td>12</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox 3.6, 4, et 5 a supporté <a href="/frdocs/Web/Events/MozOrientation">mozOrientation</a> contre l'événement standard <strong><code>DeviceOrientation</code></strong>.</p> + +<h2 id="Evénements_lilés">Evénements lilés</h2> + +<ul> + <li><a href="/fr/docs/Web/Events/devicemotion"><code>devicemotion</code></a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/DeviceMotionEvent" title="The DeviceMotionEvent provides web developers with information about the speed of changes for the device's position and orientation."><code>DeviceMotionEvent</code></a></li> + <li><a href="/fr/docs/Web/API/Window/ondeviceorientation" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>window.ondeviceorientation</code></a></li> + <li><a href="/fr/docs/Web/API/Detecting_device_orientation">Détection de l'orientation du dispositif</a></li> + <li><a href="/fr/docs/DOM/Orientation_and_motion_data_explained">Explications sur les données de mouvements et d'orientations</a></li> + <li>Simulation d'événements d'orientation sur navigateur de bureau avec <a href="http://louisremi.github.com/orientation-devtool/">orientation-devtool</a></li> +</ul> diff --git a/files/fr/web/events/domcontentloaded/index.html b/files/fr/web/api/window/domcontentloaded_event/index.html index ce6a198e3e..ce6a198e3e 100644 --- a/files/fr/web/events/domcontentloaded/index.html +++ b/files/fr/web/api/window/domcontentloaded_event/index.html diff --git a/files/fr/web/events/load/index.html b/files/fr/web/api/window/load_event/index.html index 53672aa244..53672aa244 100644 --- a/files/fr/web/events/load/index.html +++ b/files/fr/web/api/window/load_event/index.html diff --git a/files/fr/web/api/window/onresize/index.html b/files/fr/web/api/window/onresize/index.html deleted file mode 100644 index d2c0d6304f..0000000000 --- a/files/fr/web/api/window/onresize/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: window.onresize -slug: Web/API/Window/onresize -tags: - - API - - DOM - - Gestionnaires d'évènements - - Propriété - - évènements -translation_of: Web/API/GlobalEventHandlers/onresize ---- -<p>{{ ApiRef() }}</p> - -<p>La propriété <code><strong>GlobalEventHandlers.onresize</strong></code> contient un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements)</em> qui survient quand un évènement {{event("resize")}} est reçu.</p> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> - -<pre class="eval">window.onresize = <em>funcRef</em>; -</pre> - -<h3 id="Parameters" name="Parameters">Paramètres</h3> - -<ul> - <li><code>funcRef</code> est une référence à une fonction.</li> -</ul> - -<h2 id="Example" name="Example">Exemple</h2> - -<pre>window.onresize = doFunc; -</pre> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>onresize test<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Resize the browser window to fire the resize event.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Window height: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>height<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Window width: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> heightOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#height'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> widthOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#width'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">function</span> <span class="function token">resize</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - heightOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerHeight<span class="punctuation token">;</span> - widthOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerWidth<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - window<span class="punctuation token">.</span>onresize <span class="operator token">=</span> resize<span class="punctuation token">;</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p>L’événement <code>resize</code> est déclenché après le redimensionnement de la fenêtre.</p> - -<h2 id="Specification" name="Specification">Spécification</h2> - -<table class="spectable standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> diff --git a/files/fr/web/events/pagehide/index.html b/files/fr/web/api/window/pagehide_event/index.html index 8971ae1044..8971ae1044 100644 --- a/files/fr/web/events/pagehide/index.html +++ b/files/fr/web/api/window/pagehide_event/index.html diff --git a/files/fr/web/events/pageshow/index.html b/files/fr/web/api/window/pageshow_event/index.html index ba9e55f03e..ba9e55f03e 100644 --- a/files/fr/web/events/pageshow/index.html +++ b/files/fr/web/api/window/pageshow_event/index.html diff --git a/files/fr/web/events/unload/index.html b/files/fr/web/api/window/unload_event/index.html index 676b6187e3..676b6187e3 100644 --- a/files/fr/web/events/unload/index.html +++ b/files/fr/web/api/window/unload_event/index.html diff --git a/files/fr/web/api/window/url/index.html b/files/fr/web/api/window/url/index.html deleted file mode 100644 index 223701977c..0000000000 --- a/files/fr/web/api/window/url/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Window.URL -slug: Web/API/Window/URL -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p>La propriété <strong><code>Window.URL</code></strong> retourne un objet qui fournit les méthodes statiques utilisées pour créer et gérer les objets URLs. On peut aussi l'appeler comme uns constructeur pour instancier des objets {{domxref("URL")}}.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Syntax">Syntax</h2> - -<p>Utilisation de la méthode statique:</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>Utilisation d'un objet instancié:</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard <code>nsIDOMMozURLProperty</code> internal type. In practice, this didn't make any difference.</p> - -<p>[2] Implemented under the non-standard name <code>webkitURL</code>.</p> diff --git a/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html b/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html deleted file mode 100644 index ae762bf333..0000000000 --- a/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Décoder et encoder en base64 -slug: Web/API/WindowBase64/Décoder_encoder_en_base64 -tags: - - Advanced - - Base64 - - JavaScript - - Reference - - Typed Arrays - - URI - - URL - - Unicode Problem - - atob() - - btoa() -translation_of: Glossary/Base64 ---- -<p><strong>Base64</strong> est un groupe de schéma pour encoder des données binaires sous forme d'un texte au format ASCII grâce à la représentation de ces données en base 64. Le terme base64 vient à l'origine de l'encodage utilisé pour transférer certains <a href="https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions#Content-Transfer-Encoding">contenus MIME</a>.</p> - -<p>Les schémas d'encodage en base64 sont principalement utilisés lorsqu'il s'agit d'enregistrer ou d'envoyer des données binaires via un media qui a été conçu pour gérer du texte. Cette transformation permet de conserver l'intégrité et la véracité des données envoyées lors du transport. Base64 est utilisé par plusieurs applications, notamment celles qui gèrent les courriels avec <a href="https://fr.wikipedia.org/wiki/MIME">MIME</a>, et le stockage de données complexes en <a href="/fr/docs/XML">XML</a>.</p> - -<p>Pour JavaScript, il existe deux fonctions utilisées pour encoder et décoder des chaînes en base64 :</p> - -<ul> - <li>{{domxref("window.atob","atob()")}}</li> - <li>{{domxref("window.btoa","btoa()")}}</li> -</ul> - -<p>La fonction <code>atob()</code> permet de décoder des données encodées en une chaîne de caractères en base 64. La fonction <code>btoa()</code>, quant à elle, permet de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</p> - -<p>Les deux méthodes, <code>atob()</code> et <code>btoa()</code>, fonctionnent sur des chaînes de caractères. Si vous voulez utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffers</code></a>, lisez <a href="#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8">ce paragraphe</a>.</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> - - <dl> - <dt><a href="/fr/docs/Web/HTTP/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs">URIs de données</a></dt> - <dd><small>Les URIs de données, définies par la <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents.</small></dd> - <dt><a href="https://fr.wikipedia.org/wiki/Base_64" title="https://fr.wikipedia.org/wiki/Base_64">Base64</a></dt> - <dd><small>Article Wikipédia sur l'encodage en base64.</small></dd> - <dt>{{domxref("window.atob","atob()")}}</dt> - <dd><small>Méthode permettant de décoder une chaîne de donnée qui a été encodée en base64.</small></dd> - <dt>{{domxref("window.btoa","btoa()")}}</dt> - <dd><small>Méthode permettant de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</small></dd> - <dt><a href="#The_.22Unicode_Problem.22">Le « problème Unicode »</a></dt> - <dd><small>Pour la plupart des navigateurs, l'utilisation de <code>btoa()</code> sur une chaîne de caractères Unicode entraînera une exception <code>Character Out Of Range</code>. Ce paragraphe indique quelques solutions.</small></dd> - <dt><a href="/fr/docs/URIScheme" title="/fr/docs/URIScheme">URIScheme</a></dt> - <dd><small>Une liste de schémas URI supportés par Mozilla</small>.</dd> - <dt><a href="/fr/Add-ons/Code_snippets/StringView" title="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a></dt> - <dd>Dans cet article, nous publions une bibliothèque dont les buts sont : - <ul> - <li>de créer une interface pour les chaînes de caractères à la façon du langage <a class="external" href="https://fr.wikipedia.org/wiki/C_%28langage%29" title="https://fr.wikipedia.org/wiki/C_%28langage%29">C</a> (i.e. un tableau de code de caractères —<a href="/fr/docs/Web/API/ArrayBufferView" title="/fr/docs/Web/API/ArrayBufferView"> <code>ArrayBufferView</code></a> en JavaScript) basée sur l'interface JavaScript <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffer</code></a>,</li> - <li>de créer un ensemble de méthodes pour ces objets qui fonctionnent <strong>sur des tableaux de nombres</strong> plutôt que sur chaînes de caractères JavaScript immuables,</li> - <li>de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les <a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</li> - </ul> - </dd> - </dl> - - <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p> - </td> - <td> - <h2 class="Tools" id="Tools" name="Tools">Outils</h2> - - <ul> - <li><a href="#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">Réécrire <code>atob()</code>et <code>btoa()</code> en utilisant des <code>TypedArray</code>s et l'UTF-8</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés.</a></li> - </ul> - - <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets connexes</h2> - - <ul> - <li><a href="/fr/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li> - <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li> - <li><a href="/fr/docs/Web/API/Uint8Array"><code>Uint8Array</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></li> - <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></li> - <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="Le_«_problème_Unicode_»">Le « problème Unicode »</h2> - -<p>Les objets <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> sont des chaînes de caractères encodées sur 16 bits. Pour la plupart des navigateurs, lorsqu'on appelle <code>window.btoa</code> sur une chaîne Unicode, cela entraîne une exception <code>Character Out Of Range</code> si la représentation du caractère dépasse les 8 bits ASCII. Deux méthodes existent pour résoudre le problème :</p> - -<ul> - <li>échapper la chaîne dans son intégralité puis l'encoder,</li> - <li>convertir la chaîne UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> en un tableau UTF-8 de caractères puis l'encoder.</li> -</ul> - -<p>Voici ces deux méthodes :</p> - -<h3 id="Première_solution_–_échapper_la_chaîne_avant_de_lencoder">Première solution – échapper la chaîne avant de l'encoder</h3> - -<pre class="brush:js notranslate">function utf8_to_b64( str ) { - return window.btoa(unescape(encodeURIComponent( str ))); -} - -function b64_to_utf8( str ) { - return decodeURIComponent(escape(window.atob( str ))); -} - -// Usage: -utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" -b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</pre> - -<p>Cette solution a été proposée dans un article de <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>.</p> - -<h3 id="Seconde_solution_–_réécrire_atob_et_btoa_en_utilisant_des_TypedArray_avec_de_lUTF-8">Seconde solution – réécrire <code>atob()</code> et <code>btoa()</code> en utilisant des <code>TypedArray</code> avec de l'UTF-8</h3> - -<div class="note"><strong>Note :</strong> Le code suivant peut également être utilisé pour obtenir un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a> depuis une chaîne en base 64 (et vice-versa, voir ci-après). <strong>Pour un article concernant une bibliothèque complète sur les tableaux typés, voir <a href="/fr/Add-ons/Code_snippets/StringView" title="/fr/Add-ons/Code_snippets/StringView">cet article</a></strong>.</div> - -<pre class="brush: js notranslate">"use strict"; - -/*\ -|*| -|*| utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8 -|*| -|*| https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64 -|*| -\*/ - -/* Décoder un tableau d'octets depuis une chaîne en base64 */ - -function b64ToUint6 (nChr) { - - return nChr > 64 && nChr < 91 ? - nChr - 65 - : nChr > 96 && nChr < 123 ? - nChr - 71 - : nChr > 47 && nChr < 58 ? - nChr + 4 - : nChr === 43 ? - 62 - : nChr === 47 ? - 63 - : - 0; - -} - -function base64DecToArr (sBase64, nBlocksSize) { - - var - sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, - nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen); - - for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; - if (nMod4 === 3 || nInLen - nInIdx === 1) { - for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { - taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; - } - nUint24 = 0; - - } - } - - return taBytes; -} - -/* encodage d'un tableau en une chaîne en base64 */ - -function uint6ToB64 (nUint6) { - - return nUint6 < 26 ? - nUint6 + 65 - : nUint6 < 52 ? - nUint6 + 71 - : nUint6 < 62 ? - nUint6 - 4 - : nUint6 === 62 ? - 43 - : nUint6 === 63 ? - 47 - : - 65; - -} - -function base64EncArr (aBytes) { - - var nMod3 = 2, sB64Enc = ""; - - for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } - nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); - nUint24 = 0; - } - } - - return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '=='); - -} - -/* Tableau UTF-8 en DOMString et vice versa */ - -function UTF8ArrToStr (aBytes) { - - var sView = ""; - - for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) { - nPart = aBytes[nIdx]; - sView += String.fromCharCode( - nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */ - /* (nPart - 252 << 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */ - (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */ - (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */ - (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */ - (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */ - (nPart - 192 << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart - ); - } - - return sView; - -} - -function strToUTF8Arr (sDOMStr) { - - var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0; - - /* mapping... */ - - for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { - nChr = sDOMStr.charCodeAt(nMapIdx); - nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6; - } - - aBytes = new Uint8Array(nArrLen); - - /* transcription... */ - - for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) { - nChr = sDOMStr.charCodeAt(nChrIdx); - if (nChr < 128) { - /* one byte */ - aBytes[nIdx++] = nChr; - } else if (nChr < 0x800) { - /* two bytes */ - aBytes[nIdx++] = 192 + (nChr >>> 6); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x10000) { - /* three bytes */ - aBytes[nIdx++] = 224 + (nChr >>> 12); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x200000) { - /* four bytes */ - aBytes[nIdx++] = 240 + (nChr >>> 18); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x4000000) { - /* five bytes */ - aBytes[nIdx++] = 248 + (nChr >>> 24); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else /* if (nChr <= 0x7fffffff) */ { - /* six bytes */ - aBytes[nIdx++] = 252 + /* (nChr >>> 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824); - aBytes[nIdx++] = 128 + (nChr >>> 24 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } - } - - return aBytes; - -} -</pre> - -<h4 id="Tests">Tests</h4> - -<pre class="brush: js notranslate">/* Tests */ - -var entréeChaîne = "base64 \u2014 Mozilla Developer Network"; - -var entréeUTF8 = strToUTF8Arr(entréeChaîne); - -var base64 = base64EncArr(entréeUTF8); - -alert(base64); - -var sortieUT8 = base64DecToArr(base64); - -var sortieChaîne = UTF8ArrToStr(sortieUT8); - -alert(sortieChaîne);</pre> - -<h4 id="Annexe_Décoder_une_chaîne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">Annexe : Décoder une chaîne en base64 en un objet <a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></h4> - -<p>Ces fonctions permettent de créer des objets <a href="/fr/docs/Web/API/Uint8Array">uint8Arrays</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">arrayBuffers</a> à partir de chaînes en base64 :</p> - -<pre class="brush: js notranslate">var monTableau = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network" - -var monBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network" - -alert(monBuffer.byteLength);</pre> - -<div class="note"><strong>Note :</strong> La fonction <code>base64DecToArr(sBase64[, <em>nTailleBloc</em>])</code> renvoie un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>uint8Array</code></a> d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument <code>nTailleBloc</code>, qui représente le nombre d'octets dont la propriété <code>uint8Array.buffer.bytesLength</code> doit être un multiple (<code>1</code> ou pas de paramètre pour l'ASCII, <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">les chaînes binaires</a> ou les chaînes encodées UTF-8, <code>2</code> pour les chaînes UTF-16, <code>4</code> pour les chaînes UTF-32).</div> - -<p>Pour une bibliothèque plus complète, voir <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("window.atob","atob()")}}</li> - <li>{{domxref("window.btoa","btoa()")}}</li> - <li><a href="/fr/docs/Web/HTTP/data_URIs" title="/fr/docs/Web/HTTP/data_URIs">URIs de données </a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></li> - <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Tableaux typés</a></li> - <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li> - <li><a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes, basée sur les tableaux typés</a></li> - <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString">DOMString</a></li> - <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li> - <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup" title="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup"><code>nsIURIFixup()</code></a></li> - <li><a href="https://fr.wikipedia.org/wiki/Base64" title="https://fr.wikipedia.org/wiki/Base64">Article sur la base64 sur Wikipédia</a></li> -</ul> diff --git a/files/fr/web/api/windowbase64/atob/index.html b/files/fr/web/api/windoworworkerglobalscope/atob/index.html index b04c255040..b04c255040 100644 --- a/files/fr/web/api/windowbase64/atob/index.html +++ b/files/fr/web/api/windoworworkerglobalscope/atob/index.html diff --git a/files/fr/web/api/windowbase64/btoa/index.html b/files/fr/web/api/windoworworkerglobalscope/btoa/index.html index 7d993f35fa..7d993f35fa 100644 --- a/files/fr/web/api/windowbase64/btoa/index.html +++ b/files/fr/web/api/windoworworkerglobalscope/btoa/index.html diff --git a/files/fr/web/api/windowtimers/clearinterval/index.html b/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html index 8041342b1d..8041342b1d 100644 --- a/files/fr/web/api/windowtimers/clearinterval/index.html +++ b/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html diff --git a/files/fr/web/events/abort_(progressevent)/index.html b/files/fr/web/api/xmlhttprequest/abort_event/index.html index 0585331ebe..0585331ebe 100644 --- a/files/fr/web/events/abort_(progressevent)/index.html +++ b/files/fr/web/api/xmlhttprequest/abort_event/index.html diff --git a/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html index fc3bb319ee..fc3bb319ee 100644 --- a/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html diff --git a/files/fr/web/api/xmlserializer/index.html b/files/fr/web/api/xmlserializer/index.html new file mode 100644 index 0000000000..feb76df6e0 --- /dev/null +++ b/files/fr/web/api/xmlserializer/index.html @@ -0,0 +1,54 @@ +--- +title: XMLSerializer +slug: XMLSerializer +tags: + - XML +translation_of: Web/API/XMLSerializer +--- +<p> </p> +<p><code>XMLSerializer</code> sert à convertir des sous-arborescence DOM ou des documents DOM en texte. <code>XMLSerializer</code> est accessible aux scripts sans privilèges.</p> +<div class="note"> + <p><code>XMLSerializer</code> sert le plus souvent aux applications et extensions basées sur la plateforme Mozilla. Bien qu'il soit utilisable par les pages Web, il ne fait partie d'aucun standard et son niveau de support dans les autres navigateurs est inconnu.</p> +</div> +<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3> +<dl> + <dt> + serializeToString</dt> + <dd> + Retourne la sous-arborescence sérialisée sous la forme d'une chaîne de caractères</dd> + <dt> + serializeToStream</dt> + <dd> + La sous-arborescence débutant par l'élément spécifié est sérialisée en un flux d'octets en utilisant l'encodage de caractères indiqué.</dd> +</dl> +<h3 id="Exemple" name="Exemple">Exemple</h3> +<pre class="eval"> var s = new XMLSerializer(); + var d = document; + var str = s.serializeToString(d); + alert(str); +</pre> +<pre class="eval"> var s = new XMLSerializer(); + var stream = { + close : function() + { + alert("Flux fermé"); + }, + flush : function() + { + }, + write : function(string, count) + { + alert("'" + string + "'\n nb d'octets : " + count + ""); + } + }; + s.serializeToStream(document, stream, "UTF-8"); +</pre> +<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3> +<ul> + <li><a class="external" href="http://www.xulplanet.com/references/objref/XMLSerializer.html">Reference (en)</a> (XULPlanet)</li> + <li><a href="fr/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a class="external" href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and serializing XML (en)</a> (XULPlanet)</li> + <li><a class="external" href="http://kb.mozillazine.org/Parsing_and_serializing_XML#Parsing_strings_into_DOM_trees">Parsing and serializing XML (en)</a> (MozillaZine)</li> + <li><a href="fr/XMLHttpRequest">XMLHttpRequest</a></li> + <li><a href="fr/DOMParser">DOMParser</a></li> +</ul> diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.html b/files/fr/web/api/xsltprocessor/basic_example/index.html new file mode 100644 index 0000000000..8d78422777 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/basic_example/index.html @@ -0,0 +1,65 @@ +--- +title: Exemple basique +slug: XSLT_dans_Gecko/Exemple_basique +translation_of: Web/API/XSLTProcessor/Basic_Example +--- +<p></p><ol> +<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> +</ol><p></p> + +<h2 id="Exemple_basique" name="Exemple_basique">Exemple basique</h2> + +<p>Ce premier exemple présente les bases de l'utilisation d'une transformation XSLT dans un navigateur. L'exemple utilise un document XML qui contient des informations (titre, liste d'auteurs et corps de texte) à propos d'un article pour en tirer une version lisible par un humain.</p> + +<p>La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xml) contient les informations à propos de l'article. En utilisant l'instruction de traitement <code>?xml-stylesheet?</code>, il est lié à la feuille de style XSLT (exemple.xsl) via son attribut <code>href</code>.</p> + +<p>Une feuille de style XSLT débute par l'élément <code>xsl:stylesheet</code>, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds <code>Author</code>. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via <code>apply-templates</code>) correspondant aux nœuds <code>Author</code> qui sont les descendants du nœud <code>Authors</code>.</p> + +<p>Figure 1 : exemple XSLT simple</p> + +<p>Document XML (exemple.xml) :</p> + +<pre> <?xml version="1.0"?> + <?xml-stylesheet type="text/xsl" href="exemple.xsl"?> + <Article> + <Title>Mon article</Title> + <Authors> + <Author>M. Foo</Author> + <Author>M. Bar</Author> + </Authors> + <Body>Ceci est le texte de mon article.</Body> + </Article> +</pre> + +<p>Feuille de style XSL (exemple.xsl) :</p> + +<pre> <?xml version="1.0"?> + <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> + + <xsl:output method="text"/> + + <xsl:template match="/"> + Article - <xsl:value-of select="/Article/Title"/> + Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/> + </xsl:template> + + <xsl:template match="Author"> + - <xsl:value-of select="." /> + </xsl:template> + + </xsl:stylesheet> +</pre> + +<p>Sortie dans le navigateur :</p> + +<pre> Article - Mon article + Auteurs : + - M. Foo + - M. Bar +</pre> + +<p>{{PreviousNext("XSLT dans Gecko", "XSLT dans Gecko:Génération de HTML")}}</p> diff --git a/files/fr/web/api/xsltprocessor/browser_differences/index.html b/files/fr/web/api/xsltprocessor/browser_differences/index.html new file mode 100644 index 0000000000..5b5a0c99c3 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/browser_differences/index.html @@ -0,0 +1,22 @@ +--- +title: Différences entre les navigateurs +slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs +translation_of: Web/API/XSLTProcessor/Browser_Differences +--- +<p></p><ol> +<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> +</ol><p></p> + +<h2 id="Diff.C3.A9rences_entre_les_navigateurs" name="Diff.C3.A9rences_entre_les_navigateurs">Différences entre les navigateurs</h2> + +<ul> + <li>Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0 (en)</a> du W3C.</li> + <li>IE 5.0 et 5.5 (Windows) ne supportent que le brouillon de travail de XSLT, et ne sont donc pas compatibles avec les feuilles de style XSLT 1.0.</li> + <li>Netscape 6.x ne supporte que partiellement XSLT 1.0.</li> +</ul> + +<p>{{PreviousNext("XSLT dans Gecko:Génération de HTML", "XSLT dans Gecko:Ressources")}}</p> diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.html b/files/fr/web/api/xsltprocessor/generating_html/index.html new file mode 100644 index 0000000000..ca333bb2ac --- /dev/null +++ b/files/fr/web/api/xsltprocessor/generating_html/index.html @@ -0,0 +1,190 @@ +--- +title: Génération de HTML +slug: XSLT_dans_Gecko/Génération_de_HTML +translation_of: Web/API/XSLTProcessor/Generating_HTML +--- +<p></p><ol> +<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li> +<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> +</ol><p></p> + +<h2 id="G.C3.A9n.C3.A9ration_de_HTML" name="G.C3.A9n.C3.A9ration_de_HTML">Génération de HTML</h2> + +<p>Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.</p> + +<p>L'élément <code><body></code> de l'article contient maintenant des éléments HTML (des balises <code><strong></code> et <code><em></code>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud <code>xsl:output</code> de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, <code><a class="external" href="http://devedge.netscape.com/2002/de" rel="freelink">http://devedge.netscape.com/2002/de</a></code>, à qui nous donnons le préfixe myNS <code>(xmlns:myNS="<span class="nowiki">http://devedge.netscape.com/2002/de</span>")</code>.</p> + +<p><small><strong>Figure 2 : fichier XML (example2.xml)<span class="comment">voir l'exemple | voir le source</span></strong></small> <span class="comment">Document XML (example2.xml):</span> <span class="comment"><div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"></span></p> + +<pre class="eval"><?xml version="1.0"?> +<?xml-stylesheet type="text/xsl" href="example.xsl"?> + <myNS:Article xmlns:myNS="<a class="external" href="http://devedge.netscape.com/2002/de" rel="freelink">http://devedge.netscape.com/2002/de</a>"> + <myNS:Title>Mon article</myNS:Title> + <myNS:Authors> + <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author> + <myNS:Author>M. Bar</myNS:Author> + </myNS:Authors> + <myNS:Body> + En <em>Espagne</em>, les <strong>pluies</strong> se concentrent + principalement dans les plaines. + </myNS:Body> + </myNS:Article> +</pre> + +<p>La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à <code>HTML</code> à l'aide de l'élément <code>xsl:output</code>. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.</p> + +<p><small><strong>Figure 3 : feuille de style XSL avec 2 espaces de nommage</strong> (example2.xsl)</small> <span class="comment">feuille de style XSL (example2.xsl):</span></p> + +<pre> <?xml version="1.0"?> + <xsl:stylesheet version="1.0" + xmlns:xsl="http://www.w3.org/1999/XSL/Transform" + xmlns:myNS="http://devedge.netscape.com/2002/de"> + + <xsl:output method="html"/> + ... + </xsl:stylesheet> +</pre> + +<p>Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.</p> + +<p><small><strong>Figure 4 : Création du document HTML de base</strong></small> <span class="comment">feuille de style XSL (example2.xsl):</span></p> + +<pre> ... + <xsl:template match="/"> + <html> + + <head> + + <title> + <xsl:value-of select="/myNS:Article/myNS:Title"/> + </title> + + <style type="text/css"> + .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;} + </style> + + </head> + + <body> + <p class="myBox"> + <span class="title"> + <xsl:value-of select="/myNS:Article/myNS:Title"/> + </span> <br /> + + Auteurs : <br /> + <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> + </p> + + <p class="myBox"> + <xsl:apply-templates select="//myNS:Body"/> + </p> + + </body> + + </html> + </xsl:template> + ... +</pre> + +<p>Nous avons besoin de trois <code>xsl:template</code> supplémentaires pour parachever l'exemple. Le premier <code>xsl:template</code> est utilisé pour les nœuds <code>Author</code>, alors que le deuxième traite le nœud <code>body</code>. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.</p> + +<p><strong><small>Figure 5 : Les 3 modèles finaux</small></strong> <span class="comment">feuille de style XSL (example2.xsl):</span></p> + +<pre> ... + <xsl:template match="myNS:Author"> + -- <xsl:value-of select="." /> + + <xsl:if test="@company"> + :: <strong> <xsl:value-of select="@company" /> </strong> + </xsl:if> + + <br /> + </xsl:template> + + <xsl:template match="myNS:Body"> + <xsl:copy> + <xsl:apply-templates select="@*|node()"/> + </xsl:copy> + </xsl:template> + + <xsl:template match="@*|node()"> + <xsl:copy> + <xsl:apply-templates select="@*|node()"/> + </xsl:copy> + </xsl:template> + ... +</pre> + +<p>La feuille de style XSLT finale est donc :</p> + +<p><small><strong>Figure 6 : feuille de style XSLT finale <span class="comment">voir l'exemple | voir le source</span></strong></small> <span class="comment">feuille de style XSL :</span></p> + +<pre> <?xml version="1.0"?> + <xsl:stylesheet version="1.0" + xmlns:xsl="http://www.w3.org/1999/XSL/Transform" + xmlns:myNS="http://devedge.netscape.com/2002/de"> + + <xsl:output method="html" /> + + <xsl:template match="/"> + <html> + + <head> + + <title> + <xsl:value-of select="/myNS:Article/myNS:Title"/> + </title> + + <style type="text/css"> + .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;} + </style> + + </head> + + <body> + <p class="myBox"> + <span class="title"> + <xsl:value-of select="/myNS:Article/myNS:Title"/> + </span> <br /> + + Authors: <br /> + <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> + </p> + + <p class="myBox"> + <xsl:apply-templates select="//myNS:Body"/> + </p> + + </body> + + </html> + </xsl:template> + + <xsl:template match="myNS:Author"> + -- <xsl:value-of select="." /> + + <xsl:if test="@company"> + :: <b> <xsl:value-of select="@company" /> </b> + </xsl:if> + + <br /> + </xsl:template> + + <xsl:template match="myNS:Body"> + <xsl:copy> + <xsl:apply-templates select="@*|node()"/> + </xsl:copy> + </xsl:template> + + <xsl:template match="@*|node()"> + <xsl:copy> + <xsl:apply-templates select="@*|node()"/> + </xsl:copy> + </xsl:template> + </xsl:stylesheet> +</pre> + +<p>{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}}</p> diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html new file mode 100644 index 0000000000..16413c5d89 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html @@ -0,0 +1,60 @@ +--- +title: FAQ sur les transformations XSL dans Mozilla +slug: FAQ_sur_les_transformations_XSL_dans_Mozilla +tags: + - XSLT +translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ +--- +<p> +</p> +<h4 id="Pourquoi_ma_feuille_de_style_ne_s.27applique_pas_.3F" name="Pourquoi_ma_feuille_de_style_ne_s.27applique_pas_.3F"> Pourquoi ma feuille de style ne s'applique pas ? </h4> +<p>Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir <code>text/xml</code> ou <code>application/xml</code>. L'espace de nommage XSLT est <code><span class="nowiki">http://www.w3.org/1999/XSL/Transform</span></code>. Utilisez l'instruction de traitement <code><?xml-stylesheet ?></code> plutôt que l'élément non standard <code>xml:stylesheet</code>. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que <a class="external" href="http://livehttpheaders.mozdev.org/">LiveHTTPHeaders (en)</a> ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité. +</p> +<h4 id="Cela_fonctione_dans_IE.2C_mais_pas_dans_Mozilla_.3F" name="Cela_fonctione_dans_IE.2C_mais_pas_dans_Mozilla_.3F"> Cela fonctione dans IE, mais pas dans Mozilla ? </h4> +<p>Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation. +</p> +<h4 id="Puis-je_d.C3.A9sactiver_l.27.C3.A9chappement_de_la_sortie_avec_disable-output-escaping_.3F" name="Puis-je_d.C3.A9sactiver_l.27.C3.A9chappement_de_la_sortie_avec_disable-output-escaping_.3F"> Puis-je désactiver l'échappement de la sortie avec <code>disable-output-escaping</code> ? </h4> +<p>Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter <b>d-o-e</b> plutôt que de provoquer des crashes ou de ralentir le processus. +</p> +<h4 id="Que_dire_de_document.write_.3F" name="Que_dire_de_document.write_.3F"> Que dire de <code>document.write</code> ? </h4> +<p>Tout comme pour le XHTML, <code>document.write</code> n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit : +</p> +<pre> <xsl:if test="system-property('xsl:vendor')='Transformiix'"> + <!-- Balisage propre à Mozilla --> + </xsl:if> + <xsl:if test="system-property('xsl:vendor')='Microsoft'"> + <!-- Balisage propre à IE --> + </xsl:if> +</pre> +<p>Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : +</p> +<pre> <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt" + test="system-property('msxsl:version')=3"> + <!-- MSXML3 specific markup --> + </xsl:if> +</pre> +<h4 id="Que_dire_de_media.3D.22print.22.3F" name="Que_dire_de_media.3D.22print.22.3F"> Que dire de <code>media="print"</code>? </h4> +<p>Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un <code>media</code> particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de <code>media</code> dans <?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si <code>media</code> n'est pas spécifié, ou si le <code>media</code> spécifié comporte <code>screen</code>. +</p><p>Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient <code>media</code> comme les pages sans XSLT<b>.</b> +</p> +<h4 id="Comment_faire_transformNode.3F" name="Comment_faire_transformNode.3F"> Comment faire <code>transformNode</code>? </h4> +<p>Il existe <code>transformToDocument</code> et <code>transformToFragment</code> depuis Mozilla 1.2, voir <a href="fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL">Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL</a>. +</p> +<h4 id="Pourquoi_Internet_Explorer_requiert-il_un_espace_de_nommage_diff.C3.A9rent_de_celui_de_Mozilla_.3F" name="Pourquoi_Internet_Explorer_requiert-il_un_espace_de_nommage_diff.C3.A9rent_de_celui_de_Mozilla_.3F"> Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? </h4> +<p>Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support. +</p> +<h4 id="Comment_compiler_une_version_autonome_de_TransforMiiX_.3F" name="Comment_compiler_une_version_autonome_de_TransforMiiX_.3F"> Comment compiler une version autonome de TransforMiiX ? </h4> +<p>Voir l'article sur <a href="fr/Compilation_de_TransforMiiX">Compilation de TransforMiiX</a>. +</p> +<div class="originaldocinfo"> +<h2 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original"> Informations sur le document original </h2> +<ul><li> Auteur(s) : Axel Hecht +</li><li> Dernière mise à jour : 2 février 2005 +</li><li> Copyright : Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license +</li></ul> +</div> +<p><span class="comment">Interwiki Languages Links</span> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/XSL_Transformations_in_Mozilla_FAQ", "ja": "ja/XSL_Transformations_in_Mozilla_FAQ" } ) }} diff --git a/files/fr/web/css/-moz-box-ordinal-group/index.html b/files/fr/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 4215966858..0000000000 --- a/files/fr/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -<div>{{CSSRef}}</div> - -<div class="warning"> -<p><strong>Attention ! </strong>Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS" title="/en/CSS/Flexible_boxes">les boîtes flexibles</a>.</p> -</div> - -<p>La propriété <code><strong>-moz-box-ordinal-group</strong></code> indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.</p> - -<h2 id="Valeurs">Valeurs</h2> - -<p>Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#Flexbox { - display: -ms-box; - display: -moz-box; - display: -webkit-box; -} - -#text1 { - background: red; - -ms-box-ordinal-group: 4; - -moz-box-ordinal-group: 4; - -webkit-box-ordinal-group: 4; -} - -#text2 { - background: green; - -ms-box-ordinal-group: 3; - -moz-box-ordinal-group: 3; - -webkit-box-ordinal-group: 3; -} - -#text3 { - background: blue; - -ms-box-ordinal-group: 2; - -moz-box-ordinal-group: 2; - -webkit-box-ordinal-group: 2; -} - -#text4 { - background: orange; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="Flexbox"> - <div id="text1">text 1</div> - <div id="text2">text 2</div> - <div id="text3">text 3</div> - <div id="text4">text 4</div> -</div></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","300","300")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/css/-moz-cell/index.html b/files/fr/web/css/-moz-cell/index.html deleted file mode 100644 index a7121bf02e..0000000000 --- a/files/fr/web/css/-moz-cell/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -tags: - - CSS - - Obsolete - - Propriété - - Reference -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell ---- -<div class="boxed translate-rendered"> -<div>{{CSSRef}}{{deprecated_header}}</div> - -<p><em>Ne pas utiliser cette valeur ! </em>C'est la valeur <code>cursor</code> {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.</p> -</div> diff --git a/files/fr/web/css/-ms-scroll-snap-type/index.html b/files/fr/web/css/-ms-scroll-snap-type/index.html deleted file mode 100644 index fff872ad27..0000000000 --- a/files/fr/web/css/-ms-scroll-snap-type/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: '-ms-scroll-snap-type' -slug: Web/CSS/-ms-scroll-snap-type -tags: - - CSS - - Non-standard - - Reference -translation_of: Web/CSS/scroll-snap-type -translation_of_original: Web/CSS/-ms-scroll-snap-type ---- -<div>{{CSSRef}}{{non-standard_header}}</div> - -<p>La propriété <strong><code>-ms-scroll-snap-type</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique le type de point d'accroche à utiliser pour l'élément courant.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Values" name="Values">Valeurs</h3> - -<dl> - <dt><code>none</code></dt> - <dd> - <p>Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.</p> - </dd> - <dt><code>proximity</code></dt> - <dd> - <p>Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.</p> - </dd> - <dt><code>mandatory</code></dt> - <dd> - <p>L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.</p> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Specifications" name="Specifications">Spécifications</h2> - -<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Remarks" name="Remarks">Notes</h2> - -<p> </p> - -<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p> - -<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p> diff --git a/files/fr/web/css/-ms-user-select/index.html b/files/fr/web/css/-ms-user-select/index.html deleted file mode 100644 index 047c721acc..0000000000 --- a/files/fr/web/css/-ms-user-select/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '-ms-user-select' -slug: Web/CSS/-ms-user-select -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/user-select -translation_of_original: Web/CSS/-ms-user-select ---- -<div>{{CSSRef}}{{non-standard_header}}</div> - -<p>La propriété CSS <strong><code>-ms-user-select</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<h3 id="Values" name="Values">Valeurs</h3> - -<dl> - <dt><code>none</code></dt> - <dd> - <p>Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.</p> - </dd> - <dt><code>element</code></dt> - <dd> - <p>Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.</p> - </dd> - <dt><code>text</code></dt> - <dd> - <p>Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.</p> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Examples" name="Examples">Exemples</h2> - -<p>Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant <code>blog</code>. Ce conteneur contient un autre élément <code><div></code> avec l'identifiant <code>blogPost</code> pour le billet de la page. La classe <code>comment</code> est appliquée aux éléments <code><div></code> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.</p> - -<p>La déclaration suivante désactive la sélection à l'exception du contenu éditable.</p> - -<pre class="brush: css">#blog { - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; -} -</pre> - -<p>La déclaration suivante désactive la sélection pour le reste :</p> - -<pre class="brush: css">#blog, #blog input, #blog textarea, -#blog *[contenteditable=true] { - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; -} -</pre> - -<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.</p> - -<pre class="brush: css">#blogPost { - -ms-user-select: element; - -webkit-user-select: text; - -moz-user-select: text; -} - -#blog { - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; -} -</pre> - -<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.</p> - -<pre class="brush: css">.comment { - -ms-user-select: element; - -moz-user-select: text; - -webkit-user-select: text; -} - -#blog{ - -ms-user-select: none; - -moz-user-select: -moz-none; - -webkit-user-select: none; -} -</pre> - -<p>Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.</p> - -<pre class="brush: css">#blogPost, .comment { - -ms-user-select: text; -} - -#blog { - -ms-user-select: none; -} -</pre> - -<h2 id="Specifications" name="Specifications">Spécifications</h2> - -<p>Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.</p> - -<p>{{cssinfo}}</p> diff --git a/files/fr/web/css/-webkit-mask-image/index.html b/files/fr/web/css/-webkit-mask-image/index.html deleted file mode 100644 index 2303f48997..0000000000 --- a/files/fr/web/css/-webkit-mask-image/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: '-webkit-mask-image' -slug: Web/CSS/-webkit-mask-image -tags: - - CSS -translation_of: Web/CSS/mask-image -translation_of_original: Web/CSS/-webkit-mask-image ---- -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CSSRef() }}</p> - -<p>{{ Non-standard_header() }}</p> - -<h3 id="Résumé">Résumé</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La propriété CSS <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">-webkit-mask-image </code>définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.</p> - -<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;"> - <li>{{ Xref_cssinitial() }} : none</li> - <li>S'applique à : tous les éléments</li> - <li>{{ Xref_cssinherited() }} : non</li> - <li>Média : {{ Xref_cssvisual() }}</li> - <li>{{ Xref_csscomputed() }} : URI absolue ou none</li> -</ul> - -<h3 id="Syntaxe">Syntaxe</h3> - -<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">-webkit-mask-image: <mask-image>[, <mask-image>]* -</pre> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Valeurs :</p> - -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;"><mask-image></dt> - <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("<uri>")}} | <gradient> | none</code></dd> -</dl> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Values</p> - -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;"><uri></dt> - <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Chemin de la ressource image utilisée comme masque.</dd> - <dt style="font-style: normal; font-weight: bold;"> </dt> - <dt style="font-style: normal; font-weight: bold;"><gradient></dt> - <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><span style="font-family: courier new;">Fonction-webkit-gradient</span> utilisée comme masque.</dd> - <dt style="font-style: normal; font-weight: bold;">none</dt> - <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Signifie que l'élément n'a pas de masque image.</dd> -</dl> - -<h4 id="Exemples">Exemples</h4> - -<pre class="brush: css">body { - -webkit-mask-image: url('images/mymask.png'); -} - -div { - -webkit-mask-image: url('images/foo.png'), url('images/bar.png'); -} - -p { - -webkit-mask-image: none; -} -</pre> - -<h3 id="Notes">Notes</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.</p> - -<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;"> - <tbody> - <tr> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Fonctionnalité</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari</th> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0{{ property_prefix("-webkit") }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Masques SVG</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">8.0</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;"> - <tbody> - <tr> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;"><strong style="background-color: rgb(238, 238, 238); font-weight: bold; line-height: 14px;">Fonctionnalité</strong></th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">iOS Safari</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mini</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th> - <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android Browser</th> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">3.2</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">2.1</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes {{ property_prefix("-webkit") }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>Masques SVG</p> - </td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>yes</p> - </td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>{{ CompatNo() }}<a id="fck_paste_padding" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;"></a></p> - </td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>{{ CompatNo() }}</p> - </td> - <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> - <p>yes</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="note"><strong>Note :</strong> Gecko supporte les <a href="/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking" style="font-style: italic;" title="https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking">effets de filtre SVG </a>depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.</div> - -<h3 id="Voir_également">Voir également</h3> - -<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p> diff --git a/files/fr/web/css/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html index e9aef6fa8e..e9aef6fa8e 100644 --- a/files/fr/web/css/-ms-high-contrast/index.html +++ b/files/fr/web/css/@media/-ms-high-contrast/index.html diff --git a/files/fr/web/css/@media/index/index.html b/files/fr/web/css/@media/index/index.html deleted file mode 100644 index e227a1aecb..0000000000 --- a/files/fr/web/css/@media/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Index -slug: Web/CSS/@media/Index -tags: - - '@media' - - CSS - - Index -translation_of: Web/CSS/@media/Index ---- -<p>{{CSSRef}}</p> - -<p>{{Index("/fr/docs/Web/CSS/@media")}}</p> diff --git a/files/fr/web/css/@viewport/height/index.html b/files/fr/web/css/@viewport/height/index.html deleted file mode 100644 index bd7b0871c9..0000000000 --- a/files/fr/web/css/@viewport/height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.</p> - -<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Une valeur de longueur */ -/* Type <length> ou <percentage> */ -height: auto; -height: 320px; -height: 15em; - -/* Deux valeurs de longueur */ -height: 320px 200px; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une longueur relative ou absolue qui doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - height: 500px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.height")}}</p> diff --git a/files/fr/web/css/@viewport/max-height/index.html b/files/fr/web/css/@viewport/max-height/index.html deleted file mode 100644 index fd3499f24c..0000000000 --- a/files/fr/web/css/@viewport/max-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: max-height -slug: Web/CSS/@viewport/max-height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-height ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>max-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (<em>viewport</em>) d'un document.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Avec un mot-clé */ -max-height: auto; - -/* Valeur de longueur */ -/* Type <length> */ -max-height: 400px; -max-height: 50em; -max-height: 20cm; - -/* Valeur proportionnelle */ -/* Type <percentage> */ -max-height: 75%;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - max-height: 600px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.max-height")}}</p> diff --git a/files/fr/web/css/@viewport/max-width/index.html b/files/fr/web/css/@viewport/max-width/index.html deleted file mode 100644 index f131a09f7d..0000000000 --- a/files/fr/web/css/@viewport/max-width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: max-width -slug: Web/CSS/@viewport/max-width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-width ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>max-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (<em>viewport</em>) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du <em>viewport</em> initial.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Avec un mot-clé */ -max-width: auto; - -/* Valeur de longueur */ -/* Type <length> */ -max-width: 400px; -max-width: 50em; -max-width: 20cm; - -/* Valeur proportionnelle */ -/* Type <percentage> */ -max-width: 75%;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - max-width: 600px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.at-rules.viewport.max-width")}}</p> diff --git a/files/fr/web/css/@viewport/max-zoom/index.html b/files/fr/web/css/@viewport/max-zoom/index.html deleted file mode 100644 index a5021d48f3..0000000000 --- a/files/fr/web/css/@viewport/max-zoom/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: max-zoom -slug: Web/CSS/@viewport/max-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-zoom ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>max-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p> - -<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush:css">/* Valeur avec un mot-clé */ -max-zoom: auto; - -/* Nombres : type <number> */ -max-zoom: 0.8; -max-zoom: 2.0; - -/* Valeurs proportionnelles : type <percentage> */ -max-zoom: 150%; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd> - <dt><code><number></code></dt> - <dd>Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<number>")}}).</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<percentage>")}}).</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p> diff --git a/files/fr/web/css/@viewport/min-height/index.html b/files/fr/web/css/@viewport/min-height/index.html deleted file mode 100644 index 83a55c3c66..0000000000 --- a/files/fr/web/css/@viewport/min-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: min-height -slug: Web/CSS/@viewport/min-height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-height ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>min-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Avec un mot-clé */ -min-height: auto; - -/* Valeur de longueur */ -/* Type <length> */ -min-height: 400px; -min-height: 50em; -min-height: 20cm; - -/* Valeur proportionnelle */ -/* Type <percentage> */ -min-height: 75%;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - min-height: 600px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.min-height")}}</p> diff --git a/files/fr/web/css/@viewport/min-width/index.html b/files/fr/web/css/@viewport/min-width/index.html deleted file mode 100644 index aa345f6c1e..0000000000 --- a/files/fr/web/css/@viewport/min-width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: min-width -slug: Web/CSS/@viewport/min-width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-width ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>min-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Avec un mot-clé */ -min-width: auto; - -/* Valeur de longueur */ -/* Type <length> */ -min-width: 400px; -min-width: 50em; -min-width: 20cm; - -/* Valeur proportionnelle */ -/* Type <percentage> */ -min-width: 75%;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - min-width: 600px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.at-rules.viewport.min-width")}}</p> diff --git a/files/fr/web/css/@viewport/min-zoom/index.html b/files/fr/web/css/@viewport/min-zoom/index.html deleted file mode 100644 index 295e87ce7a..0000000000 --- a/files/fr/web/css/@viewport/min-zoom/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: min-zoom -slug: Web/CSS/@viewport/min-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-zoom ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>min-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p> - -<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush:css">/* Valeur avec un mot-clé */ -min-zoom: auto; - -/* Nombres : type <number> */ -min-zoom: 0.8; -min-zoom: 2.0; - -/* Valeurs proportionnelles : type <percentage> */ -min-zoom: 150%; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd> - <dt><code><number></code></dt> - <dd>Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<number>")}}).</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<percentage>")}}).</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p> diff --git a/files/fr/web/css/@viewport/orientation/index.html b/files/fr/web/css/@viewport/orientation/index.html deleted file mode 100644 index 42e89f24e5..0000000000 --- a/files/fr/web/css/@viewport/orientation/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: orientation -slug: Web/CSS/@viewport/orientation -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/orientation ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>orientation</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.</p> - -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ -orientation: auto; -orientation: portrait; -orientation: landscape; -</pre> - -<p>Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).</dd> - <dt><code>portrait</code></dt> - <dd>Le document devrait être verrouillé en mode portrait.</dd> - <dt><code>landscape</code></dt> - <dd>Le document devrait être verrouillé en mode paysage.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.orientation")}}</p> diff --git a/files/fr/web/css/@viewport/user-zoom/index.html b/files/fr/web/css/@viewport/user-zoom/index.html deleted file mode 100644 index 45f9b90ef5..0000000000 --- a/files/fr/web/css/@viewport/user-zoom/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: user-zoom -slug: Web/CSS/@viewport/user-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/user-zoom ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>user-zoom</code></strong>, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (<em>viewport</em>).</p> - -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ -user-zoom: zoom; -user-zoom: fixed; -</pre> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>zoom</code></dt> - <dd>L'utilisateur peut zoomer/dézoomer.</dd> - <dt><code>fixed</code></dt> - <dd>L'utilisateur ne peut ni zoomer ni dézoomer.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Specifications" name="Specifications">Accessibilité</h2> - -<p>Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.user-zoom")}}</p> diff --git a/files/fr/web/css/@viewport/viewport-fit/index.html b/files/fr/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 5532ed2191..0000000000 --- a/files/fr/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -tags: - - '@viewport' - - CSS - - Descripteur - - Experimental - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> - -<p>Le descripteur <strong><code>viewport-fit</code></strong>, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (<em>viewport</em>) d'un document recouvre l'écran.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css; no-line-numbers">/* Valeurs avec un mot-clé */ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.</dd> - <dt><code>contain</code></dt> - <dd>La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.</dd> - <dt><code>cover</code></dt> - <dd>La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser <a href="/en-US/docs/Web/CSS/env">des variables pour le placement en zone sûre</a> afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">auto | contain | cover</pre> - -<h2 id="Accessibilité">Accessibilité</h2> - -<p>When using the <code>viewport-fit</code> descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the <a href="/en-US/docs/Web/CSS/env">safe area inset variables</a>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/fr/web/css/@viewport/width/index.html b/files/fr/web/css/@viewport/width/index.html deleted file mode 100644 index 26e657d76a..0000000000 --- a/files/fr/web/css/@viewport/width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: width -slug: Web/CSS/@viewport/width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/width ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <code><strong>width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.</p> - -<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css">/* Une valeur de longueur */ -/* Type <length> ou <percentage> */ -width: auto; -width: 320px; -width: 15em; - -/* Deux valeurs de longueur */ -width: 320px 200px; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd> - <dt><code><length></code></dt> - <dd>Une longueur relative ou absolue qui doit être positive.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css">@viewport { - width: 500px; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.at-rules.viewport.width")}}</p> diff --git a/files/fr/web/css/@viewport/zoom/index.html b/files/fr/web/css/@viewport/zoom/index.html deleted file mode 100644 index c995febbea..0000000000 --- a/files/fr/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -<div>{{CSSRef}}</div> - -<p>Le descripteur <strong><code>zoom</code></strong>, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.</p> - -<p>Un niveau de zoom égal à <code>1.0</code> ou <code>100%</code> n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush:css">/* Valeur avec un mot-clé */ -zoom: auto; - -/* Valeurs numériques */ -/* Type <number> */ -zoom: 0.8; -zoom: 2.0; - -/* Valeurs proportionnelles */ -/* Type <percentage> */ -zoom: 150%; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.</dd> - <dt><code><number></code></dt> - <dd>Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("<number>")}}.</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("<percentage>")}}.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html b/files/fr/web/css/_colon_-moz-list-bullet/index.html index f394c8a1c1..f394c8a1c1 100644 --- a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html +++ b/files/fr/web/css/_colon_-moz-list-bullet/index.html diff --git a/files/fr/web/css/_doublecolon_-moz-list-number/index.html b/files/fr/web/css/_colon_-moz-list-number/index.html index 0f12741d94..0f12741d94 100644 --- a/files/fr/web/css/_doublecolon_-moz-list-number/index.html +++ b/files/fr/web/css/_colon_-moz-list-number/index.html diff --git a/files/fr/web/css/_colon_-ms-input-placeholder/index.html b/files/fr/web/css/_colon_-ms-input-placeholder/index.html deleted file mode 100644 index 8b1111134c..0000000000 --- a/files/fr/web/css/_colon_-ms-input-placeholder/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':-ms-input-placeholder' -slug: 'Web/CSS/:-ms-input-placeholder' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Référence(2) -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-ms-input-placeholder' ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<p>La pseudo-classe <strong><code>:-ms-input-placeholder</code></strong> représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).</p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input { - background-color:#E8E8E8; - color:black; -} -/* Style pour le texte de substitution */ -input.studentid:-ms-input-placeholder { - font-style:italic; - color: red; - background-color: yellow; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><form id="test"> - <p><label>Saisir le nom : <input id="nom" placeholder="Nom de l'étudiant"/></label></p> - <p><label>Saisir le domaine : <input id="domaine" placeholder="Domaine d'étude" /></label></p> - <p><label>Saisir l'identifiant : <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /></label></p> - <input type="submit" /> -</form></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","300","300")}}</p> - -<h3 id="Capture_d'écran">Capture d'écran</h3> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">MSDN documente cette pseudo-classe</a>.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>10</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/fr/web/css/_colon_any/index.html b/files/fr/web/css/_colon_any/index.html deleted file mode 100644 index f3036e1ee9..0000000000 --- a/files/fr/web/css/_colon_any/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: ':any()' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.</p> - -<pre class="brush: css no-line-numbers">/* sélectionne tous les h2 d'une section, d'un article */ -/* d'un aside ou d'un nav */ -/* actuellement pris en charge avec les préfixes */ -/* -moz- et -webkit- */ -:-moz-any(section, article, aside, nav) h2 { - font-size: 4.5rem; -} - -:-webkit-any(section, article, aside, nav) h2 { - font-size: 4.5rem; -} -</pre> - -<div class="note"><strong>Note : </strong>Cette pseudo-classe est en voie d'être standardisée dans la spécification <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> sous le nom de <code>:matches()</code>. Il est probable que la syntaxe et le nom de <code>:-<em>préfixe</em>-any()</code> soit amené à changer pour l'adopter dans un avenir proche.</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>selector</code></dt> - <dd>Un sélecteur, simple ou multiple, composé d'un <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors">sélecteur CSS simple</a>.</dd> -</dl> - -<div class="note"><strong>Note :</strong> Le sélecteur <strong>ne peut pas</strong> contenir de combinateur ou de pseudo-éléments.</div> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Simplifier_la_sélection_de_listes">Simplifier la sélection de listes</h3> - -<p>Par exemple, le code CSS suivant :</p> - -<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */ - dans certains cas */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { - list-style-type: square; -} -</pre> - -<p>Pourra être remplacé par :</p> - -<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */ - dans certains cas */ -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { - list-style-type: square; -}</pre> - -<p>Cependant, on évitera d'utiliser le code suivant (cf. <a href="#Performances">la section sur les performances</a> plus bas) :</p> - -<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { - list-style-type: square; -}</pre> - -<h3 id="Simplifier_la_sélection_de_section">Simplifier la sélection de section</h3> - -<p>Ceci est particulièrement utile lorsqu'on manipule <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">des sections et des titres</a> HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans <code>:any()</code>, leur appliquer un style peut être beaucoup plus complexe.</p> - -<p>Par exemple, sans <code>:any()</code>, appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :</p> - -<pre class="brush: css">/* Niveau 0 */ -h1 { - font-size: 30px; -} -/* Niveau 1 */ -section h1, article h1, aside h1, nav h1 { - font-size: 25px; -} -/* Niveau 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1, { - font-size: 20px; -} -/* Niveau 3 */ -/* ... même pas la peine d'y penser */ -</pre> - -<p>En utilisant : <code>-any()</code>, cela devient plus simple :</p> - -<pre class="brush: css">/* Niveau 0 */ -h1 { - font-size: 30px; -} -/* Niveau 1 */ -:-moz-any(section, article, aside, nav) h1 { - font-size: 25px; -} -:-webkit-any(section, article, aside, nav) h1 { - font-size: 25px; -} - -/* Niveau 2 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 20px; -} - -:-webkit-any(section, article, aside, nav) -:-webkit-any(section, article, aside, nav) h1 { - font-size: 20px; -} - -/* Niveau 3 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 15px; -} - -:-webkit-any(section, article, aside, nav) -:-webkit-any(section, article, aside, nav) -:-webkit-any(section, article, aside, nav) h1 { - font-size: 15px; -}</pre> - -<h2 id="Notes">Notes</h2> - -<h3 id="Problèmes_avec_les_performances_et_la_spécificité"><a id="Performances">Problèmes avec les performances et la spécificité</a></h3> - -<p>Le bug {{bug("561154")}} illustre un problème où la spécificité de <code>:-moz-any()</code> est incorrecte. L'implémentation actuelle considère <code>:-moz-any()</code> comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.</p> - -<p>Par exemple :</p> - -<pre class="brush: css">.a > :-moz-any(.b, .c) -</pre> - -<p>est moins rapide que :</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>et celui-ci est rapide :</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c -</pre> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.selectors.any")}}</p> diff --git a/files/fr/web/css/_colon_-webkit-autofill/index.html b/files/fr/web/css/_colon_autofill/index.html index 4d7aadd16e..4d7aadd16e 100644 --- a/files/fr/web/css/_colon_-webkit-autofill/index.html +++ b/files/fr/web/css/_colon_autofill/index.html diff --git a/files/fr/web/css/_colon_-moz-ui-invalid/index.html b/files/fr/web/css/_colon_user-invalid/index.html index 5f29e0f90f..5f29e0f90f 100644 --- a/files/fr/web/css/_colon_-moz-ui-invalid/index.html +++ b/files/fr/web/css/_colon_user-invalid/index.html diff --git a/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html deleted file mode 100644 index 4be89a52e0..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: '::-webkit-input-placeholder' -slug: 'Web/CSS/::-webkit-input-placeholder' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-webkit-input-placeholder' ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<p>Le pseudo-élément <strong><code>::-webkit-input-placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input placeholder="Veuillez saisir ici..."></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input::-webkit-input-placeholder { - color: green; -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> - <li>{{cssxref(":-ms-input-placeholder")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/fr/web/css/_doublecolon_file-selector-button/index.html index 2de12911cf..2de12911cf 100644 --- a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html +++ b/files/fr/web/css/_doublecolon_file-selector-button/index.html diff --git a/files/fr/web/css/valeur_reelle/index.html b/files/fr/web/css/actual_value/index.html index 4a4d768379..4a4d768379 100644 --- a/files/fr/web/css/valeur_reelle/index.html +++ b/files/fr/web/css/actual_value/index.html diff --git a/files/fr/web/css/combinateur_de_voisin_direct/index.html b/files/fr/web/css/adjacent_sibling_combinator/index.html index 4898c755c4..4898c755c4 100644 --- a/files/fr/web/css/combinateur_de_voisin_direct/index.html +++ b/files/fr/web/css/adjacent_sibling_combinator/index.html diff --git a/files/fr/web/css/feuilles_de_style_alternatives/index.html b/files/fr/web/css/alternative_style_sheets/index.html index cc96a123e1..cc96a123e1 100644 --- a/files/fr/web/css/feuilles_de_style_alternatives/index.html +++ b/files/fr/web/css/alternative_style_sheets/index.html diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/index.html b/files/fr/web/css/arrière-plans_et_bordures_css/index.html deleted file mode 100644 index 8873196702..0000000000 --- a/files/fr/web/css/arrière-plans_et_bordures_css/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Arrière-plans et bordures CSS -slug: Web/CSS/Arrière-plans_et_bordures_CSS -tags: - - CSS - - Référence(2) -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -<div>{{CSSRef}}</div> - -<p><strong>Les arrière-plans et bordures CSS</strong> forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés_CSS">Propriétés CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("background")}}</li> - <li>{{cssxref("background-attachment")}}</li> - <li>{{cssxref("background-clip")}}</li> - <li>{{cssxref("background-color")}}</li> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background-origin")}}</li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-repeat")}}</li> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-bottom-left-radius")}}</li> - <li>{{cssxref("border-bottom-right-radius")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-collapse")}}</li> - <li>{{cssxref("border-color")}}</li> - <li>{{cssxref("border-image")}}</li> - <li>{{cssxref("border-image-outset")}}</li> - <li>{{cssxref("border-image-repeat")}}</li> - <li>{{cssxref("border-image-slice")}}</li> - <li>{{cssxref("border-image-source")}}</li> - <li>{{cssxref("border-image-width")}}</li> - <li>{{cssxref("border-left")}}</li> - <li>{{cssxref("border-left-color")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-radius")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-top-left-radius")}}</li> - <li>{{cssxref("border-top-right-radius")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-width")}}</li> - <li>{{cssxref("box-shadow")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrière-plans CSS</a></dt> - <dd>Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Redimensionner des images d'arrière-plan</a></dt> - <dd>Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.</dd> -</dl> - -<h2 id="Outils">Outils</h2> - -<dl> - <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur de <code>border-image</code></a></dt> - <dd>Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur de <code>border-radius</code></a></dt> - <dd>Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur de <code>box-shadow</code></a></dt> - <dd>Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Support simple</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9.2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/fr/web/css/règles_@/index.html b/files/fr/web/css/at-rule/index.html index e298cf9028..e298cf9028 100644 --- a/files/fr/web/css/règles_@/index.html +++ b/files/fr/web/css/at-rule/index.html diff --git a/files/fr/web/css/sélecteurs_d_attribut/index.html b/files/fr/web/css/attribute_selectors/index.html index 6c9e719345..6c9e719345 100644 --- a/files/fr/web/css/sélecteurs_d_attribut/index.html +++ b/files/fr/web/css/attribute_selectors/index.html diff --git a/files/fr/web/css/auto/index.html b/files/fr/web/css/auto/index.html deleted file mode 100644 index 92535f6d82..0000000000 --- a/files/fr/web/css/auto/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -<p>{{ CSSRef() }}</p> -<h2 id="Résumé">Résumé</h2> -<p>Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de <code>auto</code> sont différents suivant la propriété à laquelle la valeur est affectée.</p> -<h2 id="Utilisation">Utilisation</h2> -<ul> - <li>{{ Cssxref("overflow") }}</li> - <li>{{ Cssxref("overflow-x") }}</li> - <li>{{ Cssxref("overflow-y") }}</li> - <li>{{ Cssxref("cursor") }}</li> - <li>{{ Cssxref("width") }}</li> - <li>{{ Cssxref("height") }}</li> - <li>{{ Cssxref("marker-offset") }}</li> - <li>{{ Cssxref("margin") }}</li> - <li>margin-* (left|bottom|top|right|start|end)</li> - <li>{{ Cssxref("bottom") }}</li> - <li>{{ Cssxref("left") }}</li> - <li>{{ Cssxref("table-layout") }}</li> - <li>{{ Cssxref("z-index") }}</li> - <li>{{ Cssxref("column-width") }}</li> -</ul> diff --git a/files/fr/web/css/sélecteurs_enfant/index.html b/files/fr/web/css/child_combinator/index.html index bc24234ef2..bc24234ef2 100644 --- a/files/fr/web/css/sélecteurs_enfant/index.html +++ b/files/fr/web/css/child_combinator/index.html diff --git a/files/fr/web/css/sélecteurs_de_classe/index.html b/files/fr/web/css/class_selectors/index.html index 115d791092..115d791092 100644 --- a/files/fr/web/css/sélecteurs_de_classe/index.html +++ b/files/fr/web/css/class_selectors/index.html diff --git a/files/fr/web/css/type_color/index.html b/files/fr/web/css/color_value/index.html index fd238e5816..fd238e5816 100644 --- a/files/fr/web/css/type_color/index.html +++ b/files/fr/web/css/color_value/index.html diff --git a/files/fr/web/css/combinateur_colonne/index.html b/files/fr/web/css/column_combinator/index.html index b971e8ae4c..b971e8ae4c 100644 --- a/files/fr/web/css/combinateur_colonne/index.html +++ b/files/fr/web/css/column_combinator/index.html diff --git a/files/fr/web/css/valeur_calculée/index.html b/files/fr/web/css/computed_value/index.html index 356a3f75ba..356a3f75ba 100644 --- a/files/fr/web/css/valeur_calculée/index.html +++ b/files/fr/web/css/computed_value/index.html diff --git a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html b/files/fr/web/css/containing_block/index.html index 6269f895b5..6269f895b5 100644 --- a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html +++ b/files/fr/web/css/containing_block/index.html diff --git a/files/fr/web/css/couleurs_css/index.html b/files/fr/web/css/couleurs_css/index.html deleted file mode 100644 index fb589fa689..0000000000 --- a/files/fr/web/css/couleurs_css/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Couleurs CSS -slug: Web/CSS/Couleurs_CSS -tags: - - Aperçu - - CSS - - CSS Color - - Reference -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -<div>{{CSSRef}}</div> - -<p><strong>Les couleurs CSS</strong> (<em>CSS Color</em> en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés_CSS">Propriétés CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("color")}}</li> - <li>{{cssxref("opacity")}}</li> -</ul> -</div> - -<h3 id="Types_de_donnée">Types de donnée</h3> - -<div class="index"> -<ul> - <li>{{cssxref("<color>")}}</li> -</ul> -</div> - -<h2 id="Guide">Guide</h2> - -<dl> - <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt> - <dd>Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.</dd> -</dl> - -<h2 id="Outils">Outils</h2> - -<dl> - <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Un sélecteur de couleurs</a></dt> - <dd>Cet outil vous permet de créer, ajuster et manipuler des couleurs.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Colors')}}</td> - <td>{{Spec2('CSS3 Colors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Support simple</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Attention, en CSS, les dégradés de couleurs ne sont pas des couleurs mais <a href="/fr/docs/Web/CSS/CSS_Images">des images</a>.</li> - <li>Les autres propriétés relatives aux couleurs et qui font partie d'autres modules de spécification : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li> -</ul> diff --git a/files/fr/web/css/liste_propriétés_css_animées/index.html b/files/fr/web/css/css_animated_properties/index.html index e3927a94d8..e3927a94d8 100644 --- a/files/fr/web/css/liste_propriétés_css_animées/index.html +++ b/files/fr/web/css/css_animated_properties/index.html diff --git a/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html index a2cb1bd5a3..a2cb1bd5a3 100644 --- a/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html diff --git a/files/fr/web/css/animations_css/index.html b/files/fr/web/css/css_animations/index.html index acc7ab6997..acc7ab6997 100644 --- a/files/fr/web/css/animations_css/index.html +++ b/files/fr/web/css/css_animations/index.html diff --git a/files/fr/web/css/animations_css/conseils/index.html b/files/fr/web/css/css_animations/tips/index.html index bb79f19722..bb79f19722 100644 --- a/files/fr/web/css/animations_css/conseils/index.html +++ b/files/fr/web/css/css_animations/tips/index.html diff --git a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html index 4010492e3d..4010492e3d 100644 --- a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html +++ b/files/fr/web/css/css_animations/using_css_animations/index.html diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html index 592f9f64fd..592f9f64fd 100644 --- a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html +++ b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html index 344dd64bcc..344dd64bcc 100644 --- a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html +++ b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html diff --git a/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html index 77f236ac13..77f236ac13 100644 --- a/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html +++ b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html diff --git a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index f9cce126c9..f9cce126c9 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html diff --git a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index fd4961c49f..fd4961c49f 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html diff --git a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 69b0043c13..69b0043c13 100644 --- a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html +++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html index 45945b3040..45945b3040 100644 --- a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index 8acebc248d..8acebc248d 100644 --- a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html index 4adf375ac4..4adf375ac4 100644 --- a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html index 36bee5640e..36bee5640e 100644 --- a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html diff --git a/files/fr/web/css/modèle_de_boîte_css/index.html b/files/fr/web/css/css_box_model/index.html index 3bc62c03f1..3bc62c03f1 100644 --- a/files/fr/web/css/modèle_de_boîte_css/index.html +++ b/files/fr/web/css/css_box_model/index.html diff --git a/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html index 3b14f121d8..3b14f121d8 100644 --- a/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html +++ b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html diff --git a/files/fr/web/css/jeux_de_caractères_css/index.html b/files/fr/web/css/css_charsets/index.html index a7c76a2c4e..a7c76a2c4e 100644 --- a/files/fr/web/css/jeux_de_caractères_css/index.html +++ b/files/fr/web/css/css_charsets/index.html diff --git a/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html b/files/fr/web/css/css_colors/color_picker_tool/index.html index df4aa4661c..df4aa4661c 100644 --- a/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html +++ b/files/fr/web/css/css_colors/color_picker_tool/index.html diff --git a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html index 2032e1c2c6..2032e1c2c6 100644 --- a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html diff --git a/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html index 909c9bd2a5..909c9bd2a5 100644 --- a/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html diff --git a/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html index 7dc6078442..7dc6078442 100644 --- a/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html +++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html diff --git a/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html b/files/fr/web/css/css_columns/spanning_columns/index.html index d1116ebd7d..d1116ebd7d 100644 --- a/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html +++ b/files/fr/web/css/css_columns/spanning_columns/index.html diff --git a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html b/files/fr/web/css/css_columns/styling_columns/index.html index 0689060daf..0689060daf 100644 --- a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html +++ b/files/fr/web/css/css_columns/styling_columns/index.html diff --git a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html index 897ac5c989..897ac5c989 100644 --- a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html diff --git a/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html index 811f5c4b22..811f5c4b22 100644 --- a/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html +++ b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html diff --git a/files/fr/web/css/compartimentation_css/index.html b/files/fr/web/css/css_containment/index.html index 34af6f3274..34af6f3274 100644 --- a/files/fr/web/css/compartimentation_css/index.html +++ b/files/fr/web/css/css_containment/index.html diff --git a/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 2321587479..2321587479 100644 --- a/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html +++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index 652541e0c1..652541e0c1 100644 --- a/files/fr/web/css/css_flexible_box_layout/mixins/index.html +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html diff --git a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index dadea30a48..dadea30a48 100644 --- a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html diff --git a/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html b/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html deleted file mode 100644 index f91090e0dc..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Utiliser les boîtes flexibles pour les applications web -slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -<div>{{CSSRef}}</div> - -<p>Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">le positionnement absolu</a> et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :</p> - -<ul> - <li>Centrer un élément au milieu d'une page</li> - <li>Définir des conteneurs qui s'organisent verticalement, l'un après l'autre</li> - <li>Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.</li> -</ul> - -<p>Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">au guide plus générique sur la manipulation des boîtes flexibles en CSS</a>.</p> - -<h2 id="Les_bases">Les bases</h2> - -<p>Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur <code>flex</code> puis définir {{cssxref("flex-flow")}} avec la valeur <code>row</code> (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur <code>column</code> (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété <code>wrap</code>.</p> - -<p>Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :</p> - -<ul> - <li>Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser <code>flex: none</code> that expands to <code>0 0 auto</code>.</li> - <li>Si on veut définir la taille explicite d'un élément, on pourra utiliser <code>flex: 0 0 <em>taille</em></code>. Par exemple : <code>flex 0 0 60px</code>.</li> - <li>Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser <code>flex: auto</code>. It expands to <code>1 1 auto</code>.</li> -</ul> - -<p>Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.</p> - -<h2 id="Centrer_un_élément">Centrer un élément</h2> - -<p>Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.</p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.horizontal-box { - display: flex; - flex-flow: row; -} -.spacer { - flex: auto; - background-color: black; -} -.centered-element { - flex: none; - background-color: white; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html;"><div class="vertical-box"> - <div class="spacer"></div> - <div class="centered-element horizontal-box"> - <div class="spacer"></div> - <div class="centered-element">Centered content</div> - <div class="spacer"></div> - </div> - <div class="spacer"></div> -</div> -</pre> - -<h3 id="Resultat">Resultat</h3> - -<p>{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}</p> - -<h2 id="Répartir_des_conteneurs_verticalement">Répartir des conteneurs verticalement</h2> - -<p>Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur <code>auto</code> pour le contenu et la valeur <code>none</code> pour l'en-tête et le pied de page.</p> - -<h3 id="CSS_2">CSS</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.fixed-size { - flex: none; - height: 30px; - background-color: black; - text-align: center; -} -.flexible-size { - flex: auto; - background-color: white; -} -</pre> - -<h3 id="HTML_2">HTML</h3> - -<pre class="brush: html;"><div id="document" class="vertical-box"> - <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div> - <div id="flexible-content" class="flexible-size"></div> - <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div> -</div> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js;">var height = 400; -document.getElementById('increase-size').onclick=function() { - height += 10; - if (height > 500) height = 500; - document.getElementById('document').style.height = (height + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - height -= 10; - if (height < 300) height = 300; - document.getElementById('document').style.height = (height + "px"); -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}</p> - -<h2 id="Créer_un_conteneur_horizontal_qui_se_replie">Créer un conteneur horizontal qui se replie</h2> - -<p>Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur <code>wrap</code> sur la propriété {{cssxref("flex-flow")}}.</p> - -<h3 id="CSS_3">CSS</h3> - -<pre class="brush: css;">.horizontal-container { - display: flex; - width: 300px; - flex-flow: row wrap; -} -.fixed-size { - flex: none; - width: 100px; - background-color: black; - color: white; - text-align: center; -} -</pre> - -<h3 id="HTML_3">HTML</h3> - -<pre class="brush: html;"><div id="container" class="horizontal-container"> - <div class="fixed-size">Élément 1</div> - <div class="fixed-size">Élément 2</div> - <div class="fixed-size">Élément 3</div> -</div> -<button id="increase-size">Augmenter la taille du conteneur</button> -<button id="decrease-size">Réduire la taille du conteneur</button> -</pre> - -<h3 id="JavaScript_2">JavaScript</h3> - -<pre class="brush: js;">var width = 300; - -document.getElementById('increase-size').onclick=function() { - width += 100; - if (width > 300) width = 300; - document.getElementById('container').style.width = (width + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - width -= 100; - if (width < 100) width = 100; - document.getElementById('container').style.width = (width + "px"); -} -</pre> - -<h3 id="Résultat_2">Résultat</h3> - -<p>{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Manipuler les boîtes flexibles</a></li> -</ul> diff --git a/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html index a05bdb1ca2..a05bdb1ca2 100644 --- a/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html diff --git a/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 6b78cba48f..6b78cba48f 100644 --- a/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html diff --git a/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html index acd32e0de0..acd32e0de0 100644 --- a/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html diff --git a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html index c6e9691ae5..c6e9691ae5 100644 --- a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html +++ b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html diff --git a/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html deleted file mode 100644 index b36e1eb0f4..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Rétrocompatibilité de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox -tags: - - '@supports' - - Boîtes flexibles - - CSS - - Guide - - Intermediate - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox ---- -<div>{{CSSRef}}</div> - -<p class="summary">Les boîtes flexibles (<em>flexbox</em>) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.</p> - -<h2 id="Il_était_une_fois_flexbox…">Il était une fois <em>flexbox</em>…</h2> - -<p>Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de <em>Candidate Recommendation</em> dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.</p> - -<p>Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.</p> - -<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">En 2009</a>, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser <code>display: box</code> et on disposait ensuite de différentes propriétés <code>box-*</code> qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.</p> - -<p>Vint ensuite <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">une mise à jour de la spécification</a> pour mettre à jour la syntaxe : <code>display: flexbox</code> — là encore, ces valeurs étaient préfixées.</p> - -<p>Enfin, la spécification a été mise à jour pour définir <code>display: flex</code> comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.</p> - -<p>Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que <code>display: box</code> ou <code>display: flexbox</code>, vous pouvez en déduire qu'il s'agit d'informations obsolètes.</p> - -<h2 id="État_de_la_compatibilité_des_navigateurs">État de la compatibilité des navigateurs</h2> - -<p>La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :</p> - -<ul> - <li>Internet Explorer 10 qui implémentait la version <code>display: flexbox</code> avec le préfixe <code>-ms-</code>.</li> - <li>UC Browser qui prend en charge la version de 2009 avec <code>display: box</code> et avec le préfixe <code>-webkit-</code>.</li> -</ul> - -<p>On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec <code>display: flex</code> mais que de nombreux bugs sont présents dans cette implémentation.</p> - -<h2 id="Problèmes_fréquents">Problèmes fréquents</h2> - -<p>La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.</p> - -<p>Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.</p> - -<pre class="brush: css">.wrapper { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -}</pre> - -<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.</p> - -<h2 id="Techniques_de_recours">Techniques de recours</h2> - -<p>La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.</p> - -<h3 id="Éléments_flottants">Éléments flottants</h3> - -<blockquote> -<p>“<code>float</code> et <code>clear</code> ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Conteneurs flexibles</a></p> -</blockquote> - -<p>Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite <code>display: flex</code> sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.</p> - -<p>Pour tester le comportement alternatif, vous pouvez retirer <code>display: flex</code> du conteneur englobant.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p> - -<h3 id="display_inline-block"><code>display: inline-block</code></h3> - -<p>Lorsqu'un élément disposé avec <code>inline-block</code> devient un élément flexible, cet élément devient analogue à un bloc et le comportement de <code>display: inline-block</code> qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.</p> - -<p>Vous pouvez retirer la règle avec <code>display: flex</code> dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère <code>display: inline-block</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p> - -<h3 id="display_table-"><code>display: table-</code><em> </em></h3> - -<p>Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.</p> - -<p>Si vous utilisez <code>display: table-cell</code> sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.</p> - -<p>Si vous déclarez ensuite <code>display: flex</code> sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.</p> - -<blockquote> -<p>“Note : certaines valeurs de <code>display</code> déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec <code>display: table-cell</code> deviendront deux éléments flexibles distincts avec <code>display: block</code> plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Éléments flexibles</a></p> -</blockquote> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p> - -<h3 id="La_propriété_vertical-align">La propriété <code>vertical-align</code></h3> - -<p>L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode <code>display: inline-block</code>. Les deux modes <code>display: table-cell</code> et <code>display: inline-block</code> permettent d'utiliser cette propriété. La propriété <code>vertical-align</code> permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec <code>display: table-cell</code> ou <code>display: inline-block</code> comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p> - -<h2 id="Requêtes_de_fonctionnalités_et_flexbox">Requêtes de fonctionnalités et <em>flexbox</em></h2> - -<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/%40supports">les requêtes de fonctionnalité (<em>feature queries</em>)</a> afin de détecter la prise en charge des boîtes flexibles :</p> - -<pre class="brush: css">@supports (display: flex) { - // code utilisé pour les navigateurs qui - // prennent en charge cette fonctionnalité -}</pre> - -<p>On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code <em>flexbox</em> qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :</p> - -<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) { - // code pour les navigateurs qui - // prennent en charge cette fonctionnalité -}</pre> - -<p>Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire <em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/"> (en anglais)</a> sur le blog Hacks de Mozilla.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index 26a4738980..26a4738980 100644 --- a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html diff --git a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index 8566b8accd..8566b8accd 100644 --- a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html +++ b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html index 703af33bee..703af33bee 100644 --- a/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html index 2ecf299ce2..2ecf299ce2 100644 --- a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html diff --git a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index 663f0a9c8a..663f0a9c8a 100644 --- a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html +++ b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html diff --git a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index 88ed84ff16..88ed84ff16 100644 --- a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html diff --git a/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html index 6980ff4d78..6980ff4d78 100644 --- a/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html diff --git a/files/fr/web/css/css_fonts/guide_polices_variables/index.html b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html index 043902094e..043902094e 100644 --- a/files/fr/web/css/css_fonts/guide_polices_variables/index.html +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html diff --git a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index 980b03ea62..980b03ea62 100644 --- a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html diff --git a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index c6395dbee9..c6395dbee9 100644 --- a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html diff --git a/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 8353f2c29e..8353f2c29e 100644 --- a/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html index 8a5122de2f..8a5122de2f 100644 --- a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html index 6e2751382d..6e2751382d 100644 --- a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index cbc0501498..cbc0501498 100644 --- a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html diff --git a/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html index be9c0122a7..be9c0122a7 100644 --- a/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html diff --git a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index d8d7e5cf83..d8d7e5cf83 100644 --- a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html diff --git a/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 5984342f18..5984342f18 100644 --- a/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html diff --git a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index 44e85dda1f..44e85dda1f 100644 --- a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html diff --git a/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 9f31864e55..9f31864e55 100644 --- a/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html +++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html diff --git a/files/fr/web/css/css_images/sprites_css/index.html b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html index a141a8a11e..a141a8a11e 100644 --- a/files/fr/web/css/css_images/sprites_css/index.html +++ b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html diff --git a/files/fr/web/css/utilisation_de_dégradés_css/index.html b/files/fr/web/css/css_images/using_css_gradients/index.html index 94a0fbcb67..94a0fbcb67 100644 --- a/files/fr/web/css/utilisation_de_dégradés_css/index.html +++ b/files/fr/web/css/css_images/using_css_gradients/index.html diff --git a/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html index 52a1cfbc33..52a1cfbc33 100644 --- a/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html diff --git a/files/fr/web/css/css_lists/index.html b/files/fr/web/css/css_lists_and_counters/index.html index 781d7cb961..781d7cb961 100644 --- a/files/fr/web/css/css_lists/index.html +++ b/files/fr/web/css/css_lists_and_counters/index.html diff --git a/files/fr/web/css/css_lists/compteurs_css/index.html b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html index 7ca83181c4..7ca83181c4 100644 --- a/files/fr/web/css/css_lists/compteurs_css/index.html +++ b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html diff --git a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html b/files/fr/web/css/css_logical_properties/basic_concepts/index.html index 4129c926c7..4129c926c7 100644 --- a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html +++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.html diff --git a/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html index 3a99d5bbad..3a99d5bbad 100644 --- a/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html +++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html diff --git a/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html index 8b4da0bce6..8b4da0bce6 100644 --- a/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html diff --git a/files/fr/web/css/css_logical_properties/dimensionnement/index.html b/files/fr/web/css/css_logical_properties/sizing/index.html index f6ffe024e6..f6ffe024e6 100644 --- a/files/fr/web/css/css_logical_properties/dimensionnement/index.html +++ b/files/fr/web/css/css_logical_properties/sizing/index.html diff --git a/files/fr/web/css/css_masks/index.html b/files/fr/web/css/css_masking/index.html index ea2a9afeb5..ea2a9afeb5 100644 --- a/files/fr/web/css/css_masks/index.html +++ b/files/fr/web/css/css_masking/index.html diff --git a/files/fr/web/css/motion_path/index.html b/files/fr/web/css/css_motion_path/index.html index e6740d2023..e6740d2023 100644 --- a/files/fr/web/css/motion_path/index.html +++ b/files/fr/web/css/css_motion_path/index.html diff --git a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index d12e2113d1..d12e2113d1 100644 --- a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html diff --git a/files/fr/web/css/comprendre_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html index 0c6c636886..0c6c636886 100644 --- a/files/fr/web/css/comprendre_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html diff --git a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html index de0cc3761f..de0cc3761f 100644 --- a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html diff --git a/files/fr/web/css/comprendre_z-index/exemple_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html index f155461dd4..f155461dd4 100644 --- a/files/fr/web/css/comprendre_z-index/exemple_1/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html diff --git a/files/fr/web/css/comprendre_z-index/exemple_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html index 75bbba62d9..75bbba62d9 100644 --- a/files/fr/web/css/comprendre_z-index/exemple_2/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html diff --git a/files/fr/web/css/comprendre_z-index/exemple_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html index 5530887ec2..5530887ec2 100644 --- a/files/fr/web/css/comprendre_z-index/exemple_3/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html diff --git a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index db892c51dc..db892c51dc 100644 --- a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html diff --git a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index 20fa6ab2ce..20fa6ab2ce 100644 --- a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html diff --git a/files/fr/web/css/css_questions_frequentes/index.html b/files/fr/web/css/css_questions_frequentes/index.html deleted file mode 100644 index 0d62552798..0000000000 --- a/files/fr/web/css/css_questions_frequentes/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Questions fréquentes en CSS -slug: Web/CSS/CSS_questions_frequentes -tags: - - CSS - - Débutant - - Exemple - - Guide -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -<h2 id="Pourquoi_mon_CSS_pourtant_valide_ne_fournit_pas_un_rendu_correct">Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?</h2> - -<p>Pour afficher un document, les navigateurs utilisent le <code>DOCTYPE</code> - contraction de l'anglais <em>document type</em>, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un <code>DOCTYPE</code> correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.</p> - -<p>Les navigateurs modernes ont deux modes de rendu :</p> - -<ul> - <li><em>Mode Quirk:</em> aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un <code>DOCTYPE</code> incomplet, incorrect ou manquant, ou avec une déclaration <code>DOCTYPE</code> en utilisation avant 2001 seront affichées en mode Quirks.</li> - <li><em>Mode Standard: </em>le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un <code>DOCTYPE</code> moderne seront affichées en mode Standard.</li> -</ul> - -<p>Les navigateurs basés sur Gecko ont un troisième mode <a href="/fr/docs/Mode_presque_standard_de_Gecko">Presque Standard</a> qui comporte quelques <em>quirks</em> mineurs.</p> - -<p>Voici une liste des <code>DOCTYPE</code> les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :</p> - -<pre class="brush: html"><!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque - navigateur moderne utilise un parseur HTML5, c'est le - doctype recommandé. */ - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"https://www.w3.org/TR/html4/loose.dtd"> - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"https://www.w3.org/TR/html4/strict.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></pre> - -<h2 id="Pourquoi_mon_CSS_qui_est_valide_n'est_pas_affiché_du_tout">Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?</h2> - -<p>Pour être appliqué, une feuille CSS doit être définie avec un type MIME <code>text/css</code>. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.</p> - -<h2 id="Quelle_est_la_différence_entre_id_et_class">Quelle est la différence entre <code>id</code> et <code>class</code> ?</h2> - -<p>Les éléments HTML peuvent posséder un attribut de type <code>id</code> et / ou <code>class</code>. L'attribut <code>id</code> assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut <code>class</code> assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en <code>id</code> et / ou en <code>class</code>.</p> - -<p>Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut <code>id</code>. Ces caractéristiques de style ne seront appliquées que sur cet <code>id</code> particulier.</p> - -<p>Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut <code>class</code>.</p> - -<p>Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type <code>label</code> et <code>form</code> ou pour décorer des éléments qui doivent être sémantiquement uniques.</p> - -<p>Voire <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs" title="Les sélecteurs CSS">Les sélecteurs CSS</a>.</p> - -<h2 id="Comment_revenir_à_la_valeur_par_défaut_d'un_propriété">Comment revenir à la valeur par défaut d'un propriété ?</h2> - -<p>Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.</p> - -<p>Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur <code><a href="/fr/docs/Web/CSS/initial">initial</a></code>. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.</p> - -<h2 id="Comment_créer_un_style_dérivant_d'un_autre">Comment créer un style dérivant d'un autre ?</h2> - -<p>CSS ne permet de faire dériver un style d'un autre. Voire <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">l'article d'Eric Meyer à propos de la position du groupe de travail</a>. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.</p> - -<h2 id="Comment_assigner_de_multiples_classes_à_un_élément">Comment assigner de multiples classes à un élément?</h2> - -<p>Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut <code>class</code> en séparant chaque classe d'un espace.</p> - -<pre class="brush: html"><style type="text/css"> -.news { background: black; color: white; } -.today { font-weight: bold; } -</style> - -<div class="news today"> -... content of today's news ... -</div> -</pre> - -<p>Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut <code>class</code> n'est pas pris en compte.</p> - -<h2 id="Pourquoi_mes_règles_ne_fonctionnent-elles_pas_correctement">Pourquoi mes règles ne fonctionnent-elles pas correctement ?</h2> - -<p>Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie <em>Règles de style CSS</em> de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.</p> - -<h3 id="Hiérarchie_des_éléments_HTML">Hiérarchie des éléments HTML</h3> - -<p>La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.</p> - -<pre class="brush: css">.news { - color: black; -} - -.corpName { - font-weight: bold; - color: red; -} -</pre> - -<pre class="brush: html"><!-- Le texte de l'annonce est en noir - mais le nom de l'entreprise est - en rouge gras --> -<div class="news"> (Reuters) - <span class="corpName">General Electric</span> - (GE.NYS) announced on Thursday... -</div> -</pre> - -<p>Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.</p> - -<h3 id="L'ordre_et_la_redéfinition_des_règles">L'ordre et la redéfinition des règles</h3> - -<p>Pour les feuilles de style CSS, <strong>l'ordre est important</strong>. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.</p> - -<pre class="brush: css">#stockTicker { - font-weight: bold; -} -.stockSymbol { - color: red; -} -/* D'autres règles */ -/* D'autres règles */ -/* D'autres règles */ -.stockSymbol { - font-weight: normal; -} -</pre> - -<p> </p> - -<pre class="brush: html"><!-- La plupart du texte est en gras sauf "GE", - qui est en rouge et sans graisse --> -<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div> - -</pre> - -<p>Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.</p> - -<h3 id="Utiliser_les_propriétés_raccourcies">Utiliser les propriétés raccourcies</h3> - -<p>Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.</p> - -<pre class="brush: css">#stockTicker { - font-size: 12px; - font-family: Verdana; - font-weight: bold; -} - -.stockSymbol { - font: 14px Arial; - color: red; -} -</pre> - -<pre class="brush: html"><div id="stockTicker"> - NYS: - <span class="stockSymbol"> - GE - </span> - +1.0 ... -</div></pre> - -<p>Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car <strong>l'ordre des règles est important</strong>.</p> - -<pre class="brush: css">#stockTicker { - font-weight: bold; - font: 12px Verdana; - /* font-weight vaut maintenant normal */ -} -</pre> - -<h3 id="Utiliser_le_sélecteur_*">Utiliser le sélecteur <code>*</code></h3> - -<p>Le sélecteur <code>*</code> fait référence à n'importe quel élément et doit donc être utilisé avec soin.</p> - -<pre class="brush: css">body * { - font-weight: normal; -} - -#stockTicker { - font: 12px Verdana; -} - -.corpName { - font-weight: bold; -} - -.stockUp { - color: red; -} -</pre> - -<pre class="brush: html"><div id="section"> - NYS: - <span class="corpName"> - <span class="stockUp"> - GE - </span> - </span> - +1.0 ... -</div></pre> - -<p>Dans cet exemple, le sélecteur <code>body *</code> cible tous les éléments à l'intérieur de <code>body</code>, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe <code>.stockUp</code>. Ainsi, la règle <code>font-weight: bold;</code> appliquée sur la classe <code>.corpName</code> est surchargée par la règle <code>font-weight: normal;</code> qui est appliquée à tous les éléments contenus dans <code>body</code>.</p> - -<p>Le sélecteur <code>*</code> doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.</p> - -<h3 id="La_spécificité_en_CSS">La spécificité en CSS</h3> - -<p>Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a>. Les styles <em>inline</em> (ceux déclarés via l'attribut HTML <code>style</code>) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.</p> - -<pre class="brush: css">div { - color: black; -} - -#orange { - color: orange; -} - -.green { - color: green; -} -</pre> - -<pre class="brush: html"><div id="orange" class="green" style="color: red;"> - Voici quelque chose qui sera rouge. -</div></pre> - -<p>Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire <a href="https://www.w3.org/TR/CSS21/cascade.html#specificity">le chapitre de la spécification CSS 2.1</a> ou <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">le chapitre correspondant de la section Apprendre</a>.</p> - -<h2 id="Quid_des_propriétés_-moz-*_-ms-*_-webkit-*_-o-*_et_-khtml-*">Quid des propriétés <code>-moz-*</code>, <code>-ms-*</code>, <code>-webkit-*</code>, <code>-o-*</code> et <code>-khtml-*</code> ?</h2> - -<p>Ces propriétés, appelées <em>propriétés préfixées</em>, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.</p> - -<p>Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.</p> - -<p>Pour plus d'informations <a href="/fr/docs/Web/CSS/Extensions_Mozilla">sur les extensions CSS de Mozilla, vous pouvez consulter la page associée</a>.</p> - -<h2 id="Quel_est_l'impact_de_z-index_sur_le_positionnement_des_éléments">Quel est l'impact de <code>z-index</code> sur le positionnement des éléments ?</h2> - -<p>La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.</p> - -<p>Un élément pour lequel <code>z-index</code> est plus grand qu'un autre sera toujours empilé « devant ».</p> - -<p>La propriété <code>z-index</code> ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut <code>absolute</code>, <code>relative</code> ou <code>fixed</code>).</p> diff --git a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html index 3ec397cfde..3ec397cfde 100644 --- a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html diff --git a/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html b/files/fr/web/css/css_scroll_snap/browser_compat/index.html index f5d6f97ca4..f5d6f97ca4 100644 --- a/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html +++ b/files/fr/web/css/css_scroll_snap/browser_compat/index.html diff --git a/files/fr/web/css/sélecteurs_css/index.html b/files/fr/web/css/css_selectors/index.html index a9d6f91d81..a9d6f91d81 100644 --- a/files/fr/web/css/sélecteurs_css/index.html +++ b/files/fr/web/css/css_selectors/index.html diff --git a/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index 8aeae8c255..8aeae8c255 100644 --- a/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/basic_shapes/index.html index e1c594bce0..e1c594bce0 100644 --- a/files/fr/web/css/css_shapes/formes_simples/index.html +++ b/files/fr/web/css/css_shapes/basic_shapes/index.html diff --git a/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html b/files/fr/web/css/css_shapes/from_box_values/index.html index 5ed5b06bfa..5ed5b06bfa 100644 --- a/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html +++ b/files/fr/web/css/css_shapes/from_box_values/index.html diff --git a/files/fr/web/css/css_shapes/aperçu_formes_css/index.html b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html index bf8d674cf3..bf8d674cf3 100644 --- a/files/fr/web/css/css_shapes/aperçu_formes_css/index.html +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html diff --git a/files/fr/web/css/css_shapes/générer_formes_images/index.html b/files/fr/web/css/css_shapes/shapes_from_images/index.html index e85db873c1..e85db873c1 100644 --- a/files/fr/web/css/css_shapes/générer_formes_images/index.html +++ b/files/fr/web/css/css_shapes/shapes_from_images/index.html diff --git a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html b/files/fr/web/css/css_transforms/using_css_transforms/index.html index c33a7e3ac9..c33a7e3ac9 100644 --- a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.html diff --git a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html b/files/fr/web/css/css_transitions/using_css_transitions/index.html index bbcdcb51e2..bbcdcb51e2 100644 --- a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html +++ b/files/fr/web/css/css_transitions/using_css_transitions/index.html diff --git a/files/fr/web/css/types_css/index.html b/files/fr/web/css/css_types/index.html index 28f95eeef4..28f95eeef4 100644 --- a/files/fr/web/css/types_css/index.html +++ b/files/fr/web/css/css_types/index.html diff --git a/files/fr/web/css/valeurs_et_unités_css/index.html b/files/fr/web/css/css_values_and_units/index.html index 0c1c4f9b57..0c1c4f9b57 100644 --- a/files/fr/web/css/valeurs_et_unités_css/index.html +++ b/files/fr/web/css/css_values_and_units/index.html diff --git a/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html b/files/fr/web/css/cssom_view/coordinate_systems/index.html index 543167b1b6..543167b1b6 100644 --- a/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html +++ b/files/fr/web/css/cssom_view/coordinate_systems/index.html diff --git a/files/fr/web/css/sélecteurs_descendant/index.html b/files/fr/web/css/descendant_combinator/index.html index 5690dd95e7..5690dd95e7 100644 --- a/files/fr/web/css/sélecteurs_descendant/index.html +++ b/files/fr/web/css/descendant_combinator/index.html diff --git a/files/fr/web/css/timing-function/index.html b/files/fr/web/css/easing-function/index.html index 4170f065b1..4170f065b1 100644 --- a/files/fr/web/css/timing-function/index.html +++ b/files/fr/web/css/easing-function/index.html diff --git a/files/fr/web/css/filter-function/url/index.html b/files/fr/web/css/filter-function/url/index.html deleted file mode 100644 index a31d8c3342..0000000000 --- a/files/fr/web/css/filter-function/url/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: url() -slug: Web/CSS/filter-function/url -tags: - - CSS - - Junk - - Reference -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url ---- -<div>{{CSSRef}}</div> - -<p>La fonction <strong><code>url()</code></strong> permet d'utiliser un <a href="/fr/docs/Web/SVG/Element/filter">filtre SVG</a> afin de modifier l'apparence d'une image.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">url(<em>emplacement</em>)</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>emplacement</code></dt> - <dd>L'URL ({{cssxref("<url>")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.</dd> -</dl> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: css">url(ressources.svg#c1)</pre> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("<filter-function>")}}</li> -</ul> diff --git a/files/fr/web/css/filters_effects/index.html b/files/fr/web/css/filters_effects/index.html deleted file mode 100644 index 6976999a5f..0000000000 --- a/files/fr/web/css/filters_effects/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Filters Effects -slug: Web/CSS/Filters_Effects -tags: - - CSS - - Reference -translation_of: Web/CSS/Filter_Effects -translation_of_original: Web/CSS/Filters_Effects ---- -<div>{{CSSRef}}</div> - -<p><em><strong>Filter Effects</strong></em> (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés_CSS">Propriétés CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("filter")}}</li> -</ul> -</div> - -<h3 id="Fonctions_CSS">Fonctions CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("filter", "blur()", "#blur()")}}</li> - <li>{{cssxref("filter", "brightness()", "#brightness()")}}</li> - <li>{{cssxref("filter", "contrast()", "#contrast()")}}</li> - <li>{{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}</li> - <li>{{cssxref("filter", "grayscale()", "#grayscale()")}}</li> - <li>{{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}</li> - <li>{{cssxref("filter", "invert()", "#invert()")}}</li> - <li>{{cssxref("filter", "opacity()", "#opacity()")}}</li> - <li>{{cssxref("filter", "saturate()", "#saturate()")}}</li> - <li>{{cssxref("filter", "sepia()", "#sepia()")}}</li> - <li>{{cssxref("filter", "url()", "#url()")}}</li> -</ul> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop(35)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td> - <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Edge</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simle</td> - <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop(35)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td> - <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p> - </td> - </tr> - </tbody> -</table> -</div> diff --git a/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html b/files/fr/web/css/general_sibling_combinator/index.html index ea97bdbf67..ea97bdbf67 100644 --- a/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html +++ b/files/fr/web/css/general_sibling_combinator/index.html diff --git a/files/fr/web/css/grid-column-gap/index.html b/files/fr/web/css/grid-column-gap/index.html deleted file mode 100644 index 05b3e559d2..0000000000 --- a/files/fr/web/css/grid-column-gap/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: grid-column-gap -slug: Web/CSS/grid-column-gap -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-gap -translation_of_original: Web/CSS/grid-column-gap ---- -<div>{{CSSRef}}{{Deprecated_Header}}</div> - -<div class="note"> -<p><strong>Note :</strong> La propriété <code>grid-column-gap</code> a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.</p> -</div> - -<p>La propriété <strong><code>grid-column-gap</code></strong> définit l'espacement entre les colonnes d'une grille.</p> - -<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css no-line-numbers">/* Valeurs de longueur */ -grid-column-gap: 20px; -grid-column-gap: 1em; -grid-column-gap: 3vmin; -grid-column-gap: 0.5cm; - -/* Valeurs relatives à la taille */ -/* de l'élément englobant */ -/* Type <percentage> */ -grid-column-gap: 10%; - -/* Valeurs globales */ -grid-column-gap: inherit; -grid-column-gap: initial; -grid-column-gap: unset; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight[6]">#grid { - display: grid; - height: 100px; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: 100px; - grid-column-gap: 20px; -} - -#grid > div { - background-color: lime; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="grid"> - <div></div> - <div></div> - <div></div> -</div></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.properties.grid-column-gap")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Versions standards non-préfixées : - <ul> - <li>{{cssxref("row-gap")}},</li> - <li>{{cssxref("column-gap")}},</li> - <li>{{cssxref("gap")}}</li> - </ul> - </li> - <li>{{cssxref("grid-row-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de bases : les gouttières</a></li> -</ul> diff --git a/files/fr/web/css/sélecteurs_d_id/index.html b/files/fr/web/css/id_selectors/index.html index aa9a2141bc..aa9a2141bc 100644 --- a/files/fr/web/css/sélecteurs_d_id/index.html +++ b/files/fr/web/css/id_selectors/index.html diff --git a/files/fr/web/css/implémentation_des_brouillons_css/index.html b/files/fr/web/css/implémentation_des_brouillons_css/index.html deleted file mode 100644 index 98f3c88b72..0000000000 --- a/files/fr/web/css/implémentation_des_brouillons_css/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Implémentation des fonctionnalités CSS à l'état de brouillon -slug: Web/CSS/Implémentation_des_Brouillons_CSS -tags: - - CSS - - Draft - - NeedsContent -translation_of: Web/CSS/Mozilla_Extensions -translation_of_original: Web/CSS/Draft_Implementations_of_CSS_Features ---- -<div>{{CSSRef}}{{Draft}}</div> - -<div class="warning"> -<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p> - -<ul> - <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li> -</ul> -</div> - -<p>Mozilla gère un certain nombre d'extensions <a href="/fr/docs/Web/CSS" title="en/CSS">CSS</a> préfixées par<code> -moz-</code>. La liste suivante contient toutes les extensions Mozilla correspondant aux implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.</p> - -<h3 id="Propriétés">Propriétés</h3> - -<p>...</p> - -<h3 id="Valeurs">Valeurs</h3> - -<p>...</p> - -<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3> - -<p>...</p> - -<h3 id="Règles_At">Règles At</h3> - -<p>...</p> - -<h3 id="Requêtes_de_média">Requêtes de média</h3> - -<p>...</p> - -<h3 id="Autres">Autres</h3> - -<p>...</p> diff --git a/files/fr/web/css/index/index.html b/files/fr/web/css/index/index.html deleted file mode 100644 index aa0bcd3253..0000000000 --- a/files/fr/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Index de la documentation CSS -slug: Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index ---- -<p>{{Index("/fr/docs/Web/CSS")}}</p> diff --git a/files/fr/web/css/héritage/index.html b/files/fr/web/css/inheritance/index.html index c5595da1e4..c5595da1e4 100644 --- a/files/fr/web/css/héritage/index.html +++ b/files/fr/web/css/inheritance/index.html diff --git a/files/fr/web/css/valeur_initiale/index.html b/files/fr/web/css/initial_value/index.html index eedda54344..eedda54344 100644 --- a/files/fr/web/css/valeur_initiale/index.html +++ b/files/fr/web/css/initial_value/index.html diff --git a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html b/files/fr/web/css/inline_formatting_context/index.html index bb40bcce6d..bb40bcce6d 100644 --- a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html +++ b/files/fr/web/css/inline_formatting_context/index.html 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 +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>inset-block-end</code></strong> définit la fin du décalage logique en bloc (<em>block</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-block-end</code>. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 a mis à jour le nom de la propriété</a> afin de s'accorder avec les modifications apportées à la spécification.</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ +/* Type <length> */ +inset-block-end: 3px; +inset-block-end: 2.4em; + +/* Valeurs relatives à la largeur */ +/* du bloc englobant */ +/* Type <percentage> */ +inset-block-end: 10%; + +/* Valeurs avec un mot-clé */ +inset-block-end: auto; + +/* Valeurs globales */ +inset-block-end: inherit; +inset-block-end: initial; +inset-block-end: unset; +</pre> + +<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La propriété <code>inset-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="exemple">Texte pour l'exemple</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exemple { + writing-mode: vertical-lr; + position: relative; + inset-block-end: 20px; + background-color: #c8c800; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.inset-block-end")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés physiques correspondantes : + <ul> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("left")}}</li> + </ul> + </li> + <li>Les autres propriétés qui définissent les décalages logiques + <ul> + <li>{{cssxref("inset-block-start")}}</li> + <li>{{cssxref("inset-inline-start")}}</li> + <li>{{cssxref("inset-inline-end")}}</li> + </ul> + </li> + <li>{{cssxref("writing-mode")}}</li> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/fr/web/css/inset-block-start/index.html b/files/fr/web/css/inset-block-start/index.html new file mode 100644 index 0000000000..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 +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>inset-block-start</code></strong> définit le début du décalage logique en bloc (<em>block</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-block-start</code>. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 a mis à jour son implémentation</a> afin de suivre les modifications apportées à la spécification.</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ +/* Type <length> */ +inset-block-start: 3px; +inset-block-start: 2.4em; + +/* Valeurs relatives à la largeur */ +/* du bloc englobant */ +/* Type <percentage> */ +inset-block-start: 10%; + +/* Valeurs avec un mot-clé */ +inset-block-start: auto; + +/* Valeurs globales */ +inset-block-start: inherit; +inset-block-start: initial; +inset-block-start: unset; +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La propriété <code>inset-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="exemple">Texte pour l'exemple</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exemple { + writing-mode: vertical-lr; + position: relative; + inset-block-start: 20px; + background-color: #c8c800; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.inset-block-start")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés physiques correspondantes : + <ul> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("left")}}</li> + </ul> + </li> + <li>Les propriétés qui définissent les autres décalages logiques + <ul> + <li>{{cssxref("inset-block-end")}}</li> + <li>{{cssxref("offset-inline-end")}}</li> + <li>{{cssxref("offset-inline-start")}}</li> + </ul> + </li> + <li>{{cssxref("writing-mode")}}</li> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/fr/web/css/inset-inline-end/index.html b/files/fr/web/css/inset-inline-end/index.html new file mode 100644 index 0000000000..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 +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>inset-inline-end</code></strong> définit la fin du décalage logique en ligne (<em>inline</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-inline-end</code>. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 a mis à jour son implémentation</a> afin de suivre les modifications apportées à la spécification.</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ +/* Type <length> */ +inset-inline-end: 3px; +inset-inline-end: 2.4em; + +/* Valeurs relatives à la largeur */ +/* du bloc englobant */ +/* Type <percentage> */ +inset-inline-end: 10%; + +/* Valeurs avec un mot-clé */ +inset-inline-end: auto; + +/* Valeurs globales */ +inset-inline-end: inherit; +inset-inline-end: initial; +inset-inline-end: unset; +</pre> + +<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La propriété <code>inset-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="exemple">Texte pour l'exemple</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exemple { + writing-mode: vertical-lr; + position: relative; + inset-inline-end: 20px; + background-color: #c8c800; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.inset-inline-end")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés physiques correspondantes : + <ul> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("left")}}</li> + </ul> + </li> + <li>{{cssxref("writing-mode")}}</li> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("text-orientation")}}</li> + <li>Les propriétés qui définissent les autres décalages : + <ul> + <li>{{cssxref("inset-block-start")}},</li> + <li>{{cssxref("inset-block-end")}},</li> + <li>{{cssxref("inset-inline-start")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/css/inset-inline-start/index.html b/files/fr/web/css/inset-inline-start/index.html new file mode 100644 index 0000000000..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 +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>inset-inline-start</code></strong> définit le début du décalage logique en ligne (<em>inline</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-inline-start</code>. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 a mis à jour son implémentation</a> afin de suivre les modifications apportées à la spécification.</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ +/* Type <length> */ +inset-inline-start: 3px; +inset-inline-start: 2.4em; + +/* Valeurs relatives à la largeur */ +/* du bloc englobant */ +/* Type <percentage> */ +inset-inline-start: 10%; + +/* Valeurs avec un mot-clé */ +inset-inline-start: auto; + +/* Valeurs globales */ +inset-inline-start: inherit; +inset-inline-start: initial; +inset-inline-start: unset; +</pre> + +<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}} qui permettent de définir les autres décalages de l'élément.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La propriété <code>inset-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="exemple">Texte pour l'exemple</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exemple { + writing-mode: vertical-lr; + position: relative; + inset-inline-start: 20px; + background-color: #c8c800; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.inset-inline-start")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés physiques correspondantes : + <ul> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("left")}}</li> + </ul> + </li> + <li>Les autres propriétés qui définissent les autres décalages : {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}}</li> + <li>{{cssxref("writing-mode")}}</li> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html index 8ba8d1ea7e..8ba8d1ea7e 100644 --- a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html +++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/card/index.html index f363a49f0d..f363a49f0d 100644 --- a/files/fr/web/css/layout_cookbook/carte/index.html +++ b/files/fr/web/css/layout_cookbook/card/index.html diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/center_an_element/index.html index c4d1fb52c3..c4d1fb52c3 100644 --- a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.html diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/column_layouts/index.html index 140cc9a35a..140cc9a35a 100644 --- a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.html diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html index 7223cde7ef..7223cde7ef 100644 --- a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html index b356d20339..b356d20339 100644 --- a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html index 6c3f1d171f..6c3f1d171f 100644 --- a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html +++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html diff --git a/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html b/files/fr/web/css/layout_cookbook/split_navigation/index.html index 24cc872422..24cc872422 100644 --- a/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html +++ b/files/fr/web/css/layout_cookbook/split_navigation/index.html diff --git a/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html b/files/fr/web/css/layout_cookbook/sticky_footers/index.html index be032d79cd..be032d79cd 100644 --- a/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html +++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.html diff --git a/files/fr/web/css/mode_de_mise_en_page/index.html b/files/fr/web/css/layout_mode/index.html index 377b162194..377b162194 100644 --- a/files/fr/web/css/mode_de_mise_en_page/index.html +++ b/files/fr/web/css/layout_mode/index.html diff --git a/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html b/files/fr/web/css/list_of_proprietary_css_features/index.html index 2c88258187..2c88258187 100644 --- a/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html +++ b/files/fr/web/css/list_of_proprietary_css_features/index.html diff --git a/files/fr/web/css/requêtes_média/index.html b/files/fr/web/css/media_queries/index.html index 58c6cdc73e..58c6cdc73e 100644 --- a/files/fr/web/css/requêtes_média/index.html +++ b/files/fr/web/css/media_queries/index.html diff --git a/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html b/files/fr/web/css/media_queries/testing_media_queries/index.html index 39539a5749..39539a5749 100644 --- a/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html +++ b/files/fr/web/css/media_queries/testing_media_queries/index.html diff --git a/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html index 4dc71551de..4dc71551de 100644 --- a/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html +++ b/files/fr/web/css/media_queries/using_media_queries/index.html diff --git a/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html index 3ff2740bd8..3ff2740bd8 100644 --- a/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html +++ b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html diff --git a/files/fr/web/css/extensions_css_microsoft/index.html b/files/fr/web/css/microsoft_extensions/index.html index 017958249c..017958249c 100644 --- a/files/fr/web/css/extensions_css_microsoft/index.html +++ b/files/fr/web/css/microsoft_extensions/index.html diff --git a/files/fr/web/css/extensions_mozilla/index.html b/files/fr/web/css/mozilla_extensions/index.html index 3d9acbff04..3d9acbff04 100644 --- a/files/fr/web/css/extensions_mozilla/index.html +++ b/files/fr/web/css/mozilla_extensions/index.html diff --git a/files/fr/web/css/none/index.html b/files/fr/web/css/none/index.html deleted file mode 100644 index 471bfdc5af..0000000000 --- a/files/fr/web/css/none/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: none -slug: Web/CSS/none -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/float -translation_of_original: Web/CSS/none ---- -<p>{{ CSSRef() }}</p> -<h2 id="Résumé">Résumé</h2> -<p><code>none</code> est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p> -<h2 id="Utilisation">Utilisation</h2> -<div class="warning"> - Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div> -<ul> - <li>{{ Cssxref("animation-name") }}</li> - <li>{{ Cssxref("background-image") }}</li> - <li>{{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}</li> - <li>{{ Cssxref("clear") }}</li> - <li>{{ Cssxref("content") }}</li> - <li>{{ Cssxref("display") }}</li> - <li>{{ Cssxref("float") }}</li> - <li>{{ Cssxref("font-size-adjust") }}</li> - <li>{{ Cssxref("list-style-image") }}</li> - <li>{{ Cssxref("list-style-type") }}</li> - <li>{{ Cssxref("max-height") }}</li> - <li>{{ Cssxref("max-width") }}</li> - <li>{{ Cssxref("outline-style") }}</li> - <li>{{ Cssxref("quotes") }}</li> - <li>{{ Cssxref("resize") }}</li> - <li>{{ Cssxref("text-decoration") }}</li> - <li>{{ Cssxref("text-transform") }}</li> -</ul> -<p><u><strong>Extensions Mozilla :</strong></u></p> -<ul> - <li>{{ Cssxref("-moz-transform") }}</li> - <li>{{ Cssxref("-moz-transition-property") }}</li> - <li>{{ Cssxref("-moz-text-blink") }}</li> - <li>{{ Cssxref("-moz-user-input") }}</li> - <li>{{ Cssxref("-moz-user-select") }}</li> - <li>{{ Cssxref("-moz-window-shadow") }}</li> -</ul> diff --git a/files/fr/web/css/normal/index.html b/files/fr/web/css/normal/index.html deleted file mode 100644 index 5b611f0369..0000000000 --- a/files/fr/web/css/normal/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal ---- -<p>{{ CSSRef() }}</p> -<h2 id="Résumé">Résumé</h2> -<p><code>normal</code> est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p> -<h2 id="Utilisation">Utilisation</h2> -<div class="warning"> - Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div> -<ul> - <li>{{ Cssxref("animation-direction") }}</li> - <li>{{ Cssxref("content") }}</li> - <li>{{ Cssxref("counter-increment") }}</li> - <li>{{ Cssxref("counter-reset") }}</li> - <li>{{ Cssxref("font-style") }}</li> - <li>{{ Cssxref("font-variant") }}</li> - <li>{{ Cssxref("font-weight") }}</li> - <li>{{ Cssxref("letter-spacing") }}</li> - <li>{{ Cssxref("white-space") }}</li> - <li>{{ Cssxref("word-spacing") }}</li> - <li>{{ Cssxref("word-wrap") }}</li> -</ul> -<p><u><strong>Extensions Mozilla :</strong></u></p> -<ul> - <li>{{ Cssxref("-moz-appearance") }}</li> - <li>{{ Cssxref("-moz-box-direction") }}</li> - <li>{{ Cssxref("-moz-column-gap") }}</li> - <li>{{ Cssxref("-moz-column-rule-width") }}</li> -</ul> -<p>{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}</p> diff --git a/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html index e50bb21aa3..e50bb21aa3 100644 --- a/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html diff --git a/files/fr/web/css/média_paginés/index.html b/files/fr/web/css/paged_media/index.html index 9d114b8e9b..9d114b8e9b 100644 --- a/files/fr/web/css/média_paginés/index.html +++ b/files/fr/web/css/paged_media/index.html diff --git a/files/fr/web/css/type_position/index.html b/files/fr/web/css/position_value/index.html index 03ddd68285..03ddd68285 100644 --- a/files/fr/web/css/type_position/index.html +++ b/files/fr/web/css/position_value/index.html diff --git a/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html index 5f5a3655e8..5f5a3655e8 100644 --- a/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html +++ b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html diff --git a/files/fr/web/css/pseudo-éléments/index.html b/files/fr/web/css/pseudo-elements/index.html index 4f9ce9eeb9..4f9ce9eeb9 100644 --- a/files/fr/web/css/pseudo-éléments/index.html +++ b/files/fr/web/css/pseudo-elements/index.html diff --git a/files/fr/web/css/élément_remplacé/index.html b/files/fr/web/css/replaced_element/index.html index eaa2f4d82a..eaa2f4d82a 100644 --- a/files/fr/web/css/élément_remplacé/index.html +++ b/files/fr/web/css/replaced_element/index.html diff --git a/files/fr/web/css/valeur_résolue/index.html b/files/fr/web/css/resolved_value/index.html index 8ce7a5b45a..8ce7a5b45a 100644 --- a/files/fr/web/css/valeur_résolue/index.html +++ b/files/fr/web/css/resolved_value/index.html diff --git a/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html b/files/fr/web/css/scaling_of_svg_backgrounds/index.html index ecd528838c..ecd528838c 100644 --- a/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html +++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.html diff --git a/files/fr/web/css/shape-box/index.html b/files/fr/web/css/shape-box/index.html deleted file mode 100644 index de7ad2607a..0000000000 --- a/files/fr/web/css/shape-box/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: <shape-box> -slug: Web/CSS/shape-box -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/shape-outside -translation_of_original: Web/CSS/shape-box ---- -<div>{{CSSRef}}</div> - -<p>Le type de donnée CSS <strong><code><shape-box></code></strong> permet de définir des formes relatives aux boîtes de l'élément (voir <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a>), notamment pour la propriété {{cssxref("shape-outside")}}.</p> - -<h2 id="Valeurs">Valeurs</h2> - -<dl> - <dt><code>margin-box</code></dt> - <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio <code>border-radius</code> / <code>margin</code> est supérieur ou égal à 1, le rayon du coin de la boîte sera <code>border-radius</code> + <code>margin</code>. Si le ratio <code>border-radius / margin</code> est inférieur à 1, le rayon du coin de la boîte sera <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd> - <dt><code>border-box</code></dt> - <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd> - <dt><code>padding-box</code></dt> - <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (<em>padding</em>). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd> - <dt><code>content-box</code></dt> - <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre <code>0</code> et <code>border-radius</code> - <code>border-width</code> - <code>padding</code>.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.main { - width: 500px; - height: 200px; -} - -.left { - -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); - float: left; - width: 40%; - height: 12ex; - background-color: lightgray; - -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); -} - -.right { - -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); - float: right; - width: 40%; - height: 12ex; - background-color: lightgray; - -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); -} - -p { - text-align: center; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="main"> - <div class="left"></div> - <div class="right"></div> - <p> - Sometimes a web page's text content appears to be - funneling your attention towards a spot on the page - to drive you to follow a particular link. Sometimes - you don't notice. - </p> -</div></pre> - -<h3 id="Résultat">Résultat</h3> - -<h3 id="EmbedLiveSample('Exemples'100100)">{{EmbedLiveSample('Exemples',"100%","100%")}}</h3> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{compatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{compatVersionUnknown}}</td> - </tr> - <tr> - <td>\xx</td> - <td>{{compatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{compatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Fonctionnalité</th> - <th>Android</th> - <th>Chrome pour Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support simple</td> - <td>{{compatVersionUnknown}}</td> - <td>{{compatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{compatVersionUnknown}}</td> - </tr> - <tr> - <td>\xx</td> - <td>{{compatVersionUnknown}}</td> - <td>{{compatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{compatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("shape-outside")}}</li> - <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li> -</ul> diff --git a/files/fr/web/css/propriétés_raccourcies/index.html b/files/fr/web/css/shorthand_properties/index.html index 6c390b9dc8..6c390b9dc8 100644 --- a/files/fr/web/css/propriétés_raccourcies/index.html +++ b/files/fr/web/css/shorthand_properties/index.html diff --git a/files/fr/web/css/valeur_spécifiée/index.html b/files/fr/web/css/specified_value/index.html index 14eb3d9e5a..14eb3d9e5a 100644 --- a/files/fr/web/css/valeur_spécifiée/index.html +++ b/files/fr/web/css/specified_value/index.html diff --git a/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html b/files/fr/web/css/tools/cubic_bezier_generator/index.html index 6a4671d141..6a4671d141 100644 --- a/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html +++ b/files/fr/web/css/tools/cubic_bezier_generator/index.html diff --git a/files/fr/web/css/outils/index.html b/files/fr/web/css/tools/index.html index ac78261ad4..ac78261ad4 100644 --- a/files/fr/web/css/outils/index.html +++ b/files/fr/web/css/tools/index.html diff --git a/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html b/files/fr/web/css/tools/linear-gradient_generator/index.html index ae2340fd73..ae2340fd73 100644 --- a/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html +++ b/files/fr/web/css/tools/linear-gradient_generator/index.html diff --git a/files/fr/web/css/sélecteurs_de_type/index.html b/files/fr/web/css/type_selectors/index.html index adf931d9fe..adf931d9fe 100644 --- a/files/fr/web/css/sélecteurs_de_type/index.html +++ b/files/fr/web/css/type_selectors/index.html diff --git a/files/fr/web/css/sélecteurs_universels/index.html b/files/fr/web/css/universal_selectors/index.html index 470d27160c..470d27160c 100644 --- a/files/fr/web/css/sélecteurs_universels/index.html +++ b/files/fr/web/css/universal_selectors/index.html diff --git a/files/fr/web/css/url/index.html b/files/fr/web/css/url/index.html deleted file mode 100644 index d68db30cfe..0000000000 --- a/files/fr/web/css/url/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: <url> -slug: Web/CSS/url -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -<div>{{CSSRef}}</div> - -<p>Le type de donnée CSS <strong><code><url></code></strong> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle <code>url()</code>. Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.</p> - -<div class="note"><strong>Note : URI ou URL ?</strong><br> -<br> -Une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> est différente d'une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Name">URN</a> d'une ressource.<br> -<br> -Pour la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <code><url></code> bien qu'il n'était pas défini explicitement).<br> -<br> -Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car <code>url()</code> était utilisée pour créer une valeur de type <code><uri></code>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.<br> -<br> -Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle <code>url()</code> représente donc une valeur de type <code><url></code> et plus une valeur de type <code><uri></code>.<br> -<br> -Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<p>L'URL peut être indiquée telle quelle comme argument de la fonction <code>url()</code>et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).</p> - -<pre class="syntaxbox"> <propriété_css>: url("http://monsite.exemple.com/curseur.png") - <propriété_css>: url("http://monsite.exemple.com/curseur.png") - <propriété_css>: url(http://monsite.exemple.com/curseur.png) -</pre> - -<div class="note"> -<p><strong>Note :</strong> Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir {{bug(752230)}} pour plus d'informations.</p> -</div> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">ul { - list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><ul> - <li>Élément 1</li> - <li>Élément 2</li> -</ul> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemples')}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>Aucune modification significative.</td> - </tr> - <tr> - <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Aucune modification significative.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#url', '<url>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("css.types.url")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("url()", "url()")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/valeur_utilisée/index.html b/files/fr/web/css/used_value/index.html index df94445fd7..df94445fd7 100644 --- a/files/fr/web/css/valeur_utilisée/index.html +++ b/files/fr/web/css/used_value/index.html diff --git a/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html b/files/fr/web/css/value_definition_syntax/index.html index 2acb4d1da7..2acb4d1da7 100644 --- a/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html +++ b/files/fr/web/css/value_definition_syntax/index.html diff --git a/files/fr/web/css/concepts_viewport/index.html b/files/fr/web/css/viewport_concepts/index.html index 56143515c0..56143515c0 100644 --- a/files/fr/web/css/concepts_viewport/index.html +++ b/files/fr/web/css/viewport_concepts/index.html diff --git a/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html b/files/fr/web/css/visual_formatting_model/index.html index d9ac8b3f09..d9ac8b3f09 100644 --- a/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html +++ b/files/fr/web/css/visual_formatting_model/index.html diff --git a/files/fr/web/démos_de_technologies_open_web/index.html b/files/fr/web/demos_of_open_web_technologies/index.html index 3e2c7b1783..3e2c7b1783 100644 --- a/files/fr/web/démos_de_technologies_open_web/index.html +++ b/files/fr/web/demos_of_open_web_technologies/index.html diff --git a/files/fr/web/events/abort/index.html b/files/fr/web/events/abort/index.html deleted file mode 100644 index 68e28e9626..0000000000 --- a/files/fr/web/events/abort/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -<div>L'événement <strong>abort</strong> est déclenché lorsque le chargement d'une resource a été interrompu.</div> - -<div> </div> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/UIEvent">UIEvent</a> si généré à partir de l'interface utilisateur sinon, <a href="/fr/docs/Web/API/Event">Event</a>.</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> diff --git a/files/fr/web/events/ended_(web_audio)/index.html b/files/fr/web/events/ended_(web_audio)/index.html deleted file mode 100644 index 950e8ef545..0000000000 --- a/files/fr/web/events/ended_(web_audio)/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: ended (Web Audio) -slug: Web/Events/ended_(Web_Audio) -translation_of: Web/API/HTMLMediaElement/ended_event -translation_of_original: Web/Events/ended_(Web_Audio) ---- -<div> -<p>L'événement <strong>ended </strong>est déclenché lorsque la lecture s'est arrêté parce que la fin du média a été atteinte.</p> -</div> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;">{{SpecName("Web Audio API")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("AudioBufferSourceNode")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Evénements_liés">Evénements liés</h2> - -<ul> - <li>{{event("playing")}}</li> - <li>{{event("waiting")}}</li> - <li>{{event("seeking")}}</li> - <li>{{event("seeked")}}</li> - <li>{{event("ended")}}</li> - <li>{{event("loadedmetadata")}}</li> - <li>{{event("loadeddata")}}</li> - <li>{{event("canplay")}}</li> - <li>{{event("canplaythrough")}}</li> - <li>{{event("durationchange")}}</li> - <li>{{event("timeupdate")}}</li> - <li>{{event("play")}}</li> - <li>{{event("pause")}}</li> - <li>{{event("ratechange")}}</li> - <li>{{event("volumechange")}}</li> - <li>{{event("suspend")}}</li> - <li>{{event("emptied")}}</li> - <li>{{event("stalled")}}</li> -</ul> diff --git a/files/fr/web/guide/ajax/communauté/index.html b/files/fr/web/guide/ajax/community/index.html index 64b1ea683b..64b1ea683b 100644 --- a/files/fr/web/guide/ajax/communauté/index.html +++ b/files/fr/web/guide/ajax/community/index.html diff --git a/files/fr/web/guide/ajax/premiers_pas/index.html b/files/fr/web/guide/ajax/getting_started/index.html index bce7938f0f..bce7938f0f 100644 --- a/files/fr/web/guide/ajax/premiers_pas/index.html +++ b/files/fr/web/guide/ajax/getting_started/index.html diff --git a/files/fr/web/guide/api/webrtc/index.html b/files/fr/web/guide/api/webrtc/index.html deleted file mode 100644 index 2d516d62d5..0000000000 --- a/files/fr/web/guide/api/webrtc/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: WebRTC -slug: Web/Guide/API/WebRTC -tags: - - Intro - - WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: Web/Guide/API/WebRTC ---- -<p><strong>WebRTC</strong> (où RTC signifie Real-Time Communications -Communications en temps réel-) est une technologie qui permet la transmission en continue (streaming) de l'audio/vidéo et le partage de données entre les navigateurs clients (peers). Comme un ensemble de normes (standards), le WebRTC fournit à n'importe quel navigateur la capacité de partager des données d'application et d'effectuer des téléconférences d’égal à égal, sans avoir à installer quelques plug-ins ou logiciels tiers.</p> -<p>Les composants WebRTC sont accessibles grâce aux APIs JavaScript : l'API de flux réseau (Network Stream), qui représente un flux de données audio ou vidéo ; l'API de Connexion (PeerConnection), qui permet à plusieurs utilisateurs de communiquer via leurs navigateurs ; et l'API DataChannel qui permet la communication d'autres types de données pour le jeu en temps réel, dialogue en ligne, transfert de fichiers, etc.</p> -<div class="note"> - <p><strong>Note:</strong> Cette documentation n'est pas à jour et est un travail en cours. <strong>Vous voulez aider?</strong> Nous avons besoin de personnes pour parcourir ces docs et les mettre à jour, tout autant que de documenter les APIs dans notre référence d’API! Consultez notre guide à la page <a href="/fr/docs/MDN/Débuter_sur_MDN">Débuter sur MDN</a> si vous voulez aider.</p> -</div> -<h2 id="Guide">Guide</h2> -<dl> - <dt> - <a href="/fr/docs/WebRTC/Introduction" title="/fr/docs/WebRTC/Introduction">Introduction au WebRTC</a></dt> - <dd> - Guide d'introduction à ce qu’est WebRTC et comment ça marche.</dd> - <dt> - <a href="/fr/docs/WebRTC/communication-de-pair-a-pair-avec-WebRTC" title="Communication de pair-à-pair avec WebRTC">Communications Peer-to-peer avec WebRTC</a></dt> - <dd> - Comment faire pour effectuer des communications peer-to-peer en utilisant les APIs WebRTC.</dd> - <dt> - <a href="/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam" title="Prendre des photos avec la webcam">Prendre des photos avec la webcam</a></dt> - <dd> - Un guide d'introduction à ce qu’est WebRTC et à comment ça marche.</dd> - <dt> - <a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Introduction à l'architecture WebRTC</a></dt> - <dd> - <strong>(AKA "WebRTC et l'océan des acronymes")</strong> WebRTC a beaucoup de parties différentes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer qu’elles sont toutes les pièces, et comment elles s'imbriquent.</dd> - <dt> - <a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_basics" title="/fr/docs/Web/Guide/API/WebRTC/WebRTC_basics">L’essentiel du WebRTC</a></dt> - <dd> - Maintenant que vous comprenez l'architecture WebRTC, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application multi-navigateur RTC simple.</dd> -</dl> -<h2 id="Référence">Référence</h2> -<dl> - <dt> - <a href="/fr/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a></dt> - <dd> - L'API pour capturer des médias (audio/video).</dd> - <dt> - <a href="/fr/docs/Web/API/RTCPeerConnection">RTCPeerConnection</a></dt> - <dd> - L'interface traitant en continu des données entre deux pairs.</dd> - <dt> - <a href="/fr/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> - <dd> - L'interface pour l'envoi des données arbitraires à travers la connexion de pair (peer connection).</dd> -</dl> diff --git a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html new file mode 100644 index 0000000000..72bd60d899 --- /dev/null +++ b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html @@ -0,0 +1,97 @@ +--- +title: Communication de pair-à-pair avec WebRTC +slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC +translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC +--- +<p>{{SeeCompatTable}}</p> +<p class="syntaxbox">Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi <code>navigator.mozGetUserMedia()</code> à accéder au microphone et à la webcam (<code>getUserMedia()</code> est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).</p> +<p class="syntaxbox">La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html" title="http://dev.w3.org/2011/webrtc/editor/webrtc.html">WebRTC</a> et <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2009/dap/camera/">getUserMedia</a>, ainsi que différents brouillons de IETF, principalement du <a href="http://tools.ietf.org/wg/rtcweb/">groupe de travail rtcweb</a>, mais aussi <a href="http://tools.ietf.org/wg/mmusic/">mmusic</a>, <a href="http://tools.ietf.org/wg/rmcat/">rmcat</a> et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à <a href="http://www.webrtc.org/reference">webrtc.org</a>.</p> +<p style="margin-left: 40px;"><span style="color: #ff0000;"><strong>NOTE</strong></span>: Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <code><video></code> par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons.</p> +<p>Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/">HTML5 Rocks</a>. On pourra trouver sur le site <a href="http://mozilla.github.com/webrtc-landing" style="line-height: inherit;" title="http://mozilla.github.com/webrtc-landing">webrtc-landing</a> u<span style="line-height: inherit;">ne série de page de test basique</span><span style="line-height: inherit;">.</span></p> +<p><span style="line-height: inherit;">Il est possible de faire un appel simple de personne à personne (y compris à ceux utilisant Chrome) à </span><a href="https://apprtc.appspot.com/" style="line-height: inherit;" title="https://apprtc.appspot.com/">apprtc.appspot.com</a>.</p> +<p>Un article de <a href="https://hacks.mozilla.org/category/webrtc/">Hacks</a> décrit avec précision ce qu'il se passe dans une connexion <code>RTCPeerConnecion </code>(<a href="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/">lien</a>) :</p> +<p><img alt="Basics of RTCPeerConnection call setup" src="https://hacks.mozilla.org/wp-content/uploads/2013/05/webRTC-BasicsOfHowItWorks2.png" style="line-height: inherit; width: 898px; height: 805px;"></p> +<h2 id="Spécifications">Spécifications</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>WebRTC API</td> + <td>En cours de définition</td> + <td> </td> + </tr> + <tr> + <td>getUserMedia API</td> + <td>En cours definition</td> + <td><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">http://dev.w3.org/2011/webrtc/editor/getusermedia.html</a></td> + </tr> + </tbody> +</table> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support de base</td> + <td>Oui{{property_prefix("webkit")}}</td> + <td>Firefox 22</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>DataChannels</td> + <td>A partir de Chrome 29</td> + <td>Firefox 22</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Fontionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support préliminaire</td> + <td>Via Chrome (behind flag)</td> + <td>Activé sur versions Nightly et Aurora</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>DataChannels</td> + <td>{{CompatUnknown}}</td> + <td>Activé sur versions Nightly et Aurora</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<p> </p> diff --git a/files/fr/web/css/block_formatting_context/index.html b/files/fr/web/guide/css/block_formatting_context/index.html index 5b324fc6bb..5b324fc6bb 100644 --- a/files/fr/web/css/block_formatting_context/index.html +++ b/files/fr/web/guide/css/block_formatting_context/index.html diff --git a/files/fr/web/guide/dom/index.html b/files/fr/web/guide/dom/index.html deleted file mode 100644 index ad672dee28..0000000000 --- a/files/fr/web/guide/dom/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Guides DOM pour développeurs -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -<p>{{draft}}</p> - -<p>Le <a href="/docs/DOM">Document Object Model</a> est une API pour les documents <a href="/en-US/docs/HTML">HTML</a> et <a href="/en-US/docs/XML">XML</a>. Il fournit une représentation structurelle du document, permettant au développeur de modifier son contenu et sa présentation visuelle. Essentiellement, il connecte des pages Web à des scripts ou des langages de programmation.</p> - -<p>Toutes les propriétés, méthodes, et événements disponible pour le développeur web pour manipuler et créer des pages Web sont organisés en <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (par exemple, l'objet de document qui représente le document lui-même, l'objet de table qui représente un élément de tableau HTML, etc.). Ces objets sont accessibles via les langages de script dans les navigateurs Web les plus récents.</p> - -<p>Le DOM est le plus souvent utilisé en conjonction avec <a href="/en-US/docs/JavaScript">JavaScript</a>. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à partir d'une API unique et cohérente. <span class="tlid-translation translation" lang="fr"><span title="">Bien que nous nous concentrions sur JavaScript tout au long de ce site, les implémentations du DOM peuvent être construites pour</span></span> <a href="http://www.w3.org/DOM/Bindings">n'importe quel langage</a>.</p> - -<p>Le <a href="http://www.w3.org/">World Wide Web Consortium</a> établit une <a href="http://www.w3.org/DOM/">norme pour le DOM</a>, appelée W3C DOM. Il devrait, maintenant que les navigateurs les plus importants l'implémentent correctement, activer de puissantes applications multi-navigateurs.</p> - -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Pourquoi le DOM est-il important?</h2> - -<p>"HTML dynamique" (<a href="/en-US/docs/DHTML">DHTML</a>) est un terme utilisé par certains fournisseurs pour écrire la combinaison de HTML, de feuilles de style et de scripts permettant d'animer les documents. Le groupe de travail DOM du W3C travaille d'arrache-pied pour s'assurer que des solutions interopérables et indépendantes du langage sont convenues (voir également la <a href="http://www.w3.org/DOM/faq.html">FAQ du W3C</a>). Comme Mozilla revendique le titre de "Web Application Platform", la prise en charge du DOM est l'une des fonctionnalités les plus demandées, et nécessaire si Mozilla veut être une alternative viable aux autres navigateurs.</p> - -<p>Encore plus important est le fait que l'interface utilisateur de Mozilla (également Firefox et Thunderbird) est construite en utilisant <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, en utilisant le DOM pour <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipuler sa propre interface utilisateur</a>.</p> - -<h2 id="En_savoir_plus_sur_le_DOM">En savoir plus sur le DOM</h2> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html b/files/fr/web/guide/events/creating_and_triggering_events/index.html index 686d138cfc..686d138cfc 100644 --- a/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html +++ b/files/fr/web/guide/events/creating_and_triggering_events/index.html diff --git a/files/fr/web/guide/dom/events/index.html b/files/fr/web/guide/events/index.html index 475aa10cde..475aa10cde 100644 --- a/files/fr/web/guide/dom/events/index.html +++ b/files/fr/web/guide/events/index.html diff --git a/files/fr/web/guide/dom/events/evenement_medias/index.html b/files/fr/web/guide/events/media_events/index.html index c34862e7db..c34862e7db 100644 --- a/files/fr/web/guide/dom/events/evenement_medias/index.html +++ b/files/fr/web/guide/events/media_events/index.html diff --git a/files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html b/files/fr/web/guide/events/orientation_and_motion_data_explained/index.html index f7f7f0c204..f7f7f0c204 100644 --- a/files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html +++ b/files/fr/web/guide/events/orientation_and_motion_data_explained/index.html diff --git a/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html b/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html deleted file mode 100644 index 0b0a96257e..0000000000 --- a/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Dessiner avec Canvas -slug: Web/Guide/Graphics/Dessiner_avec_canvas -tags: - - Canvas - - HTML -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas ---- -<p> </p> -<h3 id="Introduction" name="Introduction">Introduction</h3> -<p>Depuis <a href="/fr/Firefox_1.5_pour_les_d%C3%A9veloppeurs" title="fr/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>, Firefox comprend un nouvel élément HTML servant à dessiner programmatiquement. L'élément {{HTMLElement("canvas")}} est basé sur la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">spécification canvas du WHATWG</a>, elle-même basée sur la balise <code><canvas></code> d'Apple implémentée dans Safari. Celui-ci peut être utilisé pour afficher des graphes, des élements d'interface, et d'autres éléments graphiques personnalisés sur le client.</p> -<p>{{HTMLElement("canvas")}} crée une surface de dessin de taille fixe, ou <em>canevas</em>, exposant un ou plusieurs <em>contextes de rendu</em>. Nous nous concentrerons sur le contexte de rendu 2D (c'est d'ailleurs le seul contexte de rendu actuellement défini). Dans le futur, d'autres contextes peuvent fournir différents types de rendu. Par exemple, il est probable qu'un contexte 3D basé sur OpenGL ES sera ajouté à la spécification <code><canvas></code>.</p> -<h3 id="Le_contexte_de_rendu_2D" name="Le_contexte_de_rendu_2D">Le contexte de rendu 2D</h3> -<h4 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h4> -<p>Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possédant une transparence alpha :</p> -<p><img align="right" alt="Exemple 1." class="internal" src="/@api/deki/files/1337/=Canvas_ex1.png"></p> -<pre class="eval"><html> - <head> - <script type="application/x-javascript"> -function draw() { - var canvas = document.getElementById("canvas"); - var ctx = canvas.getContext("2d"); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 55, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 55, 50); -} - </script> - </head> - <body onload="draw()"> - <canvas id="canvas" width="300" height="300"></canvas> - </body> -</html> -</pre> -<p>La fonction <code>draw</code> récupère l'élément <code>canvas</code>, et ensuite son contexte <code>2d</code>. L'objet <code>ctx</code> peut ensuite être utilisé pour dessiner réellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant <code>fillStyle</code> à deux couleurs différentes à l'aide des spécifications de couleur CSS et d'un appel à <code>fillRect</code>. Le second appel à <code>fillStyle</code> utilise <code>rgba()</code> pour spécifier une valeur alpha parmi les informations de couleur.</p> -<p>Les appels à <code>fillRect</code>, <code>strokeRect</code> et <code>clearRect</code> affichent un rectangle plein, surligné ou vide. Pour afficher des formes plus complexes, on utilise des chemins.</p> -<h4 id="Utilisation_de_chemins" name="Utilisation_de_chemins">Utilisation de chemins</h4> -<p>La fonction <code>beginPath</code> commence un nouveau chemin, et <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code> et des méthodes similaires sont utilisées pour ajouter des segments au chemin. Le chemin peut être fermé à l'aide de <code>closePath</code>. Une fois que le chemin est créé, vous pouvez utiliser <code>fill</code> ou <code>stroke</code> pour afficher celui-ci sur le canevas.</p> -<p><img align="right" alt="Exemple 2." class="internal" src="/@api/deki/files/1338/=Canvas_ex2.png"></p> -<pre class="eval"><html> - <head> - <script type="application/x-javascript"> -function draw() { - var canvas = document.getElementById("canvas"); - var ctx = canvas.getContext("2d"); - - ctx.fillStyle = "red"; - - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(150, 150); - ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); - ctx.lineTo(30, 30); - ctx.fill(); -} - </script> - </head> - <body onload="draw()"> - <canvas id="canvas" width="300" height="300"></canvas> - </body> -</html> -</pre> -<p>L'appel à <code>fill()</code> ou <code>stroke()</code> provoque l'utilisation du chemin. Pour être rempli ou dessiné à nouveau, le chemin devra être recréé.</p> -<h4 id=".C3.89tat_graphique" name=".C3.89tat_graphique">État graphique</h4> -<p>Les attributs du contexte comme <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code> et <code>lineJoin</code> font partie de l'<em>état graphique</em> courant. Le contexte fournit deux méthodes, <code>save()</code> et <code>restore()</code>, qui peuvent être utilisées pour déplacer l'état courant vers et depuis la pile d'états.</p> -<h4 id="Un_exemple_plus_compliqu.C3.A9" name="Un_exemple_plus_compliqu.C3.A9">Un exemple plus compliqué</h4> -<p>Voici un exemple un petit peu plus compliqué, qui utilise des chemins, des états et introduit également la matrice de transformation courante. Les méthodes du contexte <code>translate()</code>, <code>scale()</code> et <code>rotate()</code> transforment toutes la matrice courante. Tous les points affichés sont au préalable transformés par cette matrice.</p> -<p><img align="right" alt="Exemple 3." class="internal" src="/@api/deki/files/1339/=Canvas_ex3.png"></p> -<pre> <html> - <head> - <script type="application/x-javascript"> - function dessineNoeudPap(ctx, fillStyle) { - - ctx.fillStyle = "rgba(200,200,200,0.3)"; - ctx.fillRect(-30, -30, 60, 60); - - ctx.fillStyle = fillStyle; - ctx.globalAlpha = 1.0; - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(-25, -25); - ctx.lineTo(25, -25); - ctx.lineTo(-25, 25); - ctx.closePath(); - ctx.fill(); - } - - function point(ctx) { - ctx.save(); - ctx.fillStyle = "black"; - ctx.fillRect(-2, -2, 4, 4); - ctx.restore(); - } - - function dessine() { - var canvas = document.getElementById("canvas"); - var ctx = canvas.getContext("2d"); - - // notez que toutes les autres translations sont relatives à - // celle-ci - ctx.translate(45, 45); - - ctx.save(); - //ctx.translate(0, 0); // non nécessaire - dessineNoeudPap(ctx, "red"); - point(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 0); - ctx.rotate(45 * Math.PI / 180); - dessineNoeudPap(ctx, "green"); - point(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(0, 85); - ctx.rotate(135 * Math.PI / 180); - dessineNoeudPap(ctx, "blue"); - point(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 85); - ctx.rotate(90 * Math.PI / 180); - dessineNoeudPap(ctx, "yellow"); - point(ctx); - ctx.restore(); - } - </script> - </head> - <body onload="dessine()"> - <canvas id="canvas" width="300" height="300"></canvas> - </body> - </html> -</pre> -<p>Ceci définit deux méthodes <code>dessineNoeudPap</code> et <code>point</code>, qui sont appelées 4 fois. Avant chaque appel, <code>translate()</code> et <code>rotate()</code> sont utilisées pour définir la matrice de transformation courante, qui à son tour positionne le point et le nœud papillon. <code>point</code> affiche un petit carré noir centré sur <code>(0, 0)</code>. Ce point est déplacé par la matrice de transformation. <code>dessineNoeudPap</code> affiche un chemin simple en forme de nœud papillon en utilisant le style de remplissage fourni en paramètre.</p> -<p>Comme les opérations de matrices sont cumulatives, <code>save()</code> et <code>restore()</code> sont utilisées autour de chaque jeu d'appels afin de restaurer l'état initial du canevas. Une chose à surveiller est que la rotation se passe toujours autour de l'origine courante ; donc une séquence <code>translate() rotate() translate()</code> donnera des résultats différents d'une série d'appels <code>translate() translate() rotate()</code>.</p> -<h3 id="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple" name="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple">Compatibilité avec le <canvas> d'Apple</h3> -<p>Pour la plus grande partie, le <code><canvas></code> de Mozilla est compatible avec celui d'Apple et d'autres implémentations. Il convient cependant d'être averti de quelques problèmes, décrits ci-dessous.</p> -<h4 id="Balise_.3C.2Fcanvas.3E_requise" name="Balise_.3C.2Fcanvas.3E_requise">Balise <code></canvas></code> requise</h4> -<p>Dans l'implémentation d'Apple Safari, <code><canvas></code> est un élément fortement semblable à l'élément <code><img></code> ; il ne doit pas forcément avoir de balise de fermeture. Cependant, pour que <code><canvas></code> puisse être utilisé à grande échelle sur le Web, il est important de pouvoir fournir facilement du contenu alternatif. C'est pourquoi l'implémentation de Mozilla a une balise de fin <em>requise</em>.</p> -<p>Si aucun contenu alternatif n'est nécessaire, un simple <code><canvas id="foo" ...></canvas></code> sera entièrement compatible avec Safari et Mozilla -- Safari ignorera simplement la balise de fermeture.</p> -<p>Si un contenu alternatif est désiré, certaines astuces CSS doivent être utilisées pour masquer le contenu alternatif à Safari (qui doit seulement afficher le canevas), et masquer ces mêmes astuces à Internet Explorer (qui doit afficher le contenu alternatif). <strong>À faire : les commandes CSS exactes doivent être fournies par hixie.</strong></p> -<h3 id="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires" name="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires">Fonctionnalités supplémentaires</h3> -<h4 id="Affichage_de_contenu_Web_dans_un_canevas" name="Affichage_de_contenu_Web_dans_un_canevas">Affichage de contenu Web dans un canevas</h4> -<div class="note"> - Cette fonctionnalité est uniquement disponible pour le code exécuté avec des privilèges Chrome. Son utilisation n'est pas permise dans des pages HTML normales.</div> -<p>L'élément <code>canvas</code> de Mozilla a été étendu avec la méthode <code>drawWindow</code>. Celle-ci dessine une capture du contenu d'un élément DOM <code>window</code> dans le canevas. Par exemple,</p> -<pre class="eval">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)"); -</pre> -<p>affichera le contenu de la fenêtre courante dans le rectangle (0,0,100,200) défini en pixels relatifs au coin en haut à gauche de la fenêtre d'affichage, sur un fond noir, dans le canevas. En spécifiant "rgba(0,0,0,0)" comme couleur, le contenu sera dessiné avec un fond transparent (ce qui sera plus lent).</p> -<p>Avec cette méthode, il est possible de remplir un IFRAME caché avec du contenu arbitraire (par exemple, du texte HTML stylé avec CSS, ou du SVG) et de le dessiner dans un canevas. Celui-ci sera redimensionné, tourné, etc. suivant la transformation courante.</p> -<p>L'extension <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> de Ted Mielczarek utilise cette technique dans le chrome pour fournir des miniatures de pages Web, et sa source est disponible pour référence.</p> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> -<ul> - <li><a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li> - <li><a href="/fr/Tutoriel_canvas" title="fr/Tutoriel_canvas">Tutoriel canvas</a></li> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">Spécification du WHATWG</a></li> - <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html">La documentation d'Apple sur Canvas</a></li> - <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Affichage de miniatures de pages Web</a></li> - <li>Quelques <a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr">exemples</a> : - <ul> - <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">Rendu 3D du format OBJ</a></li> - <li><a href="/fr/Un_raycaster_basique" title="fr/Un_raycaster_basique">Un raycaster basique</a></li> - <li><a class="external" href="http://awordlike.com/">The Lightweight Visual Thesaurus</a></li> - <li><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Exemple impressionnant d'utilisation de canvas</a></li> - <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/Special:Tags?tag=HTML:Canvas&language=fr" title="Special:Tags?tag=HTML:Canvas&language=fr">Et plus…</a></li> -</ul> -<p>{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas" } ) }}</p> diff --git a/files/fr/web/guide/html/astuces_de_création_de_pages_html_à_affichage_rapide/index.html b/files/fr/web/guide/html/astuces_de_création_de_pages_html_à_affichage_rapide/index.html deleted file mode 100644 index 58e21b4603..0000000000 --- a/files/fr/web/guide/html/astuces_de_création_de_pages_html_à_affichage_rapide/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Astuces de création de pages HTML à affichage rapide -slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide -tags: - - HTML - - Performance -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -<p>C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. <br> - Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.</p> - -<h3 id="Réduire_le_poids_de_la_page">Réduire le poids de la page</h3> - -<p>Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:</p> - -<ul> - <li>Eliminer les espaces et les commentaires inutile.</li> - <li> - <div>Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que <a class="external" href="http://www.html-tidy.org" title="http://tidy.sourceforge.net/">HTML Tidy</a> peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre <a class="external" href="http://yuilibrary.com/projects/yuicompressor/" title="http://yuilibrary.com/projects/yuicompressor/">YUIcompressor</a>.</div> - </li> - <li> - <div>Verifiez que votre site ne contient pas de code inutile ou de tags superflus. </div> - </li> -</ul> - -<p>Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.</p> - -<h3 id="Réduisez_le_nombre_de_fichiers">Réduisez le nombre de fichiers</h3> - -<p>Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions <a href="/en/HTTP" title="https://developer.mozilla.org/en/HTTP">HTTP </a>nécessaire pour télécharger une page.</p> - -<ul> - <li>Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des <a class="external" href="http://css-tricks.com/examples/ButtonMaker/" title="http://css-tricks.com/examples/ButtonMaker/">boutons graphiques en CSS</a>.</li> - <li>Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser <a class="external" href="http://www.gimp.org/" title="http://www.gimp.org/">Gimp</a> ou <a class="external" href="http://www.imagemagick.org/script/index.php" title="http://www.imagemagick.org/script/index.php">Imagemagik</a>.</li> - <li>Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.</li> -</ul> - -<p>Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.</p> - -<h3 id="Réduire_les_domaines_des_recherches">Réduire les domaines des recherches</h3> - -<p>Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.</p> - -<h3 id="Réutiliser_le_contenu_du_cache">Réutiliser le contenu du cache</h3> - -<p>Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.<br> - En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.<br> - En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.<br> - <br> - Plus d'informations:<br> - <br> - 1. <a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers" title="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a><br> - 2. <a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304" title="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a><br> - 3. <a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html" title="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></p> - -<h3 id="Réduire_le_nombre_de_scripts_en_ligne">Réduire le nombre de scripts en ligne</h3> - -<p>Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().</p> - -<h3 id="Utilisez_le_CSS_moderne_et_des_balises_valides">Utilisez le CSS moderne et des balises valides</h3> - -<p>L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.<br> - Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.<br> - En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, <a class="external" href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/">HTML Tidy</a> peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.</p> - -<h3 id="Segmentez_votre_contenu">Segmentez votre contenu</h3> - -<p>Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:</p> - -<pre><TABLE> - <TABLE> - <TABLE> - ... - </TABLE> - </TABLE> -</TABLE> - -</pre> - -<p>Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:</p> - -<pre>> TABLE <TABLE> ...</ -> TABLE <TABLE> ...</ -> TABLE <TABLE> ...</</pre> - -<h3 id="Préciser_la_taille_des_images_et_des_tableaux">Préciser la taille des images et des tableaux</h3> - -<p>Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.<br> - Les tableaux doivent utiliser le sélecteur CSS selector:property combination:</p> - -<pre> table-layout: fixed; - -</pre> - -<p>et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.</p> - -<h3 id="Choisissez_les_versions_des_navigateur_ciblés">Choisissez les versions des navigateur ciblés</h3> - -<p><br> - Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.<br> - <br> - Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.<br> - <br> - Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.</p> - -<h3 id="Liens_connexes">Liens connexes</h3> - -<p><br> - * <a class="external" href="http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html" title="http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html">Optimisez vos pages avec Yslow</a><br> - * <a class="external" href="http://www.websiteoptimization.com/" title="http://www.websiteoptimization.com/">Livre: "Speed Up Your Site" par Andy King</a><br> - *<a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html" title="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html"> Site Optimization Tutorial </a>(WebMonkey) (en anglais) <br> - * <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (en anglais) </p> - -<p> </p> - -<p><strong>Document d'information d'origine</strong><br> - <br> - * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages</p> diff --git a/files/fr/web/guide/html/catégories_de_contenu/index.html b/files/fr/web/guide/html/content_categories/index.html index 35a8ed9779..35a8ed9779 100644 --- a/files/fr/web/guide/html/catégories_de_contenu/index.html +++ b/files/fr/web/guide/html/content_categories/index.html diff --git a/files/fr/web/html/contenu_editable/index.html b/files/fr/web/guide/html/editable_content/index.html index 01e1691ed1..01e1691ed1 100644 --- a/files/fr/web/html/contenu_editable/index.html +++ b/files/fr/web/guide/html/editable_content/index.html diff --git a/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html b/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html deleted file mode 100644 index 6d6a68bd4c..0000000000 --- a/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html +++ /dev/null @@ -1,469 +0,0 @@ ---- -title: Composition avancée des formulaires HTML -slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms -tags: - - Avancé - - CSS - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/Advanced_form_styling ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Dans cet article, nous verrons comment utiliser les <a href="/fr/docs/Apprendre/CSS">CSS</a> avec les formulaires <a href="/fr/docs/Glossaire/HTML">HTML</a> pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'<a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">article précédent</a>, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.</p> - -<p>Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :</p> - -<dl> - <dt>la brute</dt> - <dd>Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3.</dd> - <dt>le truand</dt> - <dd>Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence.</dd> -</dl> - -<h2 id="Possibilités_d'expression_avec_les_CSS">Possibilités d'expression avec les CSS</h2> - -<p>Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes.</p> - -<p>L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :</p> - -<ul> - <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external" title="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">CSS 2.1</a> était très limité et n'offrait que trois pseudo-classes : - - <ul> - <li>{{cssxref(":active")}}</li> - <li>{{cssxref(":focus")}}</li> - <li>{{cssxref(":hover")}}</li> - </ul> - </li> - <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external" title="http://www.w3.org/TR/css3-selectors/">CSS Selector Level 3</a> a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : - <ul> - <li>{{cssxref(":enabled")}}</li> - <li>{{cssxref(":disabled")}}</li> - <li>{{cssxref(":checked")}}</li> - <li>{{cssxref(":indeterminate")}}</li> - </ul> - </li> - <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external" title="http://dev.w3.org/csswg/css3-ui/#pseudo-classes">CSS Basic UI Level 3</a> a ajouté quelques autres pseudo-classes pour décrire l'état du widget : - <ul> - <li>{{cssxref(":default")}}</li> - <li>{{cssxref(":valid")}}</li> - <li>{{cssxref(":invalid")}}</li> - <li>{{cssxref(":in-range")}}</li> - <li>{{cssxref(":out-of-range")}}</li> - <li>{{cssxref(":required")}}</li> - <li>{{cssxref(":optional")}}</li> - <li>{{cssxref(":read-only")}}</li> - <li>{{cssxref(":read-write")}}</li> - </ul> - </li> - <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external" title="http://dev.w3.org/csswg/selectors4/">CSS Selector Level 4</a> actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : - <ul> - <li>{{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}.</li> - </ul> - </li> -</ul> - -<p>Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date.</p> - -<p>Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..</p> - -<div class="warning"> -<p><strong>Avertissement :</strong> Même si ces expérimentations sont intéressantes, <strong>elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables</strong>. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; <a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">vous faites quelque chose qui peut être mauvais pour le Web</a> en utilisant des propriétés non standard.</p> -</div> - -<ul> - <li><a href="/fr/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Extensions des CSS Mozilla </a> - - <ul> - <li>{{cssxref(":-moz-placeholder")}}</li> - <li>{{cssxref(":-moz-submit-invalid")}}</li> - <li>{{cssxref(":-moz-ui-invalid")}}</li> - <li>{{cssxref(":-moz-ui-valid")}}</li> - </ul> - </li> - <li><a href="/fr/docs/CSS/CSS_Reference/Webkit_Extensions" title="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">Extensions des CSS WebKit </a> - <ul> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" rel="external" title="http://trac.webkit.org/wiki/Styling Form Controls">et beaucoup d'autres</a></li> - </ul> - </li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx">Extensions des CSS Microsoft</a> - <ul> - <li><code><a href="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx">:-ms-input-placeholder</a></code></li> - </ul> - </li> -</ul> - -<h3 id="Contrôle_de_l'apparence_des_éléments_de_formulaire">Contrôle de l'apparence des éléments de formulaire</h3> - -<p>Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif et widget stylistiquement composables par l'utilisateur.</p> - -<p>À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}. <strong>Ces propriétés ne sont pas normées et ne doivent pas être utilisées</strong>. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : <code>none</code>. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.</p> - -<p>Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :</p> - -<pre class="brush: css"><style> -input[type=search] { - border: 1px dotted #999; - border-radius: 0; - - -webkit-appearance: none; -} -</style> - -<form> - <input type="search"> -</form></pre> - -<p>{{EmbedLiveSample("Contrôle_de_l'apparence_des_éléments_de_formulaire", 250, 40)}}</p> - -<div class="note"> -<p><strong>Note :</strong> Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html">Shadow DOM</a> qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.</p> -</div> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Cases_à_cocher_et_boutons_radio">Cases à cocher et boutons radio</h3> - -<p>Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire.</p> - -<h4 id="Une_simple_case_à_cocher">Une simple case à cocher</h4> - -<p>Considérons la case à cocher suivante :</p> - -<pre class="brush: html"><span><input type="checkbox"></span></pre> - -<pre class="brush: css">span { - display: inline-block; - background: red; -} - -input[type=checkbox] { - width : 100px; - height: 100px; -}</pre> - -<p>Voici les différentes façons dont divers navigateurs gèrent cela :</p> - -<table> - <thead> - <tr> - <th scope="col">Navigateur</th> - <th scope="col">Rendu</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 57 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15671/firefox-mac-checkbox.png" style="height: 118px; width: 120px;"></td> - </tr> - <tr> - <td>Firefox 57 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15691/firefox-windows-checkbox.png" style="height: 115px; width: 113px;"></td> - </tr> - <tr> - <td>Chrome 63 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15676/chrome-mac-checkbox.png" style="height: 117px; width: 116px;"></td> - </tr> - <tr> - <td>Chrome 63 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15681/chrome-windows-checkbox.png" style="height: 117px; width: 120px;"></td> - </tr> - <tr> - <td>Opera 49 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15701/opera-mac-checkbox.png" style="height: 119px; width: 118px;"></td> - </tr> - <tr> - <td>Internet Explorer 11 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15696/ie11-checkbox.png" style="height: 112px; width: 119px;"></td> - </tr> - <tr> - <td>Edge 16 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15686/edge-checkbox.png" style="height: 118px; width: 119px;"></td> - </tr> - </tbody> -</table> - -<h4 id="Un_exemple_un_peu_plus_compliqué">Un exemple un peu plus compliqué</h4> - -<p>Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :</p> - -<pre class="brush: html"><form> - <fieldset> - <p> - <input type="checkbox" id="first" name="fruit-1" value="cerise"> - <label for="first">J'aime les cerises</label> - </p> - <p> - <input type="checkbox" id="second" name="fruit-2" value="banane" disabled> - <label for="second">Je ne peux pas aimer la banane</label> - </p> - <p> - <input type="checkbox" id="third" name="fruit-3" value="fraise"> - <label for="third">J'aime les fraises</label> - </p> - </fieldset> -</form></pre> - -<p>avec une composition stylistique élémentaire :</p> - -<pre class="brush: css">body { - font: 1em sans-serif; -} - -form { - display: inline-block; - - padding: 0; - margin : 0; -} - -fieldset { - border : 1px solid #CCC; - border-radius: 5px; - margin : 0; - padding: 1em; -} - -label { - cursor : pointer; -} - -p { - margin : 0; -} - -p+p { - margin : .5em 0 0; -}</pre> - -<p>Maintenant composons pour avoir une case à cocher personnalisée.</p> - -<p>Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :</p> - -<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="height: 64px; width: 16px;"></p> - -<p>Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :</p> - -<ul> - <li>N'utilisez pas <code>display:none</code> pour masquer la case à cocher, car comme nous le verrons ci-dessous, nous avons besoin que la case à cocher soit disponible pour l'utilisateur. Avec <code>display:none</code>, la case à cocher n'est plus accessible à l'utilisateur, ce qui signifie qu'il est impossible de la cocher ou de la décocher.</li> - <li>Nous utiliserons quelques sélecteurs CSS3 pour réaliser notre style. Afin de prendre en charge les navigateurs existants, nous pouvons préfixer tous nos sélecteurs avec la pseudo-classe {{cssxref(":root")}}. Dans l'état actuel des implémentations, tous les navigateurs prenant en charge ce dont nous avons besoin prenent en charge également la pseudo-classe {{cssxref(":root")}}, mais d'autres ne le font pas. Ceci est un exemple de moyen pratique pour filtrer l'ancien Internet Explorer. Ces anciens navigateurs verront la case à cocher normale tandis que les navigateurs modernes verront la case à cocher personnalisée.</li> -</ul> - -<pre class="brush: css">:root input[type=checkbox] { - /* les cases à cocher d'origine sont placées en dehors de la vue */ - position: absolute; - left: -1000em; -}</pre> - -<p>Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref(":before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le <code>label</code> suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref(":before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.</p> - -<pre class="brush: css">:root input[type=checkbox] + label:before { - content: ""; - display: inline-block; - width : 16px; - height : 16px; - margin : 0 .5em 0 0; - background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0; - -/* Ce qui suit est utilisé pour ajuster la position des cases à cocher - sur la ligne de base suivante */ - - vertical-align: bottom; - position: relative; - bottom: 2px; -}</pre> - -<p>Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan.</p> - -<pre class="brush: css">:root input[type=checkbox]:checked + label:before { - background-position: 0 -16px; -} - -:root input[type=checkbox]:disabled + label:before { - background-position: 0 -32px; -} - -:root input[type=checkbox]:checked:disabled + label:before { - background-position: 0 -48px; -}</pre> - -<p>Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées.</p> - -<pre class="brush: css">:root input[type=checkbox]:focus + label:before { - outline: 1px dotted black; -}</pre> - -<p>Voyez directement ici le résultat :</p> - -<p>{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}}</p> - -<h3 id="Gérer_le_cauchemar_<select>">Gérer le cauchemar <select></h3> - -<p>L'élément {{HTMLElement("select")}} est considéré comme un widget « truand », car il est impossible de lui composer un style cohérent entre les plateformes. Toutefois, certaines choses restent possibles. Plutôt qu'une longue explication, voyons un exemple :</p> - -<pre class="brush: html"><select> - <option>Cerise</option> - <option>Banane</option> - <option>Fraise</option> -</select></pre> - -<pre class="brush: css">select { - width : 80px; - padding : 10px; -} - -option { - padding : 5px; - color : red; -}</pre> - -<p>Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget :</p> - -<pre class="brush: css">select, option { - -webkit-appearance : none; /* Pour avoir le contrôle de l'apparence sur WebKit/Chromium */ - -moz-appearance : none; /* Pour avoir le contrôle sur l'apparence sur Gecko */ - - /* Pour avoir le contrôle sur l'apparence et sur Trident (IE) - Notez que cela fonctionne aussi sur Gecko et a des effets limités sur WebKit */ - background : none; -}</pre> - -<table class="standard-table"> - <thead> - <tr> - <th colspan="1" rowspan="2" scope="col">Navigateur</th> - <th colspan="2" scope="col" style="text-align: center;">Rendu classique</th> - <th colspan="2" scope="col" style="text-align: center;">Rendu travaillé</th> - </tr> - <tr> - <th scope="col" style="text-align: center;">fermé</th> - <th scope="col" style="text-align: center;">ouvert</th> - <th scope="col" style="text-align: center;">fermé</th> - <th scope="col" style="text-align: center;">ouvert</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 57 (Mac OSX)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15672/firefox-mac-select-1-closed.png" style="height: 55px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15673/firefox-mac-select-1-open.png" style="height: 76px; width: 119px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15674/firefox-mac-select-2-closed.png" style="height: 67px; width: 94px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15675/firefox-mac-select-2-open.png" style="height: 82px; width: 116px;"></td> - </tr> - <tr> - <td>Firefox 57 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15692/firefox-windows-select-1-closed.png" style="height: 65px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15693/firefox-windows-select-1-open.png" style="height: 129px; width: 103px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15694/firefox-windows-select-2-closed.png" style="height: 69px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15695/firefox-windows-select-2-open.png" style="height: 144px; width: 108px;"></td> - </tr> - <tr> - <td>Chrome 63 (Mac OSX)</td> - <td style="vertical-align: top; text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/15677/chrome-mac-select-1-closed.png" style="height: 36px; width: 92px;"></td> - <td style="vertical-align: top; text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/15678/chrome-mac-select-1-open.png" style="height: 62px; width: 108px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png" style="height: 53px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15680/chrome-mac-select-2-open.png" style="height: 75px; width: 110px;"></td> - </tr> - <tr> - <td>Chrome 63 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15682/chrome-windows-select-1-closed.png" style="height: 50px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15683/chrome-windows-select-1-open.png" style="height: 95px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png" style="height: 53px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15685/chrome-windows-select-2-open.png" style="height: 104px; width: 93px;"></td> - </tr> - <tr> - <td>Opera 49 (Mac OSX)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15702/opera-mac-select-1-closed.png" style="height: 33px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15703/opera-mac-select-1-open.png" style="height: 67px; width: 115px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15704/opera-mac-select-2-closed.png" style="height: 49px; width: 89px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15705/opera-mac-select-2-open.png" style="height: 77px; width: 115px;"></td> - </tr> - <tr> - <td>IE11 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15697/ie11-select-1-closed.png" style="height: 52px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15698/ie11-select-1-open.png" style="height: 84px; width: 120px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15699/ie11-select-2-closed.png" style="height: 57px; width: 93px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15700/ie11-select-2-open.png" style="height: 89px; width: 123px;"></td> - </tr> - <tr> - <td>Edge 16 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15687/edge-select-1-closed.png" style="height: 52px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15688/edge-select-1-open.png" style="height: 84px; width: 105px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15689/edge-select-2-closed.png" style="height: 51px; width: 89px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15690/edge-select-2-open.png" style="height: 83px; width: 93px;"></td> - </tr> - </tbody> -</table> - -<p>Comme vous pouvez le voir, malgré l'aide des propriétés <code>-*-appearance</code>, il reste quelques problèmes :</p> - -<ul> - <li>La propriété {{cssxref("padding")}} est gérée de manière incohérente entre les divers systèmes d'exploitation et navigateurs.</li> - <li>Internet Explorer ancien ne permet pas un style sans à-coups.</li> - <li>Firefox ne dispose d'aucun moyen pour rendre la flèche de déroulement.</li> - <li>Si vous voulez donner un style aux éléments {{HTMLElement("option")}} dans la liste déroulante, le comportement de Chrome et Opera varie d'un système à l'autre.</li> -</ul> - -<p>De plus, avec notre exemple, nous n'utilisons que trois propriétés CSS. Imaginez le désordre quand on considère encore plus de propriétés CSS. Comme vous pouvez le voir, les CSS ne sont pas adaptées pour changer l'apparence et la convivialité de ces widgets de manière cohérente, mais elles vous permettent quand même d'ajuster certaines choses. Pour autant que vous soyez prêt à vivre avec des différences d'un navigateur et d'un système d'exploitation à l'autre.</p> - -<p>Nous vous aiderons à comprendre quelles sont les propriétés qui conviennent dans l'article suivant : <a href="/fr/docs/Properties_compatibility_table_for_forms_widgets" title="/en-US/docs/Properties_compatibility_table_for_forms_widgets">Tableau de compatibilité des propriétés entre les widgets de formulaire</a>.</p> - -<h2 id="Vers_des_formulaires_plus_sympas_bibliothèques_utiles_et_«_polyfill_»_(prothèses_d'émulation)">Vers des formulaires plus sympas : bibliothèques utiles et<strong> </strong>« <strong>polyfill » (prothèses d'émulation)</strong></h2> - -<p>Bien que les CSS soient assez expressives pour les cases à cocher et les boutons radio, c'est loin d'être vrai pour les widgets plus avancés. Même si certaines choses sont possibles avec l'élément {{HTMLElement("select")}}, le widget <code>file</code> ne peut pas être stylisé du tout. Il en est de même pour le sélecteur de date, etc.</p> - -<p>Si vous souhaitez avoir un contrôle total sur les widgets de formulaire, vous n'avez pas d'autre choix que de compter sur JavaScript. Dans l'article<a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets"> Comment créer des widgets de formulaires personnalisés</a>, nous voyons comment le faire nous-mêmes, mais il existe des bibliothèques très utiles pouvant vous aider :</p> - -<ul> - <li><a href="http://sprawsm.com/uni-form/" rel="external" title="http://sprawsm.com/uni-form/">Uni-form</a> est un canevas de standardisation du balisage des formulaires, en le composant stylistiquement avec des CSS. Il offre également quelques fonctionnalités supplémentaires lorsqu'il est utilisé avec jQuery, mais c'est optionnel.</li> - <li><a href="http://formalize.me/" rel="external" title="http://formalize.me/">Formalize</a> est une extension des canevas JavaScript courants (tels que jQuery, Dojo, YUI, etc.) aidant à rationaliser et personnaliser les formulaires.</li> - <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Niceforms</a> est une méthode JavaScript autonome fournissant une personnalisation complète des formulaires Web. Vous pouvez utiliser certains thèmes intégrés ou créer les vôtres.</li> -</ul> - -<p>Les bibliothèques suivantes ne visent pas seulement les formulaires, mais elles ont des fonctionnalités très intéressantes pour les traiter :</p> - -<ul> - <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a> offre des widgets avancés et personnalisables très intéressants, comme les sélecteurs de date (avec une attention particulière pour l'accessibilité).</li> - <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external" title="http://twitter.github.com/bootstrap/base-css.html#forms">Twitter Bootstrap</a> peut être très utile si vous voulez normaliser vos formulaires.</li> - <li><a href="https://afarkas.github.io/webshim/demos/" rel="external" title="http://afarkas.github.com/webshim/demos/demos/webforms.html">WebShim</a> est un énorme outil pouvant vous aider à gérer la prise en charge des navigateurs HTML5. La partie formulaires Web peut être très utile.</li> -</ul> - -<p>Rappelez-vous que lier CSS et JavaScript peut avoir des effets collatéraux. Donc, si vous choisissez d'utiliser l'une de ces bibliothèques, vous devez toujours prévoir des solutions de repli dans les feuilles de style en cas d'échec du script. Il y a de nombreuses raisons pour lesquelles les scripts peuvent échouer, surtout dans le monde des mobiles et vous devez concevoir votre site Web ou votre application pour traiter ces cas le mieux possible.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p> </p> - -<p>Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.</p> - -<p>Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge les plus importantes propriétés des CSS : <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets" rel="nofollow">Tableau de compatibilité des propriétés entre widgets de formulaire</a>.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="http://diveintohtml5.info/forms.html" rel="external" title="http://diveintohtml5.info/forms.html">Dive into HTML5: Forms </a>(en anglais)</li> - <li><a href="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/" rel="external" title="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/">Idées utiles et lignes‑guides pour un bon design des formulaires Web</a> (en anglais)</li> -</ul> - -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li>Mise en forme avancée des formulaires HTML</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html b/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html deleted file mode 100644 index fbdafe47d4..0000000000 --- a/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: Mise en forme des formulaires HTML -slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML -tags: - - CSS - - Exemple - - Formulaires - - Guide - - HTML - - Intermédiaire - - Web -translation_of: Learn/Forms/Styling_web_forms ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</div> - -<blockquote> -<p>Dans cet article, nous allons apprendre comment utiliser <a href="/fr/docs/CSS" title="/fr/docs/CSS">les CSS</a> avec les formulaires <a href="/fr/docs/HTML" title="/fr/docs/HTML">HTML</a> pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">construire leurs propres widgets HTML</a> pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.</p> -</blockquote> - -<h2 id="Pourquoi_est-ce_si_difficile_de_modifier_l'apparence_des_formulaires_avec_CSS">Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?</h2> - -<p>Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal" title="http://www.ietf.org/rfc/rfc1866.txt">spécification HTML 2</a>. À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.</p> - -<p>Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.</p> - -<p>Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.</p> - -<p>Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des <a href="/fr/docs/Web/Guide/HTML/Formulaires" title="/fr/docs/HTML/Formulaires">formulaires HTML</a>.</p> - -<h3 id="Tous_les_widgets_ne_sont_pas_égaux_devant_les_CSS">Tous les widgets ne sont pas égaux devant les CSS</h3> - -<p>Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.</p> - -<h4 id="Le_bon">Le bon</h4> - -<p>L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :</p> - -<ol> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("output")}}</li> -</ol> - -<p>Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.</p> - -<h4 id="La_brute">La brute</h4> - -<p>L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.</p> - -<p>Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.</p> - -<p>Nous allons voir comment gérer ces cas particuliers dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms" title="/fr/docs/HTML/Formulaires/Apparence_avancée_des_formulaires_HTML">Apparence avancée des formulaires HTML</a>.</p> - -<h4 id="Le_truand">Le truand</h4> - -<p>L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.</p> - -<p>Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">Comment créer des widgets de formulaire personnalisés</a>.</p> - -<h2 id="Compositions_stylistiques_de_base">Compositions stylistiques de base</h2> - -<p>Pour changer l'apparence <a href="/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon" title="/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon">des éléments facilement modifiables</a> avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.</p> - -<h3 id="Champs_de_recherche">Champs de recherche</h3> - -<p>Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire <code>-webkit-appearance</code>. Nous allons aborder le sujet plus en détails dans dans l'article : <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms" title="/fr/docs/Apparence_avancée_des_formulaires_HTML">Apparence avancée des formulaires HTML</a>.</p> - -<h4 id="Exemple">Exemple</h4> - -<pre class="brush: html"><form> - <input type="search"> -</form> -</pre> - -<pre class="brush: css">input[type=search] { - border: 1px dotted #999; - border-radius: 0; - - -webkit-appearance: none; -}</pre> - -<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p> - -<p>Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété <code>-webkit-appearance</code> tandis que le second a recours à la propriété <code>-webkit-appearance:none</code>. La différence est notable.</p> - -<h3 id="Texte_et_polices_de_caractères">Texte et polices de caractères</h3> - -<p>Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :</p> - -<pre class="brush: css">button, input, select, textarea { - font-family : inherit; - font-size : 100%; -}</pre> - -<p>La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.</p> - -<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p> - -<p>Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.</p> - -<h3 id="Modèle_de_boîte">Modèle de boîte</h3> - -<p>Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.</p> - -<p><strong>Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).</strong> Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :</p> - -<pre class="brush: css">input, textarea, select, button { - width : 150px; - margin: 0; - - -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */ - -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */ - box-sizing: border-box; -}</pre> - -<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p> - -<p>Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS <code>border-box</code>. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.</p> - -<h3 id="Positionnement">Positionnement</h3> - -<p>Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :</p> - -<h4 id="legend">legend</h4> - -<p>L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément <code>fieldset</code>.</p> - -<p>Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut <code>label</code> de chaque élément de formulaire du <code>fieldset</code>), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :</p> - -<h5 id="HTML">HTML</h5> - -<pre class="brush: html"><fieldset> - <legend>Hi!</legend> - <h1>Hello</h1> -</fieldset></pre> - -<h5 id="CSS">CSS</h5> - -<pre class="brush: css">legend { - width: 1px; - height: 1px; - overflow: hidden; -}</pre> - -<h4 id="textarea">textarea</h4> - -<p>Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d<code>'inline-block</code> à <code>block</code>, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :</p> - -<pre class="brush: css">textarea { - vertical-align: top; -}</pre> - -<h2 id="Exemple_2">Exemple</h2> - -<p>Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :</p> - -<p><img alt="C'est ce que nous voulons réaliser avec le HTML et les CSS." src="https://mdn.mozillademos.org/files/16012/fr-carte.png" style="border-style: solid; border-width: 1px; height: 315px; width: 465px;"></p> - -<h3 id="HTML_2">HTML</h3> - -<p>Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier<a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML" title="/en-US/docs/HTML/Forms/My_first_HTML_form"> article de ce guide</a> ; il ne comporte que quelques identifiants supplémentaires et un titre.</p> - -<pre class="brush: html"><form> - <h1>à: Mozilla</h1> - - <div id="from"> - <label for="name">de :</label> - <input type="text" id="name" name="user_name"> - </div> - - <div id="reply"> - <label for="mail">répondre à :</label> - <input type="email" id="mail" name="user_email"> - </div> - - <div id="message"> - <label for="msg">Votre message :</label> - <textarea id="msg" name="user_message"></textarea> - </div> - - <div class="button"> - <button type="submit">Poster le message</button> - </div> -</form></pre> - -<h3 id="Organiser_les_ressources">Organiser les ressources</h3> - -<p>C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :</p> - -<ol> - <li>L'<a href="/files/4151/background.jpg" title="The postcard background">image de fond</a> de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.</li> - <li>Une police de machine à écrire : <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">« Secret Typewriter » de fontsquirrel.com</a> — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.</li> - <li>Une police d'écriture manuelle : <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal"> « Journal » de fontsquirrel.com </a>— téléchargez le fichier TTF dans le même répertoire que ci‑dessus.</li> -</ol> - -<p> </p> - -<p>Les polices demandent un supplément de traitement avant de débuter :</p> - -<ol> - <li>Allez sur le <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de fontsquirrel.</li> - <li>En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.</li> - <li>Décompressez le fichier zip fourni.</li> - <li>Dans le contenu décompressé vous trouverez deux fichiers <code>.woff</code> et deux fichiers <code>.woff2</code>. Copiez ces quatre fichiers dans un répertoire nommé <code>fonts</code>, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> pour des informations plus détaillées.</li> -</ol> - -<h3 id="Le_CSS">Le CSS</h3> - -<p> </p> - -<p>Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.</p> - -<p>D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.</p> - -<pre class="brush: css">@font-face{ - font-family : "handwriting"; -<code class="language-css"><span class="property token"> src</span><span class="punctuation token">:</span> <span class="token url">url('fonts/journal-webfont.woff2')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff2'</span><span class="punctuation token">)</span>, - <span class="token url">url('fonts/journal-webfont.woff')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="property token">font-weight</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span> - <span class="property token">font-style</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span></code> -} - -@font-face{ - font-family : "typewriter"; -<code class="language-css"> <span class="property token">src</span><span class="punctuation token">:</span> <span class="token url">url('fonts/veteran_typewriter-webfont.woff2')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff2'</span><span class="punctuation token">)</span>, - <span class="token url">url('fonts/veteran_typewriter-webfont.woff')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="property token">font-weight</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span> - <span class="property token">font-style</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span></code> -} - -body { - font : 21px sans-serif; - - padding : 2em; - margin : 0; - - background : #222; -} - -form { - position: relative; - - width : 740px; - height : 498px; - margin : 0 auto; - - background: #FFF url(background.jpg); -}</pre> - -<p>Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.</p> - -<pre class="brush: css">h1 { - position : absolute; - left : 415px; - top : 185px; - - font : 1em "typewriter", sans-serif; -} - -#from { - position: absolute; - left : 398px; - top : 235px; -} - -#reply { - position: absolute; - left : 390px; - top : 285px; -} - -#message { - position: absolute; - left : 20px; - top : 70px; -}</pre> - -<p>C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.</p> - -<pre class="brush: css">label { - font : .8em "typewriter", sans-serif; -}</pre> - -<p>Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.</p> - -<pre class="brush: css">input, textarea { - font : .9em/1.5em "handwriting", sans-serif; - - border : none; - padding : 0 10px; - margin : 0; - width : 240px; - - background: none; -}</pre> - -<p>Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.</p> - -<pre class="brush: css">input:focus, textarea:focus { - background : rgba(0,0,0,.1); - border-radius: 5px; - outline : none; -}</pre> - -<p>Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.</p> - -<p>Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :</p> - -<pre class="brush: css">input { - height: 2.5em; /* pour IE */ - vertical-align: middle; /* optionnel mais donne meilleur aspect pour IE */ -}</pre> - -<p>Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur <code>auto</code> et d'autres la valeur par défaut pour <code>scroll</code> lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise <code>auto</code>.</p> - -<pre class="brush: css">textarea { - display : block; - - padding : 10px; - margin : 10px 0 0 -10px; - width : 340px; - height : 360px; - - resize : none; - overflow: auto; -}</pre> - -<p>L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a> !</p> - -<pre class="brush: css">button { - position : absolute; - left : 440px; - top : 360px; - - padding : 5px; - - font : bold .6em sans-serif; - border : 2px solid #333; - border-radius: 5px; - background : none; - - cursor : pointer; - --webkit-transform: rotate(-1.5deg); - -moz-transform: rotate(-1.5deg); - -ms-transform: rotate(-1.5deg); - -o-transform: rotate(-1.5deg); - transform: rotate(-1.5deg); -} - -button:after { - content: " >>>"; -} - -button:hover, -button:focus { - outline : none; - background: #000; - color : #FFF; -}</pre> - -<p>Et voilà ! (en français dans le texte)</p> - -<div class="note"> -<p><strong>Note :</strong> si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la <a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">fonctionner en direct</a> (et revoyez son <a href="https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example">code source</a>).</p> -</div> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du <a href="http://necolas.github.com/normalize.css">projet normalize.css</a>.</p> - -<p>Dans le <a href="/fr/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms">prochain article</a>, nous verrons comment gérer les widgets des catégories « brutes » et « truands ».</p> - -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li>Mise en forme des formulaires HTML</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_3/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_3/index.html deleted file mode 100644 index a647cfaba3..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_3/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Exemple 3 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 ---- -<p>Ceci est le troisième exemple expliquant comment <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire des widgets de formulaire personnalisés</a>.</p> - -<h2 id="Change_states" name="Change_states">Changement d'état</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit" tabindex="-1"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select" tabindex="0"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> -</form></pre> - -<h3 id="Contenu_du_CSS">Contenu du CSS</h3> - -<pre class="brush: css">.widget select, -.no-widget .select { - position : absolute; - left : -5000em; - height : 0; - overflow : hidden; -} - -/* --------------- */ -/* Styles Requis */ -/* --------------- */ - -.select { - position: relative; - display : inline-block; -} - -.select.active, -.select:focus { - box-shadow: 0 0 3px 1px #227755; - outline: none; -} - -.select .optList { - position: absolute; - top : 100%; - left : 0; -} - -.select .optList.hidden { - max-height: 0; - visibility: hidden; -} - -/* ------------ */ -/* Style chic */ -/* ------------ */ - -.select { - font-size : 0.625em; /* 10px */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : 0.2em solid #000; /* 2px */ - border-radius : 0.4em; /* 4px */ - - box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ - - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - display : inline-block; - width : 100%; - overflow : hidden; - - white-space : nowrap; - text-overflow : ellipsis; - vertical-align: top; -} - -.select:after { - content : "▼"; - position: absolute; - z-index : 1; - height : 100%; - width : 2em; /* 20px */ - top : 0; - right : 0; - - padding-top : .1em; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - text-align : center; - - border-left : .2em solid #000; - border-radius: 0 .1em .1em 0; - - background-color : #000; - color : #FFF; -} - -.select .optList { - z-index : 2; - - list-style: none; - margin : 0; - padding: 0; - - background: #f0f0f0; - border: .2em solid #000; - border-top-width : .1em; - border-radius: 0 0 .4em .4em; - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); - - -moz-box-sizing : border-box; - box-sizing : border-box; - - min-width : 100%; - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; -} - -.select .option { - padding: .2em .3em; -} - -.select .highlight { - background: #000; - color: #FFFFFF; -}</pre> - -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> - -<pre class="brush: js">// ----------- // -// UTILITAIRES // -// ----------- // - -NodeList.prototype.forEach = function (callback) { - Array.prototype.forEach.call(this, callback); -} - -// ------------------------- // -// Définitions des fonctions // -// ------------------------- // - -function deactivateSelect(select) { - if (!select.classList.contains('active')) return; - - var optList = select.querySelector('.optList'); - - optList.classList.add('hidden'); - select.classList.remove('active'); -} - -function activeSelect(select, selectList) { - if (select.classList.contains('active')) return; - - selectList.forEach(deactivateSelect); - select.classList.add('active'); -}; - -function toggleOptList(select, show) { - var optList = select.querySelector('.optList'); - - optList.classList.toggle('hidden'); -} - -function highlightOption(select, option) { - var optionList = select.querySelectorAll('.option'); - - optionList.forEach(function (other) { - other.classList.remove('highlight'); - }); - - option.classList.add('highlight'); -}; - -// ------------------- // -// Lien aux événements // -// ------------------- // - -window.addEventListener("load", function () { - var form = document.querySelector('form'); - - form.classList.remove("no-widget"); - form.classList.add("widget"); -}); - -window.addEventListener('load', function () { - var selectList = document.querySelectorAll('.select'); - - selectList.forEach(function (select) { - var optionList = select.querySelectorAll('.option'); - - optionList.forEach(function (option) { - option.addEventListener('mouseover', function () { - highlightOption(select, option); - }); - }); - - select.addEventListener('click', function (event) { - toggleOptList(select); - }, false); - - select.addEventListener('focus', function (event) { - activeSelect(select, selectList); - }); - - select.addEventListener('blur', function (event) { - deactivateSelect(select); - }); - }); -});</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_4/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_4/index.html deleted file mode 100644 index 4bd1a9a069..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_4/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Exemple 4 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4 -tags: - - Avancé - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 ---- -<p>Ceci est le quatrième exemple expliquant <a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> - -<h2 id="Change_states" name="Change_states">Changement d'état</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> -</form></pre> - -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css">.widget select, -.no-widget .select { - position : absolute; - left : -5000em; - height : 0; - overflow : hidden; -} - -/* --------------- */ -/* Styles Requis */ -/* --------------- */ - -.select { - position: relative; - display : inline-block; -} - -.select.active, -.select:focus { - box-shadow: 0 0 3px 1px #227755; - outline: none; -} - -.select .optList { - position: absolute; - top : 100%; - left : 0; -} - -.select .optList.hidden { - max-height: 0; - visibility: hidden; -} - -/* ------------ */ -/* Styles chic */ -/* ------------ */ - -.select { - font-size : 0.625em; /* 10px */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : 0.2em solid #000; /* 2px */ - border-radius : 0.4em; /* 4px */ - - box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ - - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - display : inline-block; - width : 100%; - overflow : hidden; - - white-space : nowrap; - text-overflow : ellipsis; - vertical-align: top; -} - -.select:after { - content : "▼"; - position: absolute; - z-index : 1; - height : 100%; - width : 2em; /* 20px */ - top : 0; - right : 0; - - padding-top : .1em; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - text-align : center; - - border-left : .2em solid #000; - border-radius: 0 .1em .1em 0; - - background-color : #000; - color : #FFF; -} - -.select .optList { - z-index : 2; - - list-style: none; - margin : 0; - padding: 0; - - background: #f0f0f0; - border: .2em solid #000; - border-top-width : .1em; - border-radius: 0 0 .4em .4em; - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); - - -moz-box-sizing : border-box; - box-sizing : border-box; - - min-width : 100%; - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; -} - -.select .option { - padding: .2em .3em; -} - -.select .highlight { - background: #000; - color: #FFFFFF; -}</pre> - -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> - -<pre class="brush: js">// ----------- // -// UTILITAIRES // -// ----------- // - -NodeList.prototype.forEach = function (callback) { - Array.prototype.forEach.call(this, callback); -} - -// ------------------------- // -// Définitions des fonctions // -// ------------------------- // - -function deactivateSelect(select) { - if (!select.classList.contains('active')) return; - - var optList = select.querySelector('.optList'); - - optList.classList.add('hidden'); - select.classList.remove('active'); -} - -function activeSelect(select, selectList) { - if (select.classList.contains('active')) return; - - selectList.forEach(deactivateSelect); - select.classList.add('active'); -}; - -function toggleOptList(select, show) { - var optList = select.querySelector('.optList'); - - optList.classList.toggle('hidden'); -} - -function highlightOption(select, option) { - var optionList = select.querySelectorAll('.option'); - - optionList.forEach(function (other) { - other.classList.remove('highlight'); - }); - - option.classList.add('highlight'); -}; - -function updateValue(select, index) { - var nativeWidget = select.previousElementSibling; - var value = select.querySelector('.value'); - var optionList = select.querySelectorAll('.option'); - - nativeWidget.selectedIndex = index; - value.innerHTML = optionList[index].innerHTML; - highlightOption(select, optionList[index]); -}; - -function getIndex(select) { - var nativeWidget = select.previousElementSibling; - - return nativeWidget.selectedIndex; -}; - -// -------------------- // -// Liens aux événements // -// -------------------- // - -window.addEventListener("load", function () { - var form = document.querySelector('form'); - - form.classList.remove("no-widget"); - form.classList.add("widget"); -}); - -window.addEventListener('load', function () { - var selectList = document.querySelectorAll('.select'); - - selectList.forEach(function (select) { - var optionList = select.querySelectorAll('.option'); - - optionList.forEach(function (option) { - option.addEventListener('mouseover', function () { - highlightOption(select, option); - }); - }); - - select.addEventListener('click', function (event) { - toggleOptList(select); - }); - - select.addEventListener('focus', function (event) { - activeSelect(select, selectList); - }); - - select.addEventListener('blur', function (event) { - deactivateSelect(select); - }); - }); -}); - -window.addEventListener('load', function () { - var selectList = document.querySelectorAll('.select'); - - selectList.forEach(function (select) { - var optionList = select.querySelectorAll('.option'), - selectedIndex = getIndex(select); - - select.tabIndex = 0; - select.previousElementSibling.tabIndex = -1; - - updateValue(select, selectedIndex); - - optionList.forEach(function (option, index) { - option.addEventListener('click', function (event) { - updateValue(select, index); - }); - }); - - select.addEventListener('keyup', function (event) { - var length = optionList.length, - index = getIndex(select); - - if (event.keyCode === 40 && index < length - 1) { index++; } - if (event.keyCode === 38 && index > 0) { index--; } - - updateValue(select, index); - }); - }); -});</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_5/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_5/index.html deleted file mode 100644 index bf1143d186..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_5/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Exemple 5 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 ---- -<p>Voici le dernier exemple expliquant <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> - -<h2 id="Change_states" name="Change_states">Changement d'état</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select" role="listbox"> - <span class="value">Cerise</span> - <ul class="optList hidden" role="presentation"> - <li class="option" role="option" aria-selected="true">Cerise</li> - <li class="option" role="option">Citron</li> - <li class="option" role="option">Banane</li> - <li class="option" role="option">Fraise</li> - <li class="option" role="option">Pomme</li> - </ul> - </div> -</form></pre> - -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css">.widget select, -.no-widget .select { - position : absolute; - left : -5000em; - height : 0; - overflow : hidden; -} - -/* --------------- */ -/* Styles Requis */ -/* --------------- */ - -.select { - position: relative; - display : inline-block; -} - -.select.active, -.select:focus { - box-shadow: 0 0 3px 1px #227755; - outline: none; -} - -.select .optList { - position: absolute; - top : 100%; - left : 0; -} - -.select .optList.hidden { - max-height: 0; - visibility: hidden; -} - -/* ------------ */ -/* Styles Chic */ -/* ------------ */ - -.select { - font-size : 0.625em; /* 10px */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : 0.2em solid #000; /* 2px */ - border-radius : 0.4em; /* 4px */ - - box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ - - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - display : inline-block; - width : 100%; - overflow : hidden; - - white-space : nowrap; - text-overflow : ellipsis; - vertical-align: top; -} - -.select:after { - content : "▼"; - position: absolute; - z-index : 1; - height : 100%; - width : 2em; /* 20px */ - top : 0; - right : 0; - - padding-top : .1em; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - text-align : center; - - border-left : .2em solid #000; - border-radius: 0 .1em .1em 0; - - background-color : #000; - color : #FFF; -} - -.select .optList { - z-index : 2; - - list-style: none; - margin : 0; - padding: 0; - - background: #f0f0f0; - border: .2em solid #000; - border-top-width : .1em; - border-radius: 0 0 .4em .4em; - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); - - -moz-box-sizing : border-box; - box-sizing : border-box; - - min-width : 100%; - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; -} - -.select .option { - padding: .2em .3em; -} - -.select .highlight { - background: #000; - color: #FFFFFF; -}</pre> - -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> - -<pre class="brush: js">// ----------- // -// UTILITAIRES // -// ----------- // - -NodeList.prototype.forEach = function (callback) { - Array.prototype.forEach.call(this, callback); -} - -// ------------------------- // -// Définitions des fonctions // -// ------------------------- // - -function deactivateSelect(select) { - if (!select.classList.contains('active')) return; - - var optList = select.querySelector('.optList'); - - optList.classList.add('hidden'); - select.classList.remove('active'); -} - -function activeSelect(select, selectList) { - if (select.classList.contains('active')) return; - - selectList.forEach(deactivateSelect); - select.classList.add('active'); -}; - -function toggleOptList(select, show) { - var optList = select.querySelector('.optList'); - - optList.classList.toggle('hidden'); -} - -function highlightOption(select, option) { - var optionList = select.querySelectorAll('.option'); - - optionList.forEach(function (other) { - other.classList.remove('highlight'); - }); - - option.classList.add('highlight'); -}; - -function updateValue(select, index) { - var nativeWidget = select.previousElementSibling; - var value = select.querySelector('.value'); - var optionList = select.querySelectorAll('.option'); - - optionList.forEach(function (other) { - other.setAttribute('aria-selected', 'false'); - }); - - optionList[index].setAttribute('aria-selected', 'true'); - - nativeWidget.selectedIndex = index; - value.innerHTML = optionList[index].innerHTML; - highlightOption(select, optionList[index]); -}; - -function getIndex(select) { - var nativeWidget = select.previousElementSibling; - - return nativeWidget.selectedIndex; -}; - -// -------------------- // -// Liens aux événements // -// -------------------- // - -window.addEventListener("load", function () { - var form = document.querySelector('form'); - - form.classList.remove("no-widget"); - form.classList.add("widget"); -}); - -window.addEventListener('load', function () { - var selectList = document.querySelectorAll('.select'); - - selectList.forEach(function (select) { - var optionList = select.querySelectorAll('.option'), - selectedIndex = getIndex(select); - - select.tabIndex = 0; - select.previousElementSibling.tabIndex = -1; - - updateValue(select, selectedIndex); - - optionList.forEach(function (option, index) { - option.addEventListener('mouseover', function () { - highlightOption(select, option); - }); - - option.addEventListener('click', function (event) { - updateValue(select, index); - }); - }); - - select.addEventListener('click', function (event) { - toggleOptList(select); - }); - - select.addEventListener('focus', function (event) { - activeSelect(select, selectList); - }); - - select.addEventListener('blur', function (event) { - deactivateSelect(select); - }); - - select.addEventListener('keyup', function (event) { - var length = optionList.length, - index = getIndex(select); - - if (event.keyCode === 40 && index < length - 1) { index++; } - if (event.keyCode === 38 && index > 0) { index--; } - - updateValue(select, index); - }); - }); -}); -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_1/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_1/index.html deleted file mode 100644 index 045f631079..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_1/index.html +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Exemple 1 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1 -tags: - - Formulaires - - Guide - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 ---- -<p>C'est le premier exemple de code qui explique <a href="/fr/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">comment construire un widget de formulaire personnalisé</a>.</p> - -<h2 id="Basic_state" name="Basic_state">État initial</h2> - -<h3 id="Basic_state_HTML" name="Basic_state_HTML">HTML</h3> - -<pre class="brush: html"><div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> -</div></pre> - -<h3 id="Basic_state_CSS" name="Basic_state_CSS">CSS</h3> - -<pre class="brush: css">/* --------------- */ -/* Styles Requis */ -/* --------------- */ - -.select { - position: relative; - display : inline-block; -} - -.select.active, -.select:focus { - box-shadow: 0 0 3px 1px #227755; - outline: none; -} - -.select .optList { - position: absolute; - top : 100%; - left : 0; -} - -.select .optList.hidden { - max-height: 0; - visibility: hidden; -} - -/* ------------ */ -/* Style Chic */ -/* ------------ */ - -.select { - font-size : 0.625em; /* 10px */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : 0.2em solid #000; /* 2px */ - border-radius : 0.4em; /* 4px */ - - box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ - - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - display : inline-block; - width : 100%; - overflow : hidden; - - white-space : nowrap; - text-overflow : ellipsis; - vertical-align: top; -} - -.select:after { - content : "▼"; - position: absolute; - z-index : 1; - height : 100%; - width : 2em; /* 20px */ - top : 0; - right : 0; - - padding-top : .1em; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - text-align : center; - - border-left : .2em solid #000; - border-radius: 0 .1em .1em 0; - - background-color : #000; - color : #FFF; -} - -.select .optList { - z-index : 2; - - list-style: none; - margin : 0; - padding: 0; - - background: #f0f0f0; - border: .2em solid #000; - border-top-width : .1em; - border-radius: 0 0 .4em .4em; - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); - - -moz-box-sizing : border-box; - box-sizing : border-box; - - min-width : 100%; - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; -} - -.select .option { - padding: .2em .3em; -} - -.select .highlight { - background: #000; - color: #FFFFFF; -} -</pre> - -<h3 id="Resultat_pour_l'état_initial">Resultat pour l'état initial</h3> - -<div>{{ EmbedLiveSample("Basic_state", 120, 130) }}</div> - -<h2 id="Active_state" name="Active_state">État actif</h2> - -<h3 id="Active_state_HTML" name="Active_state_HTML">HTML</h3> - -<pre class="brush:html"><div class="select active"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> -</div></pre> - -<h3 id="Active_state_CSS" name="Active_state_CSS">CSS</h3> - -<pre class="brush:css">/* --------------- */ -/* Styles Requis */ -/* --------------- */ - -.select { - position: relative; - display : inline-block; -} - -.select.active, -.select:focus { - box-shadow: 0 0 3px 1px #227755; - outline: none; -} - -.select .optList { - position: absolute; - top : 100%; - left : 0; -} - -.select .optList.hidden { - max-height: 0; - visibility: hidden; -} - -/* ------------ */ -/* Style Chic */ -/* ------------ */ - -.select { - font-size : 0.625em; /* 10px */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : 0.2em solid #000; /* 2px */ - border-radius : 0.4em; /* 4px */ - - box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ - - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - display : inline-block; - width : 100%; - overflow : hidden; - - white-space : nowrap; - text-overflow : ellipsis; - vertical-align: top; -} - -.select:after { - content : "▼"; - position: absolute; - z-index : 1; - height : 100%; - width : 2em; /* 20px */ - top : 0; - right : 0; - - padding-top : .1em; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - text-align : center; - - border-left : .2em solid #000; - border-radius: 0 .1em .1em 0; - - background-color : #000; - color : #FFF; -} - -.select .optList { - z-index : 2; - - list-style: none; - margin : 0; - padding: 0; - - background: #f0f0f0; - border: .2em solid #000; - border-top-width : .1em; - border-radius: 0 0 .4em .4em; - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); - - -moz-box-sizing : border-box; - box-sizing : border-box; - - min-width : 100%; - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; -} - -.select .option { - padding: .2em .3em; -} - -.select .highlight { - background: #000; - color: #FFFFFF; -}</pre> - -<h3 id="Résultat_pour_état_actif">Résultat pour état actif</h3> - -<div>{{ EmbedLiveSample("Active_state", 120, 130) }}</div> - -<h2 id="Open_state" name="Open_state">État ouvert</h2> - -<h3 id="Open_state_HTML" name="Open_state_HTML">HTML</h3> - -<pre class="brush:html"><div class="select active"> - <span class="value">Cerise</span> - <ul class="optList"> - <li class="option highlight">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> -</div></pre> - -<h3 id="Open_state_CSS" name="Open_state_CSS">CSS</h3> - -<pre class="brush:css">/* --------------- */ -/* Styles Requis */ -/* --------------- */ - -.select { - position: relative; - display : inline-block; -} - -.select.active, -.select:focus { - box-shadow: 0 0 3px 1px #227755; - outline: none; -} - -.select .optList { - position: absolute; - top : 100%; - left : 0; -} - -.select .optList.hidden { - max-height: 0; - visibility: hidden; -} - -/* ------------ */ -/* Style Chic */ -/* ------------ */ - -.select { - font-size : 0.625em; /* 10px */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : 0.2em solid #000; /* 2px */ - border-radius : 0.4em; /* 4px */ - - box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */ - - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - display : inline-block; - width : 100%; - overflow : hidden; - - white-space : nowrap; - text-overflow : ellipsis; - vertical-align: top; -} - -.select:after { - content : "▼"; - position: absolute; - z-index : 1; - height : 100%; - width : 2em; /* 20px */ - top : 0; - right : 0; - - padding-top : .1em; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - text-align : center; - - border-left : .2em solid #000; - border-radius: 0 .1em .1em 0; - - background-color : #000; - color : #FFF; -} - -.select .optList { - z-index : 2; - - list-style: none; - margin : 0; - padding: 0; - - background: #f0f0f0; - border: .2em solid #000; - border-top-width : .1em; - border-radius: 0 0 .4em .4em; - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); - - -moz-box-sizing : border-box; - box-sizing : border-box; - - min-width : 100%; - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; -} - -.select .option { - padding: .2em .3em; -} - -.select .highlight { - background: #000; - color: #FFF; -}</pre> - -<h3 id="Resultat_pour_état_ouvert">Resultat pour état ouvert</h3> - -<div>{{ EmbedLiveSample("Open_state", 120, 130) }}</div> diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_2/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_2/index.html deleted file mode 100644 index dfb0eb3b6a..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_2/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Exemple 2 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 ---- -<p>Ceci est le deuxième exemple expliquant comment <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire un formulaire personnalisé</a>.</p> - -<h2 id="JS" name="JS">JS</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> -<form> -</pre> - -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">.widget select, -.no-widget .select { - position : absolute; - left : -5000em; - height : 0; - overflow : hidden; -} - -/* --------------- */ -/* Styles requis */ -/* --------------- */ - -.select { - position: relative; - display : inline-block; -} - -.select.active, -.select:focus { - box-shadow: 0 0 3px 1px #227755; - outline: none; -} - -.select .optList { - position: absolute; - top : 100%; - left : 0; -} - -.select .optList.hidden { - max-height: 0; - visibility: hidden; -} - -/* ------------ */ -/* Styles décor */ -/* ------------ */ - -.select { - font-size : 0.625em; /* 10px */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : 0.2em solid #000; /* 2px */ - border-radius : 0.4em; /* 4px */ - - box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ - - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - display : inline-block; - width : 100%; - overflow : hidden; - - white-space : nowrap; - text-overflow : ellipsis; - vertical-align: top; -} - -.select:after { - content : "▼"; - position: absolute; - z-index : 1; - height : 100%; - width : 2em; /* 20px */ - top : 0; - right : 0; - - padding-top : .1em; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - text-align : center; - - border-left : .2em solid #000; - border-radius: 0 .1em .1em 0; - - background-color : #000; - color : #FFF; -} - -.select .optList { - z-index : 2; - - list-style: none; - margin : 0; - padding: 0; - - background: #f0f0f0; - border: .2em solid #000; - border-top-width : .1em; - border-radius: 0 0 .4em .4em; - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); - - -moz-box-sizing : border-box; - box-sizing : border-box; - - min-width : 100%; - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; -} - -.select .option { - padding: .2em .3em; -} - -.select .highlight { - background: #000; - color: #FFFFFF; -}</pre> - -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> - -<pre class="brush: js">window.addEventListener("load", function () { - var form = document.querySelector('form'); - - form.classList.remove("no-widget"); - form.classList.add("widget"); -});</pre> - -<h3 id="Résultat_avec_JavaScript">Résultat avec JavaScript</h3> - -<p>{{ EmbedLiveSample('JS', 120, 130) }}</p> - -<h2 id="No_JS" name="No_JS">Sans JS</h2> - -<h3 id="HTML_Content_2">HTML Content</h3> - -<pre class="brush: html"><form class="no-widget"> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> -<form></pre> - -<h3 id="CSS_Content_2">CSS Content</h3> - -<pre class="brush: css">.widget select, -.no-widget .select { - position : absolute; - left : -5000em; - height : 0; - overflow : hidden; -}</pre> - -<h3 id="Result_for_No_JS">Result for No JS</h3> - -<p>{{ EmbedLiveSample('No_JS', 120, 130) }}</p> - -<p> </p> diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/index.html deleted file mode 100644 index 4173ff9f9c..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/index.html +++ /dev/null @@ -1,837 +0,0 @@ ---- -title: Comment construire des widgets de formulaires personnalisés -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés -tags: - - Avancé - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Dans de nombreux cas les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets de formulaires HTML disponibles</a> ne suffisent pas. Si vous voulez composer certains widgets dans un <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">style avancé</a> tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.</p> - -<p>Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.</p> - -<div class="note"> -<p><strong>Note :</strong> Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.</p> -</div> - -<h2 id="Conception_structure_et_sémantique">Conception, structure et sémantique</h2> - -<p>Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible.</p> - -<p>Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :</p> - -<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> - -<p>Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).</p> - -<p>En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :</p> - -<dl> - <dt>Le widget est dans son état normal :</dt> - <dd> - <ul> - <li>la page se charge</li> - <li>le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget</li> - <li>le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier</li> - </ul> - </dd> -</dl> - -<p> </p> - -<dl> - <dd> - <div class="note"> - <p><strong>Note :</strong> Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">combinaison Option+Tab</a>.</p> - </div> - </dd> - <dt>Le widget est sans son état actif :</dt> - <dd> - <ul> - <li>l'utilisateur clique sur lui</li> - <li>l'utilisateur presse la touche Tabulation et obtient le focus</li> - <li>le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.</li> - </ul> - </dd> - <dt>Le widget est dans un état ouvert :</dt> - <dd> - <ul> - <li>le widget est dans un état autre que ouvert et l'utilisateur clique dessus.</li> - </ul> - </dd> -</dl> - -<p>Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :</p> - -<dl> - <dt>La valeur change quand :</dt> - <dd> - <ul> - <li>l'utilisateur clique sur une option quand le widget est dans l'état ouvert</li> - <li>l'utilisateur presse la touche <kbd>↑</kbd> ou <kbd>↓</kbd> quand le widget est dans l'état actif</li> - </ul> - </dd> -</dl> - -<p>Enfin, définissons comment les options du widget doivent se comporter :</p> - -<ul> - <li>Quand le widget est ouvert, l'option sélectionnée est mise en valeur</li> - <li>Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal</li> -</ul> - -<p>Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.</p> - -<p>Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).</p> - -<p>Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à <a href="https://fr.wikipedia.org/wiki/Test_utilisateur">faire des tests utilisateur</a>. Ce processus est appelé UX Design <span class="CLPzrc Y0NH2b">(<strong>U</strong>ser e<strong>X</strong>perience)</span>. Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :</p> - -<ul> - <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li> - <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li> - <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li> -</ul> - -<div class="note"> -<p><strong>Note : </strong>De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec <kbd>Alt</kbd>+<strong><kbd>↓</kbd></strong> sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement <code>click</code>.</p> -</div> - -<h3 id="Definition_de_la_structure_HTML_et_de_la_sémantique">Definition de la structure HTML et de la sémantique</h3> - -<p>Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément <select> :</p> - -<pre class="brush: html"><!-- Ceci est notre conteneur principal pour le widget. L'attribut tabindex - est ce qui permet à l'utilisateur de mettre le focus sur le widget. - Nous verrons plus loin que c'est mieux de le faire avec JavaScript. --> -<div class="select" tabindex="0"> - - <!-- Ce containeur sera utilisé pour afficher la valeur courante du widget --> - <span class="value">Cerise</span> - - <!-- Ce conteneur contiendra toutes les options disponibles pour le widget. - Comme c'est une liste, il y sens à utiliser l'élément ul. --> - <ul class="optList"> - <!-- Chaque option ne contient que la valeur à afficher, Nous verrons plus loin - comment gérer la valeur réelle qui sera envoyée avec les données du formulaire --> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - -</div></pre> - -<p>Notez l'utilisation de noms de classes qui identifient chaque partie pertinente indépendamment des éléments HTML sous-jacents utilisés. Ceci est important pour s'assurer que nous n'allons pas lier les CSS et JavaScript à une structure HTML forte, pour pouvoir faire des changements d'implémentation plus tard sans casser le code qui utilise le widget. Par exemple, si vous souhaitez implémenter l'équivalent de l'élément {{HTMLElement("optgroup")}}.</p> - -<h3 id="Composition_et_ressenti_avec_les_CSS">Composition et ressenti avec les CSS</h3> - -<p>Maintenant que nous avons une structure, nous pouvons commencer à concevoir notre widget. Le but de construire un widget personnalisé est de pouvoir lui donner exactement le style que nous voulons. Pour cela, nous allons partager le travail sur les CSS en deux parties : la première relative aux règles des CSS absolument nécessaires pour que notre widget se comporte comme un élément {{HTMLElement("select")}}, la seconde constituée des décorations utilisés lui donnant un aspect personnalisé.</p> - -<h4 id="Styles_obligatoires">Styles obligatoires</h4> - -<p>Les styles obligatoires sont ceux nécessaires à la gestion des trois états du widget.</p> - -<pre class="brush: css">.select { - /* Celui-ci crée un contexte de positionnement pour la liste des options */ - position: relative; - - /* Celui-ci fait que le widget devient partie du flot textuel - et devient en même temps dimensionnable */ - display : inline-block; -}</pre> - -<p>Nous avons besoin d'une classe <code>active</code> supplémentaire pour définir l'apparence du widget dans son état actif. Comme le widget peut recevoir le focus, nous doublons ce style personnalisé avec la pseudo-classe {{cssxref(":focus")}} afin d'être sûrs qu'elles se comporteront de la même manière.</p> - -<pre class="brush: css">.select.active, -.select:focus { - outline: none; - - /* Cette propriété box-shadow n'est pas requise à proprement parler, mais il est - important de s'assurer que l'état actif soit visible, c'est pourquoi nous - utilisons une valeur par défaut. Vous êtes libre de la modifier. */ - box-shadow: 0 0 3px 1px #227755; -}</pre> - -<p>Passons maintenant à la liste des options :</p> - -<pre class="brush: css">/* Le sélecteur .select ici est du sucre syntaxique (le fait de donner au - programmeur des possibilités d'écriture plus succinctes ou plus proches - d'une notation usuelle) pour s'assurer que les classes que nous définissons - sont les seules à l'intérieur du widget. */ -.select .optList { - /* Ceci assure que la liste des options sera affichée au dessous de la valeur - et en dehors du flot HTML */ - position : absolute; - top : 100%; - left : 0; -}</pre> - -<p>Nous avons besoin d'une classe supplémentaire pour gérer la liste d'options cachée. Ceci est nécessaire pour la gestion des différences entre état actif et état ouvert qui ne correspondent pas exactement.</p> - -<pre class="brush: css">.select .optList.hidden { - /* Ceci est un moyen simple pour cacher la liste tout en conservant l'accessibilité, - nous reparlerons plus loin d'accessibilité */ - max-height: 0; - visibility: hidden; -}</pre> - -<h4 id="Embellissements">Embellissements</h4> - -<p>Maintenant que nous avons mis en place les fonctionnalités de base, le divertissement peut commencer. Ce qui suit n'est qu'un exemple de ce qui est possible, et correspondra à la capture d'écran au début de cet article. Cependant, vous devriez vous sentir libre d'expérimenter et de voir ce que cela donne.</p> - -<pre class="brush: css">.select { - /* Toutes les tailles seront exprimées en valeurs em (lettre M, étalon - du cadratin : cadre dans lequel sont dessinées toutes les lettres d'une - police de caractères) pour des raisons d'accessibilité (pour être sûrs - que le widget reste redimensionnable si l'utilisateur utilise le zoom - du navigateur en mode texte exclusif). Les calculs sont faits en - supposant que 1em==16px qui est la valeur par défaut dans la majorité - des navigateurs. Si vous êtes perdus avec les conversions entre px et - em, essayez http://riddle.pl/emcalc/ */ - font-size : 0.625em; /* ceci (10px) est le nouveau contexte de taille de - police pour la valeur em dans ce contexte. */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - /* Nous avons besoin de plus d'espace pour la flèche vers le bas que nous - allons ajouter. */ - padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : .2em solid #000; /* 2px */ - border-radius : .4em; /* 4px */ - box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */ - - /* La première déclaration concerne les navigateurs qui ne prennent pas en - charge les gradients linéaires. La deuxième déclaration est parce que - les navigateurs basés sur WebKit ne l'ont pas encore préfixé. Si vous - souhaitez prendre en charge les anciens navigateurs, essayez - http://www.colorzilla.com/gradient-editor/ */ - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - /* Comme la valeur peut être plus large que le widget, nous devons nous - assurer qu'elle ne changera pas la largeur du widget. */ - display : inline-block; - width : 100%; - overflow : hidden; - - vertical-align: top; - - /* Et si le contenu déborde, c'est mieux d'avoir une jolie abreviation. */ - white-space : nowrap; - text-overflow: ellipsis; -</pre> - -<p>Nous n'avons pas besoin d'un élément supplémentaire pour concevoir la flèche vers le bas ; à la place, nous utilisons le pseudo-élément {{cssxref(":after:after")}}. Cependant, elle pourrait également être mise en œuvre à l'aide d'une simple image de fond sur la classe <code>select</code>.</p> - -<pre class="brush: css">.select:after { - content : "▼"; /* Nous utilisons le caractère unicode U+25BC; - voir http://www.utf8-chartable.de */ - position: absolute; - z-index : 1; /* Il est important d'empêcher la flèche de chevaucher la liste des options */ - top : 0; - right : 0; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - height : 100%; - width : 2em; /* 20px */ - padding-top : .1em; /* 1px */ - - border-left : .2em solid #000; /* 2px */ - border-radius: 0 .1em .1em 0; /* 0 1px 1px 0 */ - - background-color : #000; - color : #FFF; - text-align : center; -}</pre> - -<p>Maintenant, composons la décoration de la liste des options :</p> - -<pre class="brush: css">.select .optList { - z-index : 2; /* Nous disons explicitement que la liste des options doit toujours passer sur la flèche */ - - /* cela réinitialiser le style par défaut de l'élément ul */ - list-style: none; - margin : 0; - padding: 0; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - /* Cela nous assure que même si les valeurs sont plus petites que le widget, - la liste des options sera aussi large que le widget lui‑même */ - min-width : 100%; - - /* Dans le cas où la liste est trop longue, son contenu débordera verticalement - (ce qui ajoutera une barre de déroulement automatiquement) mais jamais horizontalement - (car nous n'avons jamais défini de largeur, la liste ajustera automatiquement sa largeur - Si ce n'est pas possible, le contenu sera tronqué) */ - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; - - border: .2em solid #000; /* 2px */ - border-top-width : .1em; /* 1px */ - border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */ - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */ - background: #f0f0f0; -}</pre> - -<p>Pour les options, nous devons ajouter une classe <code>highlight</code> pour pouvoir identifier la valeur que l'utilisateur choisira (ou a choisi).</p> - -<pre class="brush: css">.select .option { - padding: .2em .3em; /* 2px 3px */ -} - -.select .highlight { - background: #000; - color: #FFFFFF; -}</pre> - -<p>Donc, voici le résultat avec les trois états :</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Basic state</th> - <th scope="col" style="text-align: center;">Active state</th> - <th scope="col" style="text-align: center;">Open state</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample('Basic_state',120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td> - <td>{{EmbedLiveSample("Active_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td> - <td>{{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td> - </tr> - <tr> - <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td> - </tr> - </tbody> -</table> - -<h2 id="Donnez_vie_à_votre_widget_avec_JavaScript">Donnez vie à votre widget avec JavaScript</h2> - -<p>Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.</p> - -<div class="warning"> -<p>Avertissement : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.</p> -</div> - -<div class="note"> -<p>Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component</a> » apporte des réponses à cette question particulière. Le <a href="http://x-tags.org/">projet X-Tag</a> est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.</p> -</div> - -<h3 id="Pourquoi_ne_fonctionne-t-il_pas">Pourquoi ne fonctionne-t-il pas ?</h3> - -<p> </p> - -<p>Avant de commencer, il est important de se rappeler quelque chose de très important à propos de JavaScript : dans un navigateur, c'est une technique peu fiable. Lorsque vous créez des widgets personnalisés, vous êtes obligé de faire appel à JavaScript parce que c'est un fil nécessaire pour tout lier ensemble. Cependant, il existe de nombreux cas dans lesquels JavaScript n'est pas capable de s'exécuter dans le navigateur :</p> - -<ul> - <li>L'utilisateur a désactivé le JavaScript : c'est un cas assez inhabituel, peu de personnes désactivent le JavaScript de nos jours.</li> - <li>Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr.</li> - <li>Le script est bogué. Il faut toujours prendre en considération cette éventualité.</li> - <li>Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur.</li> - <li>Le script est en conflit avec, ou est affecté par un extension de navigateur (comme l'extension « <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/">No script</a> » de Firefox ou « <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">Scripts »</a> de Chrome).</li> - <li>L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s.</li> -</ul> - -<p> </p> - -<p> </p> - -<p>En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.</p> - -<p>Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.</p> - -<p>Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.</p> - -<p> </p> - -<pre class="brush: html"><body class="no-widget"> - <form> - <select name="myFruit"> - <option>Cerise</option> - <option>Citron</option> - <option>Banane</option> - <option>Fraise</option> - <option>Pomme</option> - </select> - - <div class="select"> - <span class="value">Cerise</span> - <ul class="optList hidden"> - <li class="option">Cerise</li> - <li class="option">Citron</li> - <li class="option">Banane</li> - <li class="option">Fraise</li> - <li class="option">Pomme</li> - </ul> - </div> - </form> - -</body></pre> - -<p> </p> - -<p>Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel » si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.</p> - -<pre class="brush: css">.widget select, -.no-widget .select { - /* Ce sélecteur CSS dit fondamentalement : - - soit la classe body est "widget" et donc l'élément {{HTMLElement("select")}} réel sera caché - - soit la classe body n'a pas changé, elle est toujours "no-widget", - et donc les éléments, dont la classe est « select », doivent être cachés */ - position : absolute; - left : -5000em; - height : 0; - overflow : hidden; -}</pre> - -<p> </p> - -<p>Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.</p> - -<p> </p> - -<p> </p> - -<pre class="brush: js">window.addEventListener("load", function () { - document.body.classList.remove("no-widget"); - document.body.classList.add("widget"); -});</pre> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Sans JavaScript</th> - <th scope="col" style="text-align: center;">Avec JavaScript</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}</td> - <td>{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}</td> - </tr> - <tr> - <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Testez le code source</a></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note :</strong> Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.</p> -</div> - -<h3 id="Rendre_le_travail_plus_facile">Rendre le travail plus facile</h3> - -<p> </p> - -<p>Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer).</p> - -<p>Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple).</p> - -<p>Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) :</p> - -<ol> - <li>{{domxref("element.classList","classList")}}</li> - <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li> - <li><code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (ce n'est pas du DOM mais du JavaScript moderne)</li> - <li>{{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}</li> -</ol> - -<p>Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. C'est important, car les objets <code>Array</code> acceptent la fonction <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un <code>Array</code> et que <code>forEach</code> est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de <code>forEach à</code> {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :</p> - -<pre class="brush: js">NodeList.prototype.forEach = function (callback) { - Array.prototype.forEach.call(this, callback); -}</pre> - -<p>On ne plaisantait pas quand on a dit que c'était facile à faire.</p> - -<h3 id="Construction_des_fonctions_de_rappel_d'événements">Construction des fonctions de rappel d'événements</h3> - -<p>Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget.</p> - -<pre class="brush: js">// Cette fonction est utilisée chaque fois que nous voulons désactiver un -// widget personnalisé. Elle prend un paramètre -// select : le nœud DOM avec la classe select à désactiver -function deactivateSelect(select) { - - // Si le widget n'est pas actif, il n'y a rien à faire - if (!select.classList.contains('active')) return; - - // Nous devons obtenir la liste des options pour le widget personnalisé - var optList = select.querySelector('.optList'); - - // Nous cachons la liste des options - optList.classList.add('hidden'); - - // et nous désactivons le widget personnalisé lui-même - select.classList.remove('active'); -} - -// Cette fonction sera utilisée chaque fois que l'utilisateur veut (des)activer le widget -// Elle prend deux paramètres : -// select : le nœud DOM de la classe `select` à activer -// selectList : la liste de tous les nœuds DOM de la classe `select` -function activeSelect(select, selectList) { - - // Si le widget est déjà actif il n'y a rien à faire - if (select.classList.contains('active')) return; - - // Nous devons désactiver tous les widgets personnalisés - // comme la fonction deactivateSelect remplit toutes les fonctionnalités de la - // fonction de rappel forEach, nous l'utilisons directement sans utiliser - // une fonction anonyme intermédiaire. - selectList.forEach(deactivateSelect); - - // Et nous activons l'état du widget donné - select.classList.add('active'); -} - -// Cette fonction sera utilisée chaque fois que l'utilisateur veut enrouler/dérouler la -// liste des options -// Elle prend un paramètre : -// select : le nœud DOM de la liste à basculer -function toggleOptList(select) { - - // La liste est prise à partir du widget - var optList = select.querySelector('.optList'); - - // Nous changeons la classe de la liste pour l'enrouler/dérouler - optList.classList.toggle('hidden'); -} - -// Cett fonction sera utilisée chaque fois qu'il faut mettre en surbrillance -// une option. Elle prend deux paramètres : -// select : le nœud DOM de la classe `select` -// contenant l'option à mettre en surbrillance -// option : le nœud DOM de la classe `option` à mettre en surbrillance -function highlightOption(select, option) { - - // Obtenir la liste de toutes les options disponibles pour l'élémént sélectionné - var optionList = select.querySelectorAll('.option'); - - // Supprimer la surbrillance pour toutes les options - optionList.forEach(function (other) { - other.classList.remove('highlight'); - }); - - // Mettre en surbrillance l'option correcte - option.classList.add('highlight'); -};</pre> - -<p>C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé.</p> - -<p>Ensuite, nous assujettissons ces fonctions aux événement appropriés :</p> - -<pre class="brush: js">// Nous lions le widget aux événements dès le chargement du document -window.addEventListener('load', function () { - var selectList = document.querySelectorAll('.select'); - - // Chaque widget personnalisé doit être initialisé - selectList.forEach(function (select) { - - // de même que tous les éléments `option` - var optionList = select.querySelectorAll('.option'); - - // Chaque fois que l'utilisateur passe le pointeur de souris - // sur une option, nous mettons en surbrillance la dite option - - optionList.forEach(function (option) { - option.addEventListener('mouseover', function () { - // Note : les variables `select` et `option` sont des "closures" - // disponibles dans la portée de notre appel de fonction. - highlightOption(select, option); - }); - }); - - // Chaque fois que l'utilisateur clique sur un élément personnalisé - select.addEventListener('click', function (event) { - // Note : la variable `select` est une "closure" - // available dans la portée de notre appel de fonction. - - // Nous basculons la visibilité de la liste des options - toggleOptList(select); - }); - - // Dans le cas où le widget obtient le focus - // Le widget obtient le focus chaque fois que l'utilisateur clique dessus - // ou presse la touche Tab pour avoir accès au widget - select.addEventListener('focus', function (event) { - // Note : les variable `select` et `selectList` sont des "closures" - // disponibles dans la portée de notre appel de fonction. - - // Nous activons le widget - activeSelect(select, selectList); - }); - - // Dans le cas où le widget perd le focus - select.addEventListener('blur', function (event) { - // Note : la variable `select` est une "closure" - // disponible dans la portée de notre appel de fonction. - - // Nous désactivons le widget - deactivateSelect(select); - }); - }); -});</pre> - -<p>A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après.</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Exemple en direct</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td> - </tr> - </tbody> -</table> - -<h3 id="Gérer_la_valeur_du_widget">Gérer la valeur du widget</h3> - -<p> </p> - -<p>Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire.</p> - -<p>La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous.</p> - -<p>Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé :</p> - -<pre class="brush: js">// Cette fonction met à jour la valeur affichée et la synchronise avec celle -// du widget natif. Elle prend deux paramètres : -// select : le nœud DOM de la classe `select` contenant la valuer à mettre à jour -// index : l'index de la valeur choisie -function updateValue(select, index) { - // Nous devons obtenir le widget natif correspondant au widget personnalisé - // Dans notre exemple, le widget natif est un parent du widget personnalisé - var nativeWidget = select.previousElementSibling; - - // Nou devons aussi obtenir la valeur de remplacement du widget personnalisé - var value = select.querySelector('.value'); - - // Et nous avons besoin de toute la liste des options - var optionList = select.querySelectorAll('.option'); - - // Nous définissons l'index choisi à l'index du choix - nativeWidget.selectedIndex = index; - - // Nous mettons à jour la valeur de remplacement en accord - value.innerHTML = optionList[index].innerHTML; - - // Et nous mettons en surbrillance l'option correspondante du widget personnalisé - highlightOption(select, optionList[index]); -}; - -// Cette fonction renvoie l'index courant dans le widget natif -// Elle prend un paramètre : -// select : le nœud DOM avec la classe `select` relative au widget natif -function getIndex(select) { - // Nous avons besoin d'avoir accès au widget natif pour le widget personnalisé - // Dans notre exemple, le widget natif est un parent du widget personnalisé - var nativeWidget = select.previousElementSibling; - - return nativeWidget.selectedIndex; -};</pre> - -<p>Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés :</p> - -<pre class="brush: js">// Nous lions le widget aux événements dès le chargement du document -window.addEventListener('load', function () { - var selectList = document.querySelectorAll('.select'); - - // Chaque widget personnalisé doit être initialisé - selectList.forEach(function (select) { - var optionList = select.querySelectorAll('.option'), - selectedIndex = getIndex(select); - - // Nous rendons le widget personnalisé capable d'avoir le focus - select.tabIndex = 0; - - // Nous faisons en sorte que le widget natif ne puisse plus avoir le focus - select.previousElementSibling.tabIndex = -1; - - // Nous nous assurons que la valeur sélectionnée par défaut est bien affichée - updateValue(select, selectedIndex); - - // Chaque fois que l'utilisateur clique sur une option, nous mettons à - // jour la valeur en accord - optionList.forEach(function (option, index) { - option.addEventListener('click', function (event) { - updateValue(select, index); - }); - }); - - // Chaque fois que l'utilisateur utilise le clavier sur un widget - // avec focus, les valeurs sont mises à jour en accord - - select.addEventListener('keyup', function (event) { - var length = optionList.length, - index = getIndex(select); - - // Quand l'utilisateur presse ⇓, nous allons à l'option suivante - if (event.keyCode === 40 && index < length - 1) { index++; } - - // Quand l'utilisateur presse ⇑, nous sautons à l'option suivante - if (event.keyCode === 38 && index > 0) { index--; } - - updateValue(select, index); - }); - }); -});</pre> - -<p>Dans le code ci-dessus, il faut noter l'utilisation de la propriété <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.</p> - -<p>Et voilà, nous avons terminé ! Voici le résultat :</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Exemple en direct</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td> - </tr> - </tbody> -</table> - -<p>Mais attendez, avons‑nous vraiment terminé ?</p> - -<h2 id="Le_rendre_«_accessible_»">Le rendre « accessible »</h2> - -<p> </p> - -<p>Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !</p> - -<p>Heureusement, il existe une solution et elle s'appelle <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA signifie « Accessible Rich Internet Application » et c'est une<a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/"> norme W3C </a>spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.</p> - -<h3 id="L'attribut_role">L'attribut <code>role</code></h3> - -<p>L'attribut clé utilisé par <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est l'attribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a>. L'attribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role </code></a> accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code>. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle <code>option</code>).</p> - -<p>Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle <code>grid</code>, et l'élément {{HTMLElement("ul")}} correspond au rôle <code>list</code>. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle <code>listbox</code> de notre widget remplacera le rôle <code>list</code> de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle <code>presentation</code>. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.</p> - -<p>Pour prendre en charge le rôle <code>listbos</code>, nous n'avons qu'à mettre à jour notre HTML comme ceci :</p> - -<pre class="brush: html"><!-- Nous ajoutons le role="listbox" en attribut de l'élément de tête --> -<div class="select" role="listbox"> - <span class="value">Cherry</span> - <!-- Nous ajoutons aussi le role="presentation" à l'élément ul --> - <ul class="optList" role="presentation"> - <!-- et le rôle="option" en attribut de tous les éléments li --> - <li role="option" class="option">Cherry</li> - <li role="option" class="option">Lemon</li> - <li role="option" class="option">Banana</li> - <li role="option" class="option">Strawberry</li> - <li role="option" class="option">Apple</li> - </ul> -</div></pre> - -<div class="note"> -<p><strong>Note :</strong> Inclure à la fois l'attribut <code>role</code> et l'attribut <code>class</code> n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">selecteurs d'attribut CSS</a>.</p> -</div> - -<h3 id="L'attribut_aria-selected">L'attribut <code>aria-selected</code></h3> - -<p>Utiliser l'attribut <code>role</code> ne suffit pas. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : <code>aria-selected</code>.</p> - -<p>L'attribut <code>aria-selected</code> s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction <code>updateValue()</code> :</p> - -<pre class="brush: js">function updateValue(select, index) { - var nativeWidget = select.previousElementSibling; - var value = select.querySelector('.value'); - var optionList = select.querySelectorAll('.option'); - - // Nous nous assurons qu'aucune option n'est sélectionnée - optionList.forEach(function (other) { - other.setAttribute('aria-selected', 'false'); - }); - - // Nous nous assurons que l'option choisie est sélectionnée - optionList[index].setAttribute('aria-selected', 'true'); - - nativeWidget.selectedIndex = index; - value.innerHTML = optionList[index].innerHTML; - highlightOption(select, optionList[index]); -};</pre> - -<p>Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> ou <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>) :</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Exemple en direct</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td> - </tr> - </tbody> -</table> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque).</p> - -<p>Voici quelques bibliothèques à prendre en considération avant de coder les vôtres :</p> - -<ul> - <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li> - <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li> - <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li> - <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a">et beaucoup d'autres…</a></li> -</ul> - -<p>Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien !</p> - -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html b/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html deleted file mode 100644 index 91cd643bd1..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Exemple -slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple -translation_of: Learn/Forms/How_to_structure_a_web_form/Example ---- -<p>Ceci est un exemple de formulaire de paiement basique extrait de l'article <a href="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a>.</p> - -<h2 id="Un_formulaire_de_paiement" name="Un_formulaire_de_paiement">Un formulaire de paiement</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form> - <h1>Formulaire de paiement</h1> - <p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p> - <section> - <h2>Informations de contact</h2> - <fieldset> - <legend>Qualité</legend> - <ul> - <li> - <label for="title_1"> - <input type="radio" id="title_1" name="title" value="M." > - Monsieur - </label> - </li> - <li> - <label for="title_2"> - <input type="radio" id="title_2" name="title" value="Mme."> - Madame - </label> - </li> - </ul> - </fieldset> - <p> - <label for="name"> - <span>Nom :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="name" name="username"> - </p> - <p> - <label for="mail"> - <span>e-mail :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="email" id="mail" name="usermail"> - </p> - <p> - <label for="password"> - <span>Mot de passe :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="password" id="pwd" name="password"> - </p> - </section> - <section> - <h2>Informations de paiement</h2> - <p> - <label for="card"> - <span>Type de carte :</span> - </label> - <select id="card" name="usercard"> - <option value="visa">Visa</option> - <option value="mc">Mastercard</option> - <option value="amex">American Express</option> - </select> - </p> - <p> - <label for="number"> - <span>Numéro :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="number" name="cardnumber"> - </p> - <p> - <label for="date"> - <span>Validité :</span> - <strong><abbr title="required">*</abbr></strong> - <em>format mm/aa</em> - </label> - <input type="text" id="date" name="expiration"> - </p> - </section> - <section> - <p> <button type="submit">Valider le paiement</button> </p> - </section> - </form></pre> - -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css"> h1 { - margin-top: 0; - } - - ul { - margin: 0; - padding: 0; - list-style: none; - } - - form { - margin: 0 auto; - width: 450px; - padding: 1em; - border: 1px solid #CCC; - border-radius: 1em; - } - - div+div { - margin-top: 1em; - } - - label span { - display: inline-block; - width: 120px; - text-align: right; - } - - input, textarea { - font: 1em sans-serif; - width: 250px; - box-sizing: border-box; - border: 1px solid #999; - } - - input[type=checkbox], input[type=radio] { - width: auto; - border: none; - } - - input:focus, textarea:focus { - border-color: #000; - } - - textarea { - vertical-align: top; - height: 5em; - resize: vertical; - } - - fieldset { - width: 250px; - box-sizing: border-box; - margin-left: 146px; - border: 1px solid #999; - } - - button { - margin: 20px 0 0 124px; - } - - label { - position: relative; - } - - label em { - position: absolute; - right: 5px; - top: 20px; - }</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }}</p> - -<p> </p> diff --git a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html b/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html deleted file mode 100644 index f7d2e7db7d..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html +++ /dev/null @@ -1,310 +0,0 @@ ---- -title: Comment structurer un formulaire HTML -slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML -tags: - - Apprentissage - - Débutant - - Exemple - - Formulaires - - Guide - - HTML - - Structure - - Web -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs et les <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow">connaissances de base du HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles.</td> - </tr> - </tbody> -</table> - -<p>La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en <a href="/fr/docs/HTML" title="/en-US/docs/HTML">HTML</a>. vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et <a href="/fr/docs/MDN/Doc_status/Accessibility">accessible</a>.</p> - -<h2 id="L'élément_<form>">L'élément <form></h2> - -<p>L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser.</p> - -<p>Nous l'avons déjà rencontré dans l'article précédent.</p> - -<div class="note"><strong>Note :</strong> Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.</div> - -<p>Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.</p> - -<div class="note"> -<p><strong>Note</strong>: HTML5 introduit l'attribut <code>form</code> dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.</p> -</div> - -<h2 id="Les_éléments_<fieldset>_et_<legend>">Les éléments <fieldset> et <legend></h2> - -<p>L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture <fieldset>. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur.</p> - -<p>De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> ou <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget.</p> - -<p>Voici un petit exemple :</p> - -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">>Taille du jus de fruits</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>small<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Petite<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>medium<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Moyen<span class="tag token"><span class="tag token"><span class="punctuation token">ne</</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_3<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>large<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_3<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Grand<span class="tag token"><span class="tag token"><span class="punctuation token">e</</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> - -<div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">directement aussi</a>).</p> -</div> - -<p>En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.</p> - -<p>Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.</p> - -<p>En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'<a href="https://www.nvaccess.org/download/">écouter comment un lecteur d'écran</a> l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire.</p> - -<h2 id="L'élément_<label>">L'élément <label></h2> - -<p>Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>user_name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> - -<p>Avec un élément <code><label></code> correctement associé à <code><input></code> par l'intermédiaire respectivement des attributs <code>for</code> et <code>id</code> (l'attribut <code>for</code> de <label> référence l'attibut <code>id</code> du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».</p> - -<p>Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.</p> - -<p>Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - Nom : <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>user_name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span></code></pre> - -<p>Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut <code>for</code> parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.</p> - -<h3 id="Les_étiquettes_peuvent_être_cliquées_aussi_!">Les étiquettes peuvent être cliquées, aussi !</h3> - -<p>Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.</p> - -<p>Par exemple :</p> - -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>J'aime les cerises<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_cherry<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>J'aime les bananes<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_banana<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> - -<div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">directement aussi</a>).</p> -</div> - -<h3 id="Étiquettes_multiples">Étiquettes multiples</h3> - -<p>En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.</p> - -<p>Considérons cet exemple :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Les champs obligatoires sont suivis de <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- Donc ceci : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- sera mieux programmé ainsi : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- mais ceci est probablement encore meilleur : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> - -<p>Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.</p> - -<ul> - <li>Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments <label> embrouillent le lecteur d'écran.</li> - <li>Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.</li> - <li>Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ».</li> -</ul> - -<div class="note"> -<p><strong>Note</strong> : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.</p> -</div> - -<div class="note"> -<p><strong>Note</strong> : Vous trouverez cet exemple sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">directement aussi</a>). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !</p> -</div> - -<h2 id="Structures_HTML_courantes_dans_les_formulaires">Structures HTML courantes dans les formulaires</h2> - -<p>Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire.</p> - -<p>Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio).</p> - -<p>En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe.</p> - -<p>Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables.</p> - -<p>Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.</p> - -<h3 id="Apprentissage_actif_construire_une_structure_de_formulaire">Apprentissage actif : construire une structure de formulaire</h3> - -<p>Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (<a href="/fr/docs/Learn/HTML/Forms/The_native_form_widgets">Les widgets natifs pour formulaire</a>). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.</p> - -<ol start="1" style="list-style-type: decimal;"> - <li>Pour commencer, faites une copie locale de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle vierge</a> et des <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS pour notre formulaire de paiement </a> dans un nouveau répertoire.</li> - <li>Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : - <pre class="brush: html line-numbers language-html"><code class="language-html"><link href="payment-form.css" rel="stylesheet"></code></pre> - </li> - <li>Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : - <pre class="brush: html line-numbers language-html"><form> - -</form></pre> - </li> - <li>Entre les balises <code><form></code>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : - <pre class="brush: html line-numbers language-html"><code class="language-html"><h1>Formulaire de paiement</h1> -<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p></code></pre> - </li> - <li>Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : - <pre class="brush: html line-numbers language-html"><code class="language-html"><section> - <h2>Informations de contact</h2> - <fieldset> - <legend>Qualité</legend> - <ul> - <li> - <label for="title_1"> - <input type="radio" id="title_1" name="title" value="M." > - Monsieur - </label> - </li> - <li> - <label for="title_2"> - <input type="radio" id="title_2" name="title" value="Mme."> - Madame - </label> - </li> - </ul> - </fieldset> - <p> - <label for="name"> - <span>Nom : </span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="name" name="username"> - </p> - <p> - <label for="mail"> - <span>e-mail :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="email" id="mail" name="usermail"> - </p> - <p> - <label for="pwd"> - <span>Mot de passe :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="password" id="pwd" name="password"> - </p> -</section></code></pre> - </li> - <li>Nous arrivons maintenant à la deuxième <code><section></code> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <code><p></code>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième est un élément <code><input></code> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <code><input></code> de type <code>date</code> pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : - <pre class="brush: html line-numbers language-html"><code class="language-html"> -<section> - <h2>Informations de paiement</h2> - <p> - <label for="card"> - <span>Type de carte :</span> - </label> - <select id="card" name="usercard"> - <option value="visa">Visa</option> - <option value="mc">Mastercard</option> - <option value="amex">American Express</option> - </select> - </p> - <p> - <label for="number"> - <span>Numéro de carte :</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="number" name="cardnumber"> - </p> - <p> - <label for="date"> - <span>Validité :</span> - <strong><abbr title="required">*</abbr></strong> - <em>format mm/aa</em> - </label> - <input type="text" id="date" name="expiration"> - </p> -</section></code></pre> - </li> - <li>La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type <code>submit</code>, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : - <pre class="brush: html line-numbers language-html"><code class="language-html"><p> <button type="submit">Valider le paiement</button> </p></code></pre> - </li> -</ol> - -<p>Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">source</a> payment-form.html et une exécution <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">directe</a>):</p> - -<p>{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}</p> - -<h2 id="Résumé">Résumé</h2> - -<p>Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> -</ul> - -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><span>Comment structurer un formulaire HTML</span></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_données_des_formulaires/index.html b/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_données_des_formulaires/index.html deleted file mode 100644 index bc81996fda..0000000000 --- a/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_données_des_formulaires/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: Envoyer et extraire les données des formulaires -slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires -tags: - - Débutant - - En-têtes - - Fichier - - Formulaire - - Guide - - HTML - - HTTP - - Sécurité - - Web -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -<div>{{learnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs, <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow">compréhension du HTML</a>, et<a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow"> </a>connaissances de base de <a class="new" href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP" rel="nofollow">HTTP </a>et <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps" rel="nofollow">programmation côté serveur.</a></td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.</td> - </tr> - </tbody> -</table> - -<h2 id="Où_vont_les_données">Où vont les données ?</h2> - -<p>Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.</p> - -<h3 id="A_propos_de_l'architecture_client_serveur">A propos de l'architecture client / serveur</h3> - -<p>Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>...), en utilisant le <a href="/fr/docs/HTTP">protocole HTTP</a>. Le serveur répond à la requête en utilisant le même protocole.</p> - -<p><img alt="Un schéma élémentaire d'architecture client/serveur sur le Web " src="https://mdn.mozillademos.org/files/16000/client-serveur.png" style="height: 141px; width: 400px;"></p> - -<p>Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.</p> - -<div class="note"> -<p><strong>Note</strong>: Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a>.</p> -</div> - -<h3 id="Côté_client_définition_de_la_méthode_d'envoi_des_données">Côté client : définition de la méthode d'envoi des données</h3> - -<p>L'élément {{HTMLElement("form")}} définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont {{htmlattrxref("action","form")}} et {{htmlattrxref("method","form")}}.</p> - -<h4 id="L'attribut_htmlattrxref(actionform)">L'attribut {{htmlattrxref("action","form")}}</h4> - -<p>Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.</p> - -<p>Dans cet exemple, les données sont envoyées à une URL précise — http://foo.com :</p> - -<pre class="brush: html"><form action="http://foo.com"></pre> - -<p class="brush: html">Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :</p> - -<pre class="brush: html"><form action="/somewhere_else"></pre> - -<p class="brush: html">Sans attribut, comme ci-dessous, les données de {{HTMLElement("form")}} sont envoyées à la même page que celle du formulaire :</p> - -<pre class="brush: html"><form></pre> - -<p class="brush: html">De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut {{htmlattrxref("action", "form")}} était requis. Il n'y en a donc plus besoin.</p> - -<pre class="brush: html"><form action="#"></pre> - -<div class="note"> -<p><strong>Note :</strong> Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifique une URL non sécurisée avec l'attribut {{htmlattrxref("action","form")}}, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.</p> -</div> - -<h4 id="L'attribut_htmlattrxref(methodform)">L'attribut {{htmlattrxref("method","form")}}</h4> - -<p>Cet attribut définit comment les données sont envoyées. Le <a href="/fr/docs/HTTP">Protocole HTTP </a>fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode <code>GET</code> et la méthode <code>POST</code>.</p> - -<p>Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.</p> - -<h5 id="La_méthode_GET">La méthode GET</h5> - -<p>La méthode <code>GET</code> est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.</p> - -<p>Considérons le formulaire suivant :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><form action="http://foo.com" method="get"> - <div> - <label for="say">Quel salut voulez-vous adresser ?</label> - <input name="say" id="say" value="Hi"> - </div> - <div> - <label for="to">À qui voulez‑vous l'adresser ?</label> - <input name="to" value="Mom"> - </div> - <div> - <button>Send my greetings</button> - </div> -</form></code></pre> - -<p>Comme nous avons utilisé la méthode <code>GET</code>, vous verrez l'URL <code>www.foo.com/?say=Hi&to=Mom</code> apparaître dans la barre du navigateur quand vous soumettez le formulaire.</p> - -<p><img alt="Message d'erreur: le serveur est introuvable" src="https://mdn.mozillademos.org/files/16002/fr-introuvable.png" style="display: block; height: 575px; margin: 0px auto; width: 748px;"></p> - -<p>Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :</p> - -<ul> - <li><code>say</code>, dont la valeur est <code>Hi</code></li> - <li><code>to</code>, qui a la valeur <code>Mom</code></li> -</ul> - -<p>La requête HTTP ressemble à quelque chose comme :</p> - -<pre class="line-numbers language-html"><code class="language-html">GET /?say=Hi&to=Mom HTTP/1.1 -Host: foo.com</code></pre> - -<div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple sur GitHub — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> -</div> - -<h5 id="La_méthode_POST">La méthode POST</h5> - -<p>La méthode <code>POST</code> est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.</p> - -<p>Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec <code>post</code> comme valeur de l'attribut {{htmlattrxref("method","form")}}.</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://foo.com<span class="punctuation token">"</span></span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel salut voulez‑vous adresser ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Hi<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>to<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>À qui voulez‑vous l'adresser ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>to<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Mom<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Send my greetings<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> - -<p>Quand le formulaire est soumis avec la méthode <code>POST</code>, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :</p> - -<pre>POST / HTTP/1.1 -Host: foo.com -Content-Type: application/x-www-form-urlencoded -Content-Length: 13 - -say=Hi&to=Mom</pre> - -<p>L'en-tête <code>Content-Length </code>indique la taille du corps, et l'en-tête <code>Content-Type</code> indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.</p> - -<div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple sur GitHub — voyez <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">post-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> -</div> - -<h4 id="Voir_les_requêtes_HTTP">Voir les requêtes HTTP</h4> - -<p>Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Console Web</a> de Firefox ou les <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire :</p> - -<ol> - <li>Pressez F12</li> - <li>Selectionnez « Réseau »</li> - <li>Selectionnez « Tout »</li> - <li>Selectionnez « foo.com » dans l'onglet « Nom »</li> - <li>Selectionnez « En‑tête »</li> -</ol> - -<p>Vous obtiendrez les données du formulaire, comme l'image suivante le montre.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<p>La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête <code>GET</code> l'utilisateur verra les données dans la barre de l'URL, mais avec une requête <code>POST</code> il ne verra rien. Cela peut être important pour deux raisons :</p> - -<ol> - <li> - <p>Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.</p> - </li> - <li> - <p>Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.</p> - </li> -</ol> - -<h3 id="Côté_serveur_récupérer_les_données">Côté serveur : récupérer les données</h3> - -<p>Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.</p> - -<h4 id="Exemple_PHP_brut">Exemple : PHP brut</h4> - -<p>Le PHP met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode <code>POST</code>, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.</p> - -<pre class="brush: php"><?php - // La variable globale $_POST vous donne accès aux données envoyées avec la méthode POST par leur nom - // Pour avoir accès aux données envoyées avec la méthode GET, utilisez $_GET - $say = htmlspecialchars($_POST['say']); - $to = htmlspecialchars($_POST['to']); - - echo $say, ' ', $to;</pre> - -<p>Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> — il contient le même formulaire exemple que celui vu précédemment avec la méthode <code>post</code> avec <code>php-example.php</code> en action. À la soumission du formulaire, il envoie les données de ce dernier à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est <code>Bonjour, M'an</code>.<img alt="L'exécution du code PHP déclenche l'affichage de Bonjour, M'an" src="https://mdn.mozillademos.org/files/16008/bonjour_man.png" style="display: block; height: 191px; margin: 0px auto; width: 474px;"></p> - -<div class="note"> -<p><strong>Note </strong>: Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac et Windows) et <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> -</div> - -<h4 id="Exemple_Python">Exemple: Python</h4> - -<p>Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise <a href="http://flask.pocoo.org/">Flask framework</a> pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> - -<pre class="line-numbers language-html"><code class="language-html">from flask import Flask, render_template, request -app = Flask(__name__) - -@app.route('/', methods=['GET', 'POST']) -def form(): - return render_template('form.html') - -@app.route('/hello', methods=['GET', 'POST']) -def hello(): - return render_template('greeting.html', say=request.form['say'], to=request.form['to']) - -if __name__ == "__main__": - app.run()</code></pre> - -<p>Les deux prototypes référencés dans le code ci‑dessus sont les suivants :</p> - -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html </a>: Le même formulaire que celui vu plus haut dans la section {{anch("La méthode POST")}} mais avec l'attribut <code>action</code> défini à la valeur <code>\{{url_for('hello')}}</code>. (C'est un modèle <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a>, qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. <code>url_for('hello')</code> dit en gros « à rediriger sur <code>/hello</code> quand le formulaire est soumis ».)</li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a> : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction <code>hello()</code> vue plus haut qui s'exécute quand l'URL <code>/hello</code> est chargée dans le navigateur.</li> -</ul> - -<div class="note"> -<p><strong>Note </strong>: À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask avec « <code>pip3 install flask</code> ». À ce moment‑là vous pourrez exécuter l'exemple avec « <code>python3 python-example.py</code> », puis en allant sur « <code>localhost:5000</code> » dans votre navigateur.</p> -</div> - -<h4 id="Autres_langages_et_canevas_de_structures">Autres langages et canevas de structures</h4> - -<p>Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme <a href="/fr/docs/" title="/en-US/docs/">Perl</a>, <a href="/fr/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/fr/docs/" title="/en-US/docs/">Ruby</a>... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :</p> - -<ul> - <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> pour PHP</li> - <li><a href="https://www.djangoproject.com/" rel="external" title="https://www.djangoproject.com/">Django</a> pour Python</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> pour Node.js</li> - <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> pour Ruby</li> - <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> pour Java</li> - <li>etc.</li> -</ul> - -<p>Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours <em>facile</em>. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.</p> - -<div class="note"> -<p><strong>Note </strong>: Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.</p> -</div> - -<h2 id="Cas_particulier_envoyer_des_fichiers">Cas particulier : envoyer des fichiers</h2> - -<p>L'envoi de fichiers avec une formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.</p> - -<h3 id="L'attribut_htmlattrxref(enctypeform)">L'attribut {{htmlattrxref("enctype","form")}}</h3> - -<p>Cet attribut vous permet de préciser la valeur de l'en-tête HTTP <code>Content-Type</code> incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important car il indique au serveur le type de données envoyées. Par défaut, sa valeur est <code>application/x-www-form-urlencoded</code>. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».</p> - -<p>Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :</p> - -<ul> - <li>régler l'attribut {{htmlattrxref("method","form")}} à <code>POST</code> car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.</li> - <li>régler la valeur de {{htmlattrxref("enctype","form")}} <code>à multipart/form-data</code> car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).</li> - <li>incorporer un ou plusieurs widgets de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">sélection de fichiers</a> pour permettre aux utilisateurs de choisir les fichiers à téléverser.</li> -</ul> - -<p> Par exemple :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span> <span class="attr-name token">enctype</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>multipart/form-data<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Choose a file<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFile<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Send the file<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> - -<div class="note"> -<p><strong>Note :</strong> Certains navigateurs prennent en charge l'attribut {{htmlattrxref("multiple","input")}} de l'élément {{HTMLElement("input")}}pour envoyer plus d'un fichier avec seulement un élément d'entrée. La façon dont le serveur gère ces fichiers dépend de la technologie du serveur. Comme évoqué précédemment, utiliser un modèle rendra les choses plus faciles.</p> -</div> - -<div class="warning"> -<p><strong>Attention :</strong> De nombreux serveurs sont configurés avec une limite de taille pour les fichiers et les requêtes HTTP pour éviter les abus. Il est important de vérifier cette limite avec l'administrateur du serveur avant d'envoyer un fichier.</p> -</div> - -<h2 id="Problèmes_courants_de_sécurité">Problèmes courants de sécurité</h2> - -<p>Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.</p> - -<p>Selon ce que vous faites, il y a quelques problèmes de sécurité bien connus que vous pouvez aisément contrer :</p> - -<h3 id="XSS_et_CSRF">XSS et CSRF</h3> - -<p>Les attaques Cross-Site Scripting (XSS) et Cross-Site Request Forgery (CSRF) sont des attaques fréquentes qui surviennent quand vous affichez des données renvoyées par un utilisateur à celui-ci ou à un autre utilisateur. </p> - -<p>XSS permet aux attaquants d'injecter des scripts côté‑client dans les pages Web vues par d'autres utilisateurs. La vulnérabilité au XSS peut être utilisée par les attaquants pour contourner les contrôles d'accès comme la<a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript"> </a><span class="st"><a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">same-origin policy</a> (ou politique de même origine)</span>. Les effets de ces attaques peuvent aller d'une nuisance mineure à un risque significatif de sécurité.</p> - -<p>Les attaques CSRF sont similaires aux attaques XSS en ce qu'elles commencent de la même façon — en injectant des scripts côté‑client sur des pages Web — mais leur cible est différente. Les attaquants CSRF essaient d'accroître leurs privilèges pour atteindre ceux d'un utilisateur privilégié (par exemple l'administrateur du site) pour effectuer une action qu'ils ne devraient pas pouvoir faire (par exemple, envoyer des données à un utilisateur non habilité).</p> - -<p>Les attaques XSS exploitent la confiance qu'un utilisateur a pour un site, alors que les attaques CSRF exploitent la confiance qu'un site a pour ses utilisateurs.</p> - -<p>Pour éviter ces attaques, vous devez toujours vérifier les données qu'un utilisateur envoie à votre serveur et (si vous avez besoin de les afficher) essayez de ne pas afficher le contenu HTML tel que fourni par l'utilisateur. A la place, vous devez traiter les données fournies par l'utilisateur afin de ne pas les afficher verbatim. La quasi totalité des modèles du marché implémentent un filtre minimum qui enlève les éléments <span style="line-height: 1.5;">{{HTMLElement("script")}}, {{HTMLElement("iframe")}} et {{HTMLElement("object")}} des données envoyées par les utilisateurs. Cela permet d'atténuer les risques sans toutefois les éradiquer.</span></p> - -<h3 id="Injection_SQL">Injection SQL</h3> - -<p>L'injection SQL est un type d'attaque qui essaie d'effectuer certaines actions sur les bases de données utilisées par le site web cible. Cela consiste d'ordinaire à envoyer une requête SQL en espérant que le serveur l'exécutera (généralement quand le serveur essaie de ranger les informations envoyées par un utilisateur). C'est assurément l'un des <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">vecteurs d'attaque les plus fréquents contre les sites web</a>.</p> - -<p>Les conséquences peuvent être terribles, de la perte de données à l'accès à l'infrastructure en utilisant l'augmentation des privilèges. C'est une menace sérieuse et vous ne devez jamais ranger des données envoyées par un utilisateur sans asepsie préalable (par exemple en utilisant <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> sur une infrastructure PHP/MySQL).</p> - -<h3 id="Injection_d'en-tête_HTTP_et_injection_d'email">Injection d'en-tête HTTP et injection d'email</h3> - -<p>Ces attaques peuvent arrivent quand votre application construit des en-têtes HTTP ou des emails basés sur les données entrées par un utilisateur sur un formulaire. Elles ne vont pas directement endommager votre serveur ou affecter vos utilisateurs mais elles sont la porte ouverte à des problèmes plus graves comme le piratage de session ou les attaques par hameçonnage (phishing).</p> - -<p>Ces attaques sont généralement silencieuses et peuvent transformer votre serveur en <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p> - -<h3 id="Soyez_paranoïaque_ne_faites_jamais_confiances_à_vos_utilisateurs">Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs</h3> - -<p>Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.</p> - -<p>Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.</p> - -<ul> - <li>Échappez les caractères putativement dangereux. <span id="result_box" lang="fr"><span>Les caractères spécifiques avec lesquels vous devez être prudent varient selon le contexte dans lequel les données sont utilisées et de la plate-forme serveur que vous utilisez, mais tous les languages côté serveur ont des fonctions pour cela.</span></span></li> - <li><span id="result_box" lang="fr"><span>Limitez le volume des données entrantes pour n'autoriser que ce qui est nécessaire.</span></span></li> - <li><span id="result_box" lang="fr"><span>Faites passer par le bac à sable les fichiers téléversés (stockez‑les sur un serveur différent et n'autorisez l'accès au fichier que dans un sous-domaine différent, ou mieux, par un nom de domaine complètement différent).</span></span></li> -</ul> - -<p>Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !</p> - -<div class="note"> -<p><strong>Note </strong>: L'article « <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> » de notre sujet d'apprentissage « <a href="/fr/docs/Learn/Server-side">côté‑serveur</a> » discute les problèmes ci‑dessus et leurs solutions possibles plus en détail.</p> -</div> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. <span id="result_box" lang="fr"><span>N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.</span> <span>Comme nous allons le voir, il est possible d'effectuer la <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">validation des données côté client</a>, mais le serveur ne peut pas faire confiance à cette validation car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.</span></span></p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p>Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :</p> - -<ul> - <li><a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a></li> - <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">Open Web Application Security Project (OWASP)</a> (Projet pour la sécurité des applications dans un Web ouvert)</li> - <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Blog de Chris Shiflett à propos de la sérité avec PHP</a></li> -</ul> - -<div> -<div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}</div> -</div> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html b/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html deleted file mode 100644 index 6c1d043659..0000000000 --- a/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Formulaires HTML dans les navigateurs historiques -slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers -translation_of: Learn/Forms/HTML_forms_in_legacy_browsers ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la <a href="http://www.mozilla.org/en-US/firefox/organizations/" title="http://www.mozilla.org/en-US/firefox/organizations/">version ESR,</a> sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».</p> - -<p>Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.</p> - -<h2 id="S'informer_sur_les_difficultés">S'informer sur les difficultés</h2> - -<p>En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles :</p> - -<h3 id="Documentation_du_fournisseur_du_navigateur">Documentation du fournisseur du navigateur</h3> - -<ul> - <li>Mozilla : vous êtes au bon endroit, explorez juste MDN</li> - <li>Microsoft : <a href="http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx">Documentation sur la prise en charge de la norme par Internet Explorer</a></li> - <li>WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent : - <ul> - <li><a href="https://www.webkit.org/blog/" rel="external" title="https://www.webkit.org/blog/">le Blog WebKit</a> et <a href="http://planet.webkit.org/" rel="external" title="http://planet.webkit.org/">Planet WebKit</a> rassemblent les meilleurs articles par les déveoppeurs WebKit.</li> - <li><a href="https://www.chromestatus.com/features" title="http://www.chromium.org/developers/web-platform-status">l</a>e site État de la p<a href="https://www.chromestatus.com/features" title="http://www.chromium.org/developers/web-platform-status">lateforme Chrome</a> est aussi importante.</li> - <li>ainsi que le<a href="https://developer.apple.com/technologies/safari/" rel="external" title="https://developer.apple.com/technologies/safari/"> site web Apple .</a></li> - </ul> - </li> -</ul> - -<h3 id="Documentation_indépendante">Documentation indépendante</h3> - -<ul> - <li><a href="http://caniuse.com" rel="external" title="http://caniuse.com">Can I Use</a> a des informations sur la prise en charge des techniques avancées. </li> - <li><a href="http://www.quirksmode.org" rel="external" title="http://www.quirksmode.org">Quirks Mode</a> est une surprenante ressource sur la compatibilité des divers navigateurs. <a href="http://www.quirksmode.org/mobile/" rel="external" title="http://www.quirksmode.org/mobile/">La partie sur les mobiles</a> est la meilleure actuellement disponible.</li> - <li><a href="http://positioniseverything.net/" rel="external" title="http://positioniseverything.net/">Position Is Everything</a> est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant).</li> - <li><a href="http://mobilehtml5.org" rel="external" title="http://mobilehtml5.org">Mobile HTML5</a> dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry).</li> -</ul> - -<h2 id="Rendre_les_choses_simples">Rendre les choses simples</h2> - -<p> </p> - -<p>Comme les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a> impliquent des interactions complexes, une règle empirique : <a href="https://fr.wikipedia.org/wiki/Principe_KISS">restez aussi simple que possible</a>. Il y a tant de cas où nous voudrions que des formulaires soient « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'<a href="http://www.uxforthemasses.com/forms-usability/">ergonomie des formulaires sur UX For The Masses</a> (en anglais).</p> - -<h3 id="La_simplification_élégante_est_la_meilleure_amie_du_développeur_Web">La simplification élégante est la meilleure amie du développeur Web</h3> - -<p><a href="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/" rel="external" title="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/">Une simplification élégante et des améliorations progressives</a> sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante.</p> - -<p>Voyons quelques exemples relatifs aux formulaires en HTML.</p> - -<h4 id="Types_d'entrées_en_HTML">Types d'entrées en HTML</h4> - -<p>Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur <code>text</code> en recours.</p> - -<pre class="brush: html"><label for="myColor"> - Choisir une couleur - <input type="color" id="myColor" name="color"> -</label></pre> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Chrome 24</th> - <th scope="col" style="text-align: center;">Firefox 18</th> - </tr> - </thead> - <tbody> - <tr> - <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSX" src="https://mdn.mozillademos.org/files/16009/choix_chrome.png" style="height: 32px; width: 227px;"></th> - <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Firefox" src="https://mdn.mozillademos.org/files/16010/choix_firefox.png" style="height: 36px; width: 227px;"></th> - </tr> - </tbody> -</table> - -<h4 id="Sélecteurs_d'attributs_CSS">Sélecteurs d'attributs CSS</h4> - -<p>Les <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut" title="/en-US/docs/CSS/Attribute_selectors">sélecteurs d'attributs CSS</a> sont très utiles avec les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a>, mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :</p> - -<pre class="brush: html"><input type="number" class="number"></pre> - -<pre class="brush: css">input[type=number] { - /* Ceci peut échouer avec certains navigateurs */ -} - -input.number { - /* Ceci fonctionne partout */ -}</pre> - -<p>Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :</p> - -<pre class="brush: css">input[type=number], -input.number { - /* Ceci peut échouer dans certains navigateurs ; s'il ne comprennent pas - l'un des sélecteurs, il sautent la totalité de la règle */ -}</pre> - -<h4 id="Boutons_et_formulaires">Boutons et formulaires</h4> - -<p>Il y a deux manières de définir un bouton dans un formulaire HTML :</p> - -<ul> - <li>un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs <code>button</code>, <code>submit</code>, <code>reset</code> ou <code>image</code></li> - <li>un élément {{HTMLElement("button")}}</li> -</ul> - -<p>L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :</p> - -<pre class="brush: html"><input type="button" class="button" value="Cliquez‑moi"></pre> - -<pre class="brush: css">input { - /* Cette règle annule le rendu par défaut défini avec un élément input */ - border: 1px solid #CCC; -} - -input.button { - /* Le rendu par défaut N'EST PAS restauré avec ceci */ - border: none; -} - -input.button { - /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour - le faire quel que soit le navigateur */ - border: auto; -}</pre> - -<p>L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :</p> - -<ul> - <li> - <p>un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique.</p> - </li> - <li>certains navigateurs très anciens n'utilisent pas <code>submit</code> comme valeur par défaut pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}.</li> -</ul> - -<pre class="brush: html"><!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas --> -<button type="submit" name="IWantTo" value="A"> - <em>Do A</em> -</button></pre> - -<p>Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet.</p> - -<h3 id="Laissez_tomber_les_CSS">Laissez tomber les CSS</h3> - -<p>Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la <a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a>, c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">construction de widgets avec JavaScript</a>. Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice.</p> - -<h2 id="Détection_de_fonctionnalité_et_prothèses_d'émulation_(polyfills)">Détection de fonctionnalité et prothèses d'émulation (<em>polyfills</em>)</h2> - -<p>Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique.</p> - -<h3 id="JavaScript_non_obstructif">JavaScript non obstructif</h3> - -<p>Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :</p> - -<ul> - <li>une séparation stricte entre structure et comportement.</li> - <li>si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables.</li> -</ul> - -<p><a href="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript" rel="external" title="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript">Les principes d'un JavaScript non obstructif</a> (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées.</p> - -<h3 id="La_bibliothèque_Modernizr">La bibliothèque Modernizr</h3> - -<p>Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « <a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/" rel="external" title="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfill »</a> est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.</p> - -<p>La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque <a href="http://modernizr.com" rel="external" title="http://modernizr.com">Modernizr</a> et son projet dérivé : <a href="http://yepnopejs.com" rel="external" title="http://yepnopejs.com">YepNope</a>. Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.</p> - -<p>Voici un exemple :</p> - -<pre class="brush: js">Modernizr.load({ - // Cette ligne teste si le navigateur prend en charge l'API - // de validation de formulaires HTML5 - test : Modernizr.formvalidation, - - // Si ce n'est pas le cas, le polyfill suivant sera chargé - nope : form-validation-API-polyfill.js, - - // En tout cas, le fichier au cœur de l'application, et dont elle dépend, - // est chargé - both : app.js, - - // Une fois les deux fichiers chargés, cette fonction est appelée - // dans le but d'initialiser l'application - complete : function () { - app.init(); - } -});</pre> - -<p>L'équipe de Modernizr fait une maintenance opportune de grande liste de « <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="external" title="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">polyfills »</a>. Prenez celui dont vous avez besoin.</p> - -<div class="note"> -<p><strong>Note :</strong> Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de <a href="http://modernizr.com/docs/" rel="external" title="http://modernizr.com/docs/"> la documentation de Modernizr</a>.</p> -</div> - -<h3 id="Faites_attention_aux_performances">Faites attention aux performances</h3> - -<p>Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application. Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Comme vous pouvez le constater, opérer avec des navigateurs historiques n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.</p> - -<p>Si vous avez lu tous les articles de ce <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">guide à propos des formulaires en HTML</a>, vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à <a href="/fr/docs/MDN/Débuter_sur_MDN">améliorer ce guide</a>.</p> - -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/index.html b/files/fr/web/guide/html/formulaires/index.html deleted file mode 100644 index 9927bd3385..0000000000 --- a/files/fr/web/guide/html/formulaires/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Formulaires HTML -slug: Web/Guide/HTML/Formulaires -tags: - - Apprentissage - - Featured - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms ---- -<p>{{learnSidebar}}</p> - -<blockquote> -<p><span class="seoSummary">Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML</span>. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.</p> -</blockquote> - -<h2 id="Prérequis">Prérequis</h2> - -<p>Avant de vous lancer dans ce module, vous devez au moins avoir travaillé notre <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>. À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets natifs pour formulaire</a>.</p> - -<p>Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des <a href="/fr/Apprendre/CSS/Introduction_à_CSS">CSS</a> et du <a href="/fr/docs/Apprendre/JavaScript">JavaScript</a>.</p> - -<div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la pluspart) des exemples de code sur un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Éléments_de_base"><a id="Basic_guides" name="Basic_guides"></a>Éléments de base</h2> - -<dl> - <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></dt> - <dd>Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></dt> - <dd>Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</dd> -</dl> - -<h2 id="Quels_sont_les_widgets_pour_formulaire_disponibles">Quels sont les widgets pour formulaire disponibles ?</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></dt> - <dd>Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.</dd> -</dl> - -<h2 id="Validation_et_soumission_des_données_de_formulaires">Validation et soumission des données de formulaires</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a></dt> - <dd>Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Validation des données de formulaire</a></dt> - <dd>Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.</dd> -</dl> - -<h2 id="Guides_avancés">Guides avancés</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a></dt> - <dd>Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></dt> - <dd>Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></dt> - <dd>Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.</dd> -</dl> - -<h2 id="Guides_de_mise_en_forme_des_formulaires">Guides de mise en forme des formulaires</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></dt> - <dd>Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></dt> - <dd>Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Tableau de compatibilité des propriétés entre widgets de formulaire</a></dt> - <dd>Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.</dd> -</dl> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/HTML/Element#Forms">Référentiel pour éléments de formulaire HTML</a></li> - <li><a href="/fr/docs/Web/HTML/Element/input">Référentiel pour les types <input> en HTML</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html b/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html deleted file mode 100644 index 6b692ee256..0000000000 --- a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html +++ /dev/null @@ -1,683 +0,0 @@ ---- -title: Les widgets de formulaire natifs -slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs -tags: - - Contrôles - - Exemple - - Formulaires - - Guide - - HTML - - Web - - Widgets -translation_of: Learn/Forms/Basic_native_form_controls ---- -<div>{{LearnSidebar}}<br> -{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs et les <a class="new" href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML" rel="nofollow">connaissances de base du HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre quels sont les types de widgets de forme native disponibles dans les navigateurs pour collecter des données et comment les mettre en œuvre en se servant du HTML.</td> - </tr> - </tbody> -</table> - -<p>Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a> plus loin dans ce même module pour plus d'idées à ce propos.</p> - -<div class="note"> -<p><strong>Note </strong>: La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les <a href="/fr/docs/Web/HTML/Element#Forms">références aux éléments de formulaires HTML</a>, et en particulier nos références détaillées aux <a href="/fr/docs/Web/HTML/Element/input">types <input></a>.</p> -</div> - -<h2 id="Attributs_communs">Attributs communs</h2> - -<p>Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :</p> - -<table> - <thead> - <tr> - <th scope="col">Nom de l'attribut</th> - <th scope="col">Valeur par défaut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>autofocus</code></td> - <td>(<em>false</em>)</td> - <td>Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.</td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>(<em>false</em>)</td> - <td>Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut <code>disabled</code> mis, l'élément est activé.</td> - </tr> - <tr> - <td><code>form</code></td> - <td></td> - <td>L'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut <code>id</code> d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité.</td> - </tr> - <tr> - <td><code>name</code></td> - <td></td> - <td>Le nom de l'élément ; il sera soumis en même temps que les données du formulaire.</td> - </tr> - <tr> - <td><code>value</code></td> - <td></td> - <td>La valeur initiale de l'élément.</td> - </tr> - </tbody> -</table> - -<h2 id="Champs_de_saisie_de_texte">Champs de saisie de texte</h2> - -<p>Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.</p> - -<div class="note"> -<p><strong>Note :</strong> Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">mise en forme riche</a> (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.</p> -</div> - -<p>Tous les champs textuels ont des comportement en commun :</p> - -<ul> - <li>Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire).</li> - <li>Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte.</li> - <li>Des contraintes peuvent leur être imposées avec {{htmlattrxref("size","input")}} (la taille physique de la boîte) et avec {{htmlattrxref("maxlength","input")}} (le nombre maximum de caractères qui peuvent être saisis dans la boîte).</li> - <li>Ils peuvent bénéficier d'une <a href="/fr/docs/HTML/Element/input#attr-spellcheck" title="/fr/docs/HTML/Element/input#attr-spellcheck">correction orthographique</a>, si le navigateur la prend en charge.</li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.</p> -</div> - -<h3 id="Champs_texte_sur_une_seule_ligne"> Champs texte sur une seule ligne</h3> - -<p>On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à <code>text</code> (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, <code>text</code> est la valeur par défaut). <code>text</code> est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez <code>type="date"</code> et que le navigateur ne prend pas en charge les sélecteurs de date natifs).</p> - -<div class="note"> -<p><strong>Note :</strong> Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">directement aussi</a>).</p> -</div> - -<p>Voici un exemple élémentaire de champ texte sur une ligne :</p> - -<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="Je suis un champ texte"></pre> - -<p>Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.</p> - -<p><img alt="Screenshots of single line text fields on several platforms." src="https://developer.mozilla.org/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p> - -<p>HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.</p> - -<h4 id="Champ_dadresse_électronique">Champ d'adresse électronique</h4> - -<p>Ce type de champ est défini en donnant la valeur <code>email</code> à l'attribut {{htmlattrxref("type","input")}} :</p> - -<pre class="brush: html notranslate"> <input type="email" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> </span></code>multiple></pre> - -<p>Avec ce <code>type</code> , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :</p> - -<p><img alt="Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »" src="https://mdn.mozillademos.org/files/16001/fr-email.png" style="border-style: solid; border-width: 1px; display: block; height: 130px; margin: 0px auto; width: 434px;"></p> - -<p>Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).</p> - -<p>Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.</p> - -<div class="note"> -<p><strong>Note</strong>: Vous trouverez plus de détails sur la validation des formulaires dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaires</a>.</p> -</div> - -<h4 id="Champ_pour_mot_de_passe">Champ pour mot de passe</h4> - -<p>Ce type de champ est défini en donnant la valeur <code>password</code> à l'attribut {{htmlattrxref("type","input")}} :</p> - -<pre class="brush: html notranslate"> <input type="password" id="pwd" name="pwd"></pre> - -<p>Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.</p> - -<p>Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https:// ...), ainsi les données sont chiffrées avant expédition.</p> - -<p>Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir <a href="/fr/docs/Sécurité/MotsdepasseInsecurisés">Mots de passe peu sûrs</a>.</p> - -<h4 id="Champ_de_recherche">Champ de recherche</h4> - -<p>Ce type de champ se définit avec la valeur <code>search</code> de l'attribut {{htmlattrxref("type","input")}} :</p> - -<pre class="brush: html notranslate"> <input type="search" id="search" name="search"></pre> - -<p>La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.</p> - -<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p> - -<h4 id="Champ_pour_numéro_de_téléphone">Champ pour numéro de téléphone</h4> - -<p>Ce type de champ se définit en donnant la valeur <code>tel</code> à l'attribut {{htmlattrxref("type","input")}} :</p> - -<pre class="brush: html notranslate"> <input type="tel" id="tel" name="tel"></pre> - -<p>À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.</p> - -<h4 id="Champ_dURL">Champ d'URL</h4> - -<p>Ce type de champ se définit en donnant la valeur <code>url</code> à l'attribut {{htmlattrxref("type","input")}} :</p> - -<pre class="brush: html notranslate"> <input type="url" id="url" name="url"></pre> - -<p>Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.</p> - -<div class="note"><strong>Note :</strong> ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.</div> - -<div class="note"> -<p><strong>Note :</strong> La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article <a href="/fr/docs/HTML/Formulaires/Validation_de_formulaires" title="/fr/docs/HTML/Formulaires/Validation_de_formulaire">Validation de formulaires</a>.</p> -</div> - -<h3 id="Champs_texte_multilignes">Champs texte multilignes</h3> - -<p>Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.</p> - -<pre class="brush: html notranslate"> <textarea cols="30" rows="10"></textarea></pre> - -<p>La principale différence entre un champ <code>textarea</code> et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche <code>Retour</code>).</p> - -<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p> - -<div class="note"> -<p><strong>Note :</strong> Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (voir aussi <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">directement</a>). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à <code>none</code> dans les CSS.</p> -</div> - -<p>{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes (outre plusieurs autres) :</p> - -<table> - <caption>Attributs pour l'élément {{HTMLElement("textarea")}}</caption> - <thead> - <tr> - <th scope="col">Nom de l'attribut</th> - <th scope="col">Valeur par défaut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("cols","textarea")}}</td> - <td><code>20</code></td> - <td>Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.</td> - </tr> - <tr> - <td>{{htmlattrxref("rows","textarea")}}</td> - <td></td> - <td>Nombre de lignes de texte visibles dans la boîte de contrôle.</td> - </tr> - <tr> - <td>{{htmlattrxref("wrap","textarea")}}</td> - <td><code>soft</code></td> - <td>Indique comment le contrôle va à la ligne. Les valeurs possibles sont : <code>hard</code> ou <code>soft</code></td> - </tr> - </tbody> -</table> - -<p>Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.</p> - -<p>Deux points clés à noter ici :</p> - -<ul> - <li>Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut <code>value</code> ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.</li> - <li>Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.</li> -</ul> - -<h2 id="Contenu_déroulant">Contenu déroulant</h2> - -<p>Les widgets déroulants sont une manière simple de permettre à l'utilisateur de choisir une option parmi plusieurs sans que cela prenne trop de place dans l'interface utilisateur. HTML dispose de deux types de contenus déroulants la <strong>boîte à sélections</strong> et la <strong>boîte à complétement automatique</strong>. Dans les deux cas l'interation est identique. Une fois le contrôle activé, le navigateur affiche une liste de valeurs ouverte au choix de l'utilisateur.</p> - -<h3 id="Boîte_à_sélection">Boîte à sélection</h3> - -<p>Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.</p> - -<pre class="brush: html notranslate"> <select> - <option>Banane</option> - <option>Cerise</option> - <option>Citron</option> - </select></pre> - -<p>Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :</p> - -<pre class="brush: html notranslate"> <select> - <optgroup label="Fruits"> - <option>Banane</option> - <option selected>Cerise</option> - <option>Citron</option> - </optgroup> - <optgroup label="Légumes"> - <option>Carotte</option> - <option>Aubergine</option> - <option>Pomme de terre</option> - </optgroup> - </select></pre> - -<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p> - -<p>Si un élément {{HTMLElement("option")}} est défini avec l'attribut <code>value</code>, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut <code>value</code> est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.</p> - -<p>Sur l'élément {{HTMLElement("optgroup")}}, l'attribut <code>label</code> est affiché avant les valeurs, mais même s'il ressemble un peu à une option, il n'est pas sélectionnable.</p> - -<h3 id="Boîte_à_sélections_multiples">Boîte à sélections multiples</h3> - -<p>Par défaut, une boîte de sélection ne permet à l'utilisateur de ne sélectionner qu'une seule valeur. En ajoutant l'attribut {{htmlattrxref("multiple","select")}} à l'élément {{HTMLElement("select")}}, l'utilisateur peut sélectionner plusieurs valeurs en utilisant le mécanisme par défaut du système d'exploitation (par ex. en pressant <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> et en cliquant sur plusieur valeurs).</p> - -<p>Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.</p> - -<pre class="brush: html notranslate"> <select multiple> - <option>Banane</option> - <option>Cerise</option> - <option>Citron</option> - </select></pre> - -<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p> - -<div class="note"><strong>Note :</strong> tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.</div> - -<h3 id="Contenus_auto-complétés">Contenus auto-complétés</h3> - -<p>Vous pouvez suggérer des valeurs d'auto-complémentation pour les widgets avec un élément {{HTMLElement("datalist")}} accompagné d'éléments enfants {{HTMLElement("option")}} précisant les valeurs à afficher.</p> - -<p>La liste de données est alors liée à un champ texte (généralement un élément <code>input</code>) avec l'attribut {{htmlattrxref("list","input")}}.</p> - -<p>Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.</p> - -<pre class="brush: html notranslate"> <label for="onFruit">Quel est votre fruit préféré ?</label> - <input type="text" id="onFruit" list="maSuggestion" /> - <datalist id="maSuggestion"> - <option>Pomme</option> - <option>Banane</option> - <option>Mûre</option> - <option>Airelles</option> - <option>Citron</option> - <option>Litchi</option> - <option>Pêche</option> - <option>Poire</option> - </datalist></pre> - -<div class="note"><strong>Note :</strong> Selon la <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">norme HTML</a>, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.</div> - -<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div> - -<div> -<h4 id="Prise_en_charge_de_Datalist_et_recours">Prise en charge de Datalist et recours</h4> - -<p>L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulaires HTML, donc sa prise en charge par les navigateurs est un peu plus limitée que ce que nous avons vu précédemment. En particulier, il n'est pas pris en charge dans les versions d'IE inférieures à 10, et Safari ne le prend toujours pas en charge au moment de la rédaction de cet article.</p> - -<p>Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :</p> - -<pre class="brush:html; line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel est votre fruit préféré ? (avec repli)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>suggestion<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>ou choisissez un fruit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>suggestion<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>altFruit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pomme<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Banane<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Mûres<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Airelles<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Citron<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Litchi<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pêche<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Poire<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>datalist</span><span class="punctuation token">></span></span></code></pre> - -<p>Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).</p> - -<table> - <tbody> - <tr> - <th scope="row">Safari 6</th> - <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="https://developer.mozilla.org/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> - </tr> - <tr> - <th scope="row">Firefox 18</th> - <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="https://developer.mozilla.org/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Éléments_à_cocher">Éléments à cocher</h2> - -<p>Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.</p> - -<p>Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut <code>name</code>.</p> - -<div class="note"> -<p><strong>Note</strong> : Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">voir directement aussi</a>).</p> -</div> - -<p>Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste. Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.</p> - -<p>Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut <code>value</code> si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur <code>on</code>.</p> - -<h3 id="Case_à_cocher">Case à cocher</h3> - -<p>Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>checkbox</code>.</p> - -<pre class="brush: html notranslate"> <input type="checkbox" <code class="language-html"><span class="tag token"><span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span></span></code>> -</pre> - -<p>Mettre l'attribut <code>checked</code> fait que la case sera cochée au chargement de la page.</p> - -<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p> - -<h3 id="Bouton_radio">Bouton radio</h3> - -<p>Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur <code>radio</code>.</p> - -<pre class="brush: html notranslate"> <input type="radio" checked<code class="language-html"><span class="tag token"><span class="attr-name token"> id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span></span></code>></pre> - -<p>Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><fieldset> - <legend>Quel est votre mets préféré ?</legend> - <ul> - <li> - <label for="soup">Soupe</label> - <input type="radio" checked id="soup" name="meal" value="soup"> - </li> - <li> - <label for="curry">Curry</label> - <input type="radio" id="curry" name="meal" value="curry"> - </li> - <li> - <label for="pizza">Pizza</label> - <input type="radio" id="pizza" name="meal" value="pizza"> - </li> - </ul> -</fieldset></code></pre> - -<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p> - -<h2 id="Boutons">Boutons</h2> - -<p>Dans les formulaires HTML, il existe trois types de boutons :</p> - -<dl> - <dt>Submit</dt> - <dd>Envoie les données du formulaire au serveur.</dd> - <dt>Reset</dt> - <dd>Réinitialise les widgets de formulaire à leurs valeurs par défaut.</dd> - <dt>Anonymous</dt> - <dd>Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.</dd> -</dl> - -<p>Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :</p> - -<h3 id="submit">submit</h3> - -<pre class="brush: html notranslate"> <button type="submit"> - Ceci est un <br><strong>bouton d'envoi</strong> - </button> - - <input type="submit" value="Ceci est un bouton d'envoi"></pre> - -<h3 id="reset">reset</h3> - -<pre class="brush: html notranslate"> <button type="reset"> - Ceci est un <br><strong>bouton de réinitialisation</strong> - </button> - - <input type="reset" value="Ceci est un bouton de réinitialisation"></pre> - -<h3 id="anonymous">anonymous</h3> - -<pre class="brush: html notranslate"> <button type="button"> - Ceci est un <br><strong>bouton lambda</strong> - </button> - - <input type="button" value="Ceci est un bouton lambda"></pre> - -<p>Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :</p> - -<ul> - <li>Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut.</li> - <li>Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).</li> -</ul> - -<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p> - -<p>Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.</p> - -<h2 id="Widgets_de_formulaires_avancés">Widgets de formulaires avancés</h2> - -<p>Ces widgets sont des contrôles permettant l'utilisateur de saisir des données plus complexes ou moins habituelles, comme des nombres exacts ou approchés, des dates et heures ainsi que des couleurs.</p> - -<h3 id="Nombres">Nombres</h3> - -<p>On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>number</code>. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.</p> - -<p>Il est aussi possible de :</p> - -<ul> - <li>contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.</li> - <li>définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}.</li> -</ul> - -<h4 id="Exemple">Exemple</h4> - -<pre class="brush: html notranslate"> <input type="number" <code class="language-html"><span class="tag token"><span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span></span></code> min="1" max="10" step="2"></pre> - -<p>Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.</p> - -<h3 id="Curseurs">Curseurs</h3> - -<p>Le curseur est une autre manière de sélectionner un nombre. Comme, visuellement parlant, les curseurs sont moins précis qu'un champ textuel, ils sont utilisés pour retenir un nombre dont la précision de valeur n'est pas primordiale.</p> - -<p>Un curseur se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>range</code>. Il est important de configurer convenablement le curseur. À cet effet, il est fortement recommandé de définir les attributs {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} et {{htmlattrxref("step","input")}}.</p> - -<h4 id="Exemple_2">Exemple</h4> - -<pre class="brush: html line-numbers language-html notranslate"> <code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">> -</span></span></code></pre> - -<p>Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.</p> - -<p>Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span><span class="punctuation token">>Combien de haricots pouvez‑vous manger </span></span>?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beancount<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span></code></pre> - -<p>et en JavaScript :</p> - -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> beans <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#beans'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> count <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.beancount'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - -beans<span class="punctuation token">.</span>oninput <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p>Ici nous stockons dans deux variables les références du curseur et celle de <code>span</code>, puis nous réglons immédiatement le <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">textContent</a></code> de <code>span</code> à la valeur courante <code>value</code> de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le <code>textContent</code> de <code>span</code> est mis à jour avec la nouvelle valeur de l'entrée.</p> - -<p>L'attribut <code>range</code> pour <code>input</code> n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.</p> - -<h3 id="Sélection_de_date_et_heure">Sélection de date et heure</h3> - -<p>Recueillir des données de date et heure a traditionnellement toujours été un cauchemar pour les développeurs web. HTML5 ajoute des améliorations en ajoutant un contrôle qui permet de manipuler ce type de données.</p> - -<p>Un contrôle de sélection de date et heure se crée avec l'élément {{HTMLElement("input")}} et une valeur appropriée de l'attribut {{htmlattrxref("type","input")}} selon que vous voulez recueillir des dates, des heures ou les deux.</p> - -<h4 id="datetime-local"><code>datetime-local</code></h4> - -<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="datetime-local" name="datetime" id="datetime"></code></pre> - -<h4 id="month"><code>month</code></h4> - -<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="month" name="month" id="month"></code></pre> - -<h4 id="time"><code>time</code></h4> - -<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="time" name="time" id="time"></code></pre> - -<h4 id="week"><code>week</code></h4> - -<p>Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="week" name="week" id="week"></code></pre> - -<p>Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.</p> - -<pre class="brush: html notranslate"> <label for="maDate">Quand êtes vous disponible cet été ?</label> - <input type="date" min="2013-06-01" max="2013-08-31" id="maDate"></pre> - -<p class="warning"><strong>Attention :</strong> Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.</p> - -<h3 id="Sélecteur_de_couleur">Sélecteur de couleur</h3> - -<p>Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.</p> - -<p>Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>color</code>.</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> - -<p>Attention : la prise en charge du widget <code>color</code> n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.</p> - -<h2 id="Autres_widgets">Autres widgets</h2> - -<p>Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.</p> - -<div class="note"> -<p id="Sélection_de_fichier"><strong>Note </strong>: Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (à voir aussi<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html"> directement</a>).</p> -</div> - -<h3 id="Sélection_de_fichier_2">Sélection de fichier</h3> - -<p>Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article « <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi et extraction des données de formulaire</a> ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.</p> - -<p>Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>file</code>. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.</p> - -<h4 id="Exemple_3">Exemple</h4> - -<p>Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.</p> - -<pre class="brush: html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">></span></span></code></pre> - -<h3 id="Contenu_caché">Contenu caché</h3> - -<p>Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>hidden</code>.</p> - -<p>Si vous créez un tel élément, il est obligatoire de définir ses attributs <code>name</code> et <code>value</code> :</p> - -<pre class="brush: html notranslate"> <input type="hidden" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>timestamp<span class="punctuation token">"</span></span> </span></code>name="timestamp" value="1286705410"></pre> - -<h3 id="Image-bouton">Image-bouton</h3> - -<p>Le contrôle <strong>image-bouton</strong> est affiché comme un élément {{HTMLElement("img")}}, à la différence que lorsque l'utilisateur clique dessus, il se comporte comme un bouton d'envoi (voir ci-dessus).</p> - -<p>Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>image</code>. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.</p> - -<pre class="brush: html notranslate"> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> - -<p>Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :</p> - -<ul> - <li>la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « <em>.x</em> »</li> - <li>la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « <em>.y</em> ».</li> -</ul> - -<p>Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :</p> - -<pre class="notranslate"> http://foo.com?pos.x=123&pos.y=456</pre> - -<p>C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article <span>« </span><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires"><span>Envoi des données de formulaire</span></a> ».</p> - -<h3 id="Compteurs_et_barres_de_progression">Compteurs et barres de progression</h3> - -<p>Les compteurs et barres de progressions sont des représentations visuelles de valeurs numériques.</p> - -<h4 id="Progress">Progress</h4> - -<p>Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.</p> - -<pre class="brush: html notranslate"> <progress max="100" value="75">75/100</progress></pre> - -<p>Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.</p> - -<p>Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent ce contenu.</p> - -<h4 id="Meter">Meter</h4> - -<p>Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :</p> - -<ul> - <li>les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties : - <ul> - <li>la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses)</li> - <li>la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues)</li> - <li>la partie haute de l'intervalle est comprise entre les valeurs {{htmlattrxref("high","meter")}} et {{htmlattrxref("max","meter")}} (les deux valeurs sont incluses)</li> - </ul> - </li> - <li>La valeur {{htmlattrxref("optimum","meter")}} définit la valeur optimale pour l'élément {{HTMLElement("meter")}}. En conjonction avec les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}}, elle définit quelle partie de la plage est préféré : - <ul> - <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie basse de l'intervalle, la partie basse est considérée comme la partie préférée, la partie médiane est considérée comme la partie moyenne et la partie haute comme la moins favorable.</li> - <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également.</li> - <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée.</li> - </ul> - </li> -</ul> - -<p>Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :</p> - -<ul> - <li>Si la valeur actuelle est dans la partie préférée, la barre est verte.</li> - <li>Si la valeur actuelle est dans la partie moyenne, la barre est jaune.</li> - <li>Si la valeut actuelle est dans la partie la moins favorable, la barre est rouge.</li> -</ul> - -<p>Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meter</span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">low</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>33<span class="punctuation token">"</span></span> <span class="attr-name token">high</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>66<span class="punctuation token">"</span></span> <span class="attr-name token">optimum</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>75<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>meter</span><span class="punctuation token">></span></span></code></pre> - -<p>Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.</p> - -<p>La prise en charge de <code>progress</code> et <code>meter</code> est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.</p> - -<h2 id="Voir_également">Voir également</h2> - -<p>Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :</p> - -<ul> - <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">L'état actuelle des formulaires HTML5</a> par Wufoo (en anglais)</li> - <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">Tests HTML5 - inputs</a> sur Quirksmode (en anglais) (et <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">pour les navigateurs mobiles</a>)</li> -</ul> - -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li>Les widgets natifs pour formulaire</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html b/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html deleted file mode 100644 index 3f25e6d644..0000000000 --- a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Exemple -slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple -translation_of: Learn/Forms/Your_first_form/Example ---- -<p>Ceci est l'exemple pour l'article <a href="/fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mon premier formulaire HTML</a>.</p> - -<h2 id="Un_formulaire_simple" name="Un_formulaire_simple">Un formulaire simple</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post"> - <div> - <label for="nom">Nom :</label> - <input type="text" id="nom" name="user_name"> - </div> - - <div> - <label for="courriel">Courriel :</label> - <input type="email" id="courriel" name="user_email"> - </div> - - <div> - <label for="message">Message :</label> - <textarea id="message" name="user_message"></textarea> - </div> - - <div class="button"> - <button type="submit">Envoyer le message</button> - </div> -</form></pre> - -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css">form { - /* <code class="css comments">Pour le centrer dans la page</code> */ - margin: 0 auto; - width: 400px; - - /* <code class="css comments">Pour voir les limites du formulaire</code> */ - padding: 1em; - border: 1px solid #CCC; - border-radius: 1em; -} - -div + div { - margin-top: 1em; -} - -label { - /* <code class="css comments">Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement</code> */ - display: inline-block; - width: 90px; - text-align: right; -} - -input, textarea { - /* <code class="css comments">Afin de s'assurer que tous les champs textuels utilisent la même police</code> - <code class="css comments">Par défaut, textarea utilise une police à espacement constant */</code> - font: 1em sans-serif; - - /* <code class="css comments">Pour donner la même dimension à tous les champs textuels */</code> - width: 300px; - - -moz-box-sizing: border-box; - box-sizing: border-box; - - /* <code class="css comments">Pour harmoniser l'apparence des bordures des champs textuels */</code> - border: 1px solid #999; -} - -input:focus, textarea:focus { - /* <code class="css comments">Afin de réhausser les éléments actifs */</code> - border-color: #000; -} - -textarea { - /* <code class="css comments">Pour aligner correctement les champs multilignes et leurs étiquettes */</code> - vertical-align: top; - - /* <code class="css comments">Pour donner assez d'espace pour entrer du texte */</code> - height: 5em; - - /* <code class="css comments">Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement</code> - <code class="css comments">Cela ne marche pas avec tous les navigateurs */</code> - resize: vertical; -} - -.button { - /* <code class="css comments">Pour positionner les boutons de la même manière que les champs textuels */</code> - padding-left: 90px; /* <code class="css comments">même dimension que les étiquettes */</code> -} - -button { - /* <code class="css comments">Cette marge représente approximativement le même espace</code> - <code class="css comments">que celui entre les étiquettes et les champs textuels */</code> - margin-left: .5em; -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}</p> - -<p> </p> diff --git a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html b/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html deleted file mode 100644 index 8f082f6d81..0000000000 --- a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Mon premier formulaire HTML -slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML -tags: - - Apprentissage - - Codage - - Débutant - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/Your_first_form ---- -<p>{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}</p> - -<p class="summary">Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs et les <a href="/fr/Apprendre/HTML/Introduction_à_HTML">connaissances de base du HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans les cas simples.</td> - </tr> - </tbody> -</table> - -<h2 id="Un_formulaire_HTML_quest-ce">Un formulaire HTML, qu'est-ce ?</h2> - -<p>Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.</p> - -<p>Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.</p> - -<p>La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a> » plus loin dans ce module.</p> - -<h2 id="Concevoir_le_formulaire">Concevoir le formulaire</h2> - -<p>Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :</p> - -<ul> - <li>Smashing Magazine a de très bons <a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external">articles à propos de l'expérience utilisateur dans les formulaires</a>, mais le plus intéressant est certainement leur « <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external">Guide complet pour des formulaires web facilement utilisables</a> ».</li> - <li>UXMatters est une ressource bien pensée avec de très bons conseils allant des <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external">meilleures pratiques de base</a> jusqu'à des sujets plus complexes tels que <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">les formulaires sur plusieurs pages</a>.</li> -</ul> - -<p>Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.</p> - -<p><img alt="Le croquis du formulaire que l'on veut créer" src="https://mdn.mozillademos.org/files/15999/0006.png" style="border-style: solid; border-width: 1px; height: 375px; width: 400px;"></p> - -<p>Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.</p> - -<h2 id="Apprentissage_actif_mise_en_œuvre_de_notre_formulaire_HTML"> Apprentissage actif : mise en œuvre de notre formulaire HTML</h2> - -<p>Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.</p> - -<p>Avant de poursuivre, faites une copie locale de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple modèle HTML</a> — vous y incorporerez votre formulaire.</p> - -<h3 id="Lélément_HTMLElementform">L'élément {{HTMLElement("form")}}</h3> - -<p>Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :</p> - -<pre class="brush:html; notranslate"><form action="/<code class="language-html">my-handling-form-page</code>" method="post"> - -</form></pre> - -<p>Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs <code>action</code> et <code>method</code> est considéré comme de bonne pratique.</p> - -<ul> - <li>L'attribut <code>action</code> définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.</li> - <li>L'attribut <code>method</code> définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).</li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">« Envoi des données de formulaire</a> ».</p> -</div> - -<p>Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.</p> - -<h3 id="Les_éléments_HTMLElementlabel_HTMLElementinput_et_HTMLElementtextarea">Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}</h3> - -<p>Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.</p> - -<p>En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.</p> - -<pre class="brush:html; notranslate"><form action="/ma-page-de-traitement" method="post"> - <div> - <label for="name">Nom :</label> - <input type="text" id="name" name="user_name"> - </div> - <div> - <label for="mail">e-mail :</label> - <input type="email" id="mail" name="user_mail"> - </div> - <div> - <label for="msg">Message :</label> - <textarea id="msg" name="user_message"></textarea> - </div> -</form></pre> - -<p>Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut <code>for</code> sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'<code>id</code> de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : <a href="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a>.</p> - -<p>Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut <code>type</code>. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets natifs pour formulaire</a>.</p> - -<ul> - <li>Dans notre exemple nous n'utilisons que la valeur <code>text</code> — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.</li> - <li>Pour la deuxième entrée, nous utilisons la valeur <code>email</code> qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a>.</li> -</ul> - -<p>Last but not least, remarquez la syntaxe de <code><input></code> vs <code><textarea></textarea></code>. C'est une des bizarreries du HTML. La balise <code><input></code> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut <code>value</code> de la manière suivante :</p> - -<pre class="brush:html; notranslate"><input type="text" value="par défaut cet élément sera renseigné avec ce texte"></pre> - -<p>A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :</p> - -<pre class="brush:html; notranslate"><textarea>par défaut cet élément sera renseigné avec ce texte</textarea></pre> - -<h3 id="Lélément_HTMLElementbutton">L'élément {{HTMLElement("button")}}</h3> - -<p>Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante <code></form> :</code></p> - -<pre class="brush:html; notranslate"> <div class="button"> - <button type="submit">Envoyer le message</button> - </div> -</pre> - -<p>Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : <code>submit</code>, <code>reset</code> ou <code>button</code>.</p> - -<ul> - <li>Un clic sur un bouton <code>submit</code> (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut <code>action</code> de l'élément {{HTMLElement("form")}}.</li> - <li>Un clic sur un bouton <code>reset</code> réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.</li> - <li>Un clic sur un bouton <code>button</code> ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.</li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <code><input type="submit"></code>. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.</p> -</div> - -<h2 id="Mise_en_page_élémentaire_du_formulaire">Mise en page élémentaire du formulaire</h2> - -<p>Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.</p> - -<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p> - -<div class="note"> -<p><strong>Note :</strong> Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> </a>ou<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> également directement</a>).</p> -</div> - -<p>Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.</p> - -<p>Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :</p> - -<pre class="brush: html notranslate"><style> - -</style></pre> - -<p>Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :</p> - -<pre class="brush:css; notranslate">form { - /* Uniquement centrer le formulaire sur la page */ - margin: 0 auto; - width: 400px; - /* Encadré pour voir les limites du formulaire */ - padding: 1em; - border: 1px solid #CCC; - border-radius: 1em; -} - -form div + div { - margin-top: 1em; -} - -label { - /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */ - display: inline-block; - width: 90px; - text-align: right; -} - -input, textarea { - /* Pour s'assurer que tous les champs texte ont la même police. - Par défaut, les textarea ont une police monospace */ - font: 1em sans-serif; - - /* Pour que tous les champs texte aient la même dimension */ - width: 300px; - box-sizing: border-box; - - /* Pour harmoniser le look & feel des bordures des champs texte */ - border: 1px solid #999; -} - -input:focus, textarea:focus { - /* Pour souligner légèrement les éléments actifs */ - border-color: #000; -} - -textarea { - /* Pour aligner les champs texte multi‑ligne avec leur étiquette */ - vertical-align: top; - - /* Pour donner assez de place pour écrire du texte */ - height: 5em; -} - -.button { - /* Pour placer le bouton à la même position que les champs texte */ - padding-left: 90px; /* même taille que les étiquettes */ -} - -button { - /* Cette marge supplémentaire représente grosso modo le même espace que celui - entre les étiquettes et les champs texte */ - margin-left: .5em; -}</pre> - -<p>Désormais notre formulaire a une bien meilleure allure.</p> - -<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p> - -<div class="note"> -<p><strong>Note</strong> : Il est sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (à voir aussi <a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">directement</a>).</p> -</div> - -<h2 id="Envoyer_les_données_au_serveur_Web">Envoyer les données au serveur Web</h2> - -<p>Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.</p> - -<p>L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs <code>action</code> et <code>method</code>.</p> - -<p>Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.</p> - -<p>Pour nommer vos données vous devez utiliser l'attribut <code>name</code> pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :</p> - -<pre class="brush:html; notranslate">form action="/my-handling-form-page" method="post"> - <div> - <label for="name">Nom :</label> - <input type="text" id="name" name="user_name" /> - <div> - <div> - <label for="mail">E-mail :</label> - <input type="email" id="mail" name="user_email" /> - </div> - <div> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </div> - - ...</pre> - -<p>Dans notre exemple, le formulaire enverra trois informations nommées respectivement « <code>user_name</code> », « <code>user_email </code>» et « <code>user_message</code> ». Ces informations seront envoyées à l'URL « <code>/my-handling-form-page</code> » avec la méthode HTTP POST.</p> - -<p>Du côté du serveur, le script à l'URL « <code>/my-handling-form-page</code><em> </em>» recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a>.</p> - -<h2 id="Résumé">Résumé</h2> - -<p>Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :</p> - -<p>{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}</p> - -<p>Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.</p> - -<p>{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li>Mon premier formulaire HTML</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html b/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html deleted file mode 100644 index eacb5640ef..0000000000 --- a/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html +++ /dev/null @@ -1,1991 +0,0 @@ ---- -title: Table de compatibilité des propriétés pour les widgets de formulaire -slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets -tags: - - Avancé - - CSS - - Formulaires - - Guide - - HTML - - Indésirables - - Mises à jour - - Web -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls ---- -<div>{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.</p> - -<h2 id="Comment_lire_les_tables">Comment lire les tables</h2> - -<h3 id="Valeurs">Valeurs</h3> - -<p>Pour chaque propriété, il y a quatre valeurs possibles :</p> - -<dl> - <dt>OUI</dt> - <dd>La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.</dd> - <dt>PARTIEL</dt> - <dd>Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.</dd> - <dt>NON</dt> - <dd>La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.</dd> - <dt>N.A.</dt> - <dd>La propriété n'a aucune signification pour ce type de widget.</dd> -</dl> - -<h3 id="Rendu">Rendu</h3> - -<p>Pour chaque propriété il y a deux rendus possibles :</p> - -<dl> - <dt>N (Normal)</dt> - <dd>Indique que la propriété est appliquée telle quelle.</dd> - <dt>A (Altéré)</dt> - <dd>Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :</dd> -</dl> - -<pre class="brush: css">* { -/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */ - -webkit-appearance: none; - -/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur Gecko. */ - -moz-appearance: none; - -/* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs - y compris Opera, Internet Explorer et Firefox */ - background: none; -}</pre> - -<h2 id="Tables_de_compatibilité">Tables de compatibilité</h2> - -<h3 id="Comportements_globaux">Comportements globaux</h3> - -<p>Certains comportements sont communs à de nombreux navigateurs au niveau global :</p> - -<dl> - <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> - <dd>L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.</dd> - <dt>{{cssxref("line-height")}}</dt> - <dd>Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.</dd> - <dt>{{cssxref("text-decoration")}}</dt> - <dd>Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.</dd> - <dt>{{cssxref("text-overflow")}}</dt> - <dd>Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.</dd> - <dt>{{cssxref("text-shadow")}}</dt> - <dd>Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.</dd> -</dl> - -<h3 id="Champs_texte">Champs texte</h3> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> - <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> - <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> - <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td>Voir la note à propos de {{cssxref("line-height")}}</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td>Voir la note à propos de Opera</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser<code> -webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser<code> -webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> - <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Boutons">Boutons</h3> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td>Voir la note à propos de {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td> - <ol> - <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Widget_number">Widget <code>number</code></h3> - -<p>Sur les navigateurs qui implémentent le widget <code>number</code>, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.</p> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td>Voir la note à propos de {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière‑plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td colspan="1" rowspan="3"> - <p>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</p> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - </tr> - </tbody> -</table> - -<h3 id="Cases_à_cocher_et_boutons_radio">Cases à cocher et boutons radio</h3> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td> - <ol> - <li>Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td> - <ol> - <li>Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Boîtes_à_sélection_(ligne_unique)">Boîtes à sélection (ligne unique)</h3> - -<p>Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}.</p> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[2]</sup></td> - <td> - <ol> - <li>La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.</li> - <li>La propriété est bien appliquée sur l'élément {{HTMLElement("select")}}, mais est traitée de manière incohérente sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément {{HTMLElement("select")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td> - <ol> - <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td> - <ol> - <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Boîtes_à_sélection_(multilignes)">Boîtes à sélection (multilignes)</h3> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td>Voir la note à propos de {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>Uniquement pris en charge par Firefox et IE9+.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td> - <ol> - <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Datalist">Datalist</h3> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Sélecteur_de_fichiers">Sélecteur de fichiers</h3> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Agit plus ou moins comme une marge supplementaire en dehors du widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Sélecteurs_de_date">Sélecteurs de date</h3> - -<p>Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</p> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Sélecteurs_de_couleurs">Sélecteurs de couleurs</h3> - -<p>Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.</p> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Opera gère cette propriété comme pour un widget <code>select </code>avec les mêmes restrictions.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>Opera gère cette propriété comme pour un widget <code>select </code>avec les mêmes restrictions.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Widgets_meter_et_progress">Widgets <code>meter</code> et <code>progress</code></h3> - -<p>Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.</p> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Widget_range">Widget <code>range</code></h3> - -<p>Il n'y a pas de méthode standard pour changer le style de la poignée de<code> range</code> et Opera n'a aucun moyen de modifier le rendu par défaut du widget <code>range</code>.</p> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td> - <ol> - <li>Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de <code>range</code>.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> - <ol> - <li>La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Boutons_image">Boutons image</h3> - -<table> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Texte et polices</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td colspan="1"> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td colspan="1"> - <ol> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td colspan="1"> - <ol> - <li>IE9 ne prend pas en charge cette propriété.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<p>{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li>Table de compatibilité des propriétés pour les widgets de formulaire</li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html b/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html deleted file mode 100644 index 922bfb2aaf..0000000000 --- a/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html +++ /dev/null @@ -1,440 +0,0 @@ ---- -title: Envoi de formulaires avec JavaScript -slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript -translation_of: Learn/Forms/Sending_forms_through_JavaScript ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Comme dans le <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">précédent article</a>, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.</p> - -<h2 id="Un_formulaire_n'est_pas_toujours_un_<form>">Un formulaire n'est pas toujours un <form></h2> - -<p>Avec les <a href="/fr/docs/Open_Web_apps_and_Web_standards">applications Web ouvertes</a>, il est de plus en plus courant d'utiliser des <a href="fr/docs/HTML/Forms">formulaires HTML</a> autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.</p> - -<h3 id="Obtenir_le_contrôle_sur_la_totalité_de_l'interface">Obtenir le contrôle sur la totalité de l'interface</h3> - -<p>La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.</p> - -<p>De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.</p> - -<p>L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).</p> - -<h3 id="Comment_est-ce_différent">Comment est-ce différent ?</h3> - -<p><a href="/en-US/docs/AJAX">AJAX</a> utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.</p> - -<div class="note"> -<p><strong>Note :</strong> Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, <a href="http://en.wikipedia.org/wiki/JSONP" rel="external">JSONP</a> combiné à la fonction <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval"><code>eval()</code></a>. Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Glossaire/JSON">JSON</a>, mais ce sont vraiment des navigateurs anciens ! <strong>Évitez ces techniques.</strong></p> -</div> - -<p> </p> - -<p>Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON"> JSON</a> a remplacé XML et est de plus en plus courant aujourd'hui.</p> - -<p>Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (<code>application/x-www-form-urlencoded</code>) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données <code>multipart/form‑data</code>.</p> - -<p>Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.</p> - -<p>Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.</p> - -<p>Comment envoyer de telles données ?</p> - -<h2 id="Envoi_des_données_de_formulaire">Envoi des données de formulaire</h2> - -<p>Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.</p> - -<h3 id="Construire_manuellement_un_XMLHttpRequest">Construire manuellement un XMLHttpRequest</h3> - -<p>{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.</p> - -<div class="note"> -<p><strong>Note :</strong> Pour en savoir plus sur <code>XMLHttpRequest</code>, ces articles pourraient vous intéresser : un article d'introduction à <a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">AJAX</a> et un didacticiel plus fouillé à ce propos utilisant <a href="/fr/docs/HTML_in_XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p> -</div> - -<p>Reconstruisons l'exemple précédent :</p> - -<pre class="brush: html"><button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button></pre> - -<p>Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :</p> - -<pre class="brush: js">function sendData(data) { - var XHR = new XMLHttpRequest(); - var urlEncodedData = ""; - var urlEncodedDataPairs = []; - var name; - - // Transformez l'objet data en un tableau de paires clé/valeur codées URL. - for(name in data) { - urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name])); - } - - // Combinez les paires en une seule chaîne de caractères et remplacez tous - // les espaces codés en % par le caractère'+' ; cela correspond au comportement - // des soumissions de formulaires de navigateur. - urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+'); - - // Définissez ce qui se passe en cas de succès de soumission de données - XHR.addEventListener('load', function(event) { - alert('Ouais ! Données envoyées et réponse chargée.'); - }); - - // Définissez ce qui arrive en cas d'erreur - XHR.addEventListener('error', function(event) { - alert('Oups! Quelque chose s\'est mal passé.'); - }); - - // Configurez la requête - XHR.open('POST', 'https://example.com/cors.php'); - - // Ajoutez l'en-tête HTTP requise pour requêtes POST de données de formulaire - XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - - // Finalement, envoyez les données. - XHR.send(urlEncodedData); -}</pre> - -<p>Voici le résultat en direct :</p> - -<p>{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}</p> - -<div class="note"> -<p><strong>Note :</strong> Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès <a href="/fr/docs/HTTP/Access_control_CORS">CORS et HTTP</a>.</p> -</div> - -<h3 id="Utilisation_de_XMLHttpRequest_et_de_l'objet_FormData">Utilisation de XMLHttpRequest et de l'objet FormData</h3> - -<p>Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une <a href="http://www.w3.org/TR/XMLHttpRequest/">spécification XMLHttpRequest</a> récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.</p> - -<p>L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.</p> - -<p>L'utilisation de cet objet est détaillée dans <a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a>, mais voici deux exemples :</p> - -<h4 id="Utiliser_un_objet_FormData_autonome">Utiliser un objet FormData autonome</h4> - -<pre class="brush: html"><button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button></pre> - -<p>Vous devriez être familier de cet exemple HTML.</p> - -<pre class="brush: js">function sendData(data) { - var XHR = new XMLHttpRequest(); - var FD = new FormData(); - - // Mettez les données dans l'objet FormData - for(name in data) { - FD.append(name, data[name]); - } - - // Définissez ce qui se passe si la soumission s'est opérée avec succès - XHR.addEventListener('load', function(event) { - alert('Ouais ! Données envoyées et réponse chargée.'); - }); - - // Definissez ce qui se passe en cas d'erreur - XHR.addEventListener('error', function(event) { - alert('Oups! Quelque chose s\'est mal passé.'); - }); - - // Configurez la requête - XHR.open('POST', 'https://example.com/cors.php'); - - // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies - XHR.send(FD); -}</pre> - -<p>Voici le résultat directement :</p> - -<p>{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}</p> - -<h4 id="Utiliser_un_objet_FormData_lié_à_un_élément_form">Utiliser un objet FormData lié à un élément form</h4> - -<p>Vous pouvez également lier un objet <code>FormData</code> à un élément {{HTMLElement("form")}} et créer ainsi un <code>FormData</code> représentant les données contenues dans le formulaire.</p> - -<p>Le HTML est classique :</p> - -<pre class="brush: html"><form id="myForm"> - <label for="myName">Dites-moi votre nom :</label> - <input id="myName" name="name" value="John"> - <input type="submit" value="Envoyer !"> -</form></pre> - -<p>Mais JavaScript sera de la forme :</p> - -<pre class="brush: js">window.addEventListener("load", function () { - function sendData() { - var XHR = new XMLHttpRequest(); - - // Liez l'objet FormData et l'élément form - var FD = new FormData(form); - - // Définissez ce qui se passe si la soumission s'est opérée avec succès - XHR.addEventListener("load", function(event) { - alert(event.target.responseText); - }); - - // Definissez ce qui se passe en cas d'erreur - XHR.addEventListener("error", function(event) { - alert('Oups! Quelque chose s\'est mal passé.'); - }); - - // Configurez la requête - XHR.open("POST", "https://example.com/cors.php"); - - // Les données envoyées sont ce que l'utilisateur a mis dans le formulaire - XHR.send(FD); - } - - // Accédez à l'élément form … - var form = document.getElementById("myForm"); - - // … et prenez en charge l'événement submit. - form.addEventListener("submit", function (event) { - event.preventDefault(); - - sendData(); - }); -});</pre> - -<p>Voici le résultat en direct :</p> - -<p>{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}</p> - -<p>Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.</p> - -<h3 id="Construire_un_DOM_dans_un_iframe_caché">Construire un DOM dans un <code>iframe</code> caché</h3> - -<p>La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.</p> - -<div class="warning"> -<p><strong>Avertissement :</strong> <strong>Évitez d'employer cette technique.</strong> Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une <a href="https://fr.wikipedia.org/wiki/Cross-site_scripting" rel="external">attaque par injection de script</a>. Si vous utilisez HTTPS, il reste possible de perturber la <a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">politique de la même origine</a>, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.</p> -</div> - -<p>Voici un exemple :</p> - -<pre class="brush: html"><button onclick="sendData({test:'ok'})">Cliquez ici !</button></pre> - -<pre class="brush: js">// Créer l'iFrame servant à envoyer les données -var iframe = document.createElement("iframe"); -iframe.name = "myTarget"; - -// Puis, attachez l'iFrame au document principal -window.addEventListener("load", function () { - iframe.style.display = "none"; - document.body.appendChild(iframe); -}); - -// Voici la fonction réellement utilisée pour expédier les données -// Elle prend un paramètre, qui est un objet chargé des paires clé/valeurs. -function sendData(data) { - var name, - form = document.createElement("form"), - node = document.createElement("input"); - - // Définir ce qui se passe quand la réponse est chargée - iframe.addEventListener("load", function () { - alert("Ouais ! Données envoyés."); - }); - - form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"; - form.target = iframe.name; - - for(name in data) { - node.name = name; - node.value = data[name].toString(); - form.appendChild(node.cloneNode()); - } - - // Pour être envoyé, le formulaire nécessite d'être attaché au document principal. - form.style.display = "none"; - document.body.appendChild(form); - - form.submit(); - - // Une fois le formulaire envoyé, le supprimer. - document.body.removeChild(form); -}</pre> - -<p>Voici le résultat en direct :</p> - -<p>{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}</p> - -<p> </p> - -<h2 id="Gestion_des_données_binaires"><span>Gestion des données binaires</span></h2> - -<p>Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <code><input type="file"></code>, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.</p> - -<p>Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et <a href="/fr/docs/WebRTC/navigator.getUserMedia">WebRTC</a>, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez <a href="/fr/docs/Using_files_from_web_applications">Utiliser les fichiers des applications Web</a>.</p> - -<p>Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.</p> - -<p>Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :</p> - -<pre class="brush: html"><form id="myForm"> - <p> - <label for="i1">Données textuelles :</label> - <input id="i1" name="myText" value="Quelques données textuelles"> - </p> - <p> - <label for="i2">Fichier de données :</label> - <input id="i2" name="myFile" type="file"> - </p> - <button>Envoyer !</button> -</form></pre> - -<p>Comme vous pouvez le voir, le HTML est un <code><form></code>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :</p> - -<pre class="brush: js">// Comme nous voulons avoir accès à un nœud DOM, -// nous initialisons le script au chargement de la page. -window.addEventListener('load', function () { - - // Ces variables s'utilisent pour stocker les données du formulaire - var text = document.getElementById("i1"); - var file = { - dom : document.getElementById("i2"), - binary : null - }; - - // Nous utilisons l'API de FileReader pour accéder au contenu du fichier - var reader = new FileReader(); - - // Comme FileReader est asynchrone, stockons son résulata - // quand il a fini de lire le fichier - reader.addEventListener("load", function () { - file.binary = reader.result; - }); - - // Au chargement de la page, si un fichier est déjà choisi, lisons‑le - if(file.dom.files[0]) { - reader.readAsBinaryString(file.dom.files[0]); - } - - // Sinon, lisons le fichier une fois que l'utilisateur l'a sélectionné - file.dom.addEventListener("change", function () { - if(reader.readyState === FileReader.LOADING) { - reader.abort(); - } - - reader.readAsBinaryString(file.dom.files[0]); - }); - - // sendData est notre fonction principale - function sendData() { - // S'il y a un fichier sélectionné, attendre sa lecture - // Sinon, retarder l'exécution de la fonction - if(!file.binary && file.dom.files.length > 0) { - setTimeout(sendData, 10); - return; - } - - // Pour construire notre requête de données de formulaire en plusieurs parties - // nous avons besoin d'une instance de XMLHttpRequest - var XHR = new XMLHttpRequest(); - - // Nous avons besoin d'un séparateur pour définir chaque partie de la requête - var boundary = "blob"; - - // Stockons le corps de la requête dans une chaîne littérale - var data = ""; - - // Ainsi, si l'utilisateur a sélectionné un fichier - if (file.dom.files[0]) { - // Lancer une nouvelle partie de la requête du corps - data += "--" + boundary + "\r\n"; - - // Décrivons là comme étant des données du formulaire - data += 'content-disposition: form-data; ' - // Définissons le nom des données du formulaire - + 'name="' + file.dom.name + '"; ' - // Fournissons le vrai nom du fichier - + 'filename="' + file.dom.files[0].name + '"\r\n'; - // et le type MIME du fichier - data += 'Content-Type: ' + file.dom.files[0].type + '\r\n'; - - // Il y a une ligne vide entre les métadonnées et les données - data += '\r\n'; - - // Ajoutons les données binaires à la requête du corps - data += file.binary + '\r\n'; - } - - // C'est plus simple pour les données textuelles - // Démarrons une nouvelle partie dans notre requête du corps - data += "--" + boundary + "\r\n"; - - // Disons que ce sont des données de formulaire et nommons les - data += 'content-disposition: form-data; name="' + text.name + '"\r\n'; - // Il y a une ligne vide entre les métadonnées et les données - data += '\r\n'; - - // Ajoutons les données textuelles à la requête du corps - data += text.value + "\r\n"; - - // Ceci fait, "fermons" la requête du corps - data += "--" + boundary + "--"; - - // Définissons ce qui arrive en cas de succès pour la soumission des données - XHR.addEventListener('load', function(event) { - alert('Ouais ! Données expédiées et réponse chargée.'); - }); - - // Définissons ce qui se passe en cas d'eerreur - XHR.addEventListener('error', function(event) { - alert('Oups! Quelque chose s\'est mal passé.'); - }); - - // Configurons la requête - XHR.open('POST', 'https://example.com/cors.php'); - - // Ajoutons l'en-tête requise pour gèrer la requête POST des données - // de formulaire en plusieurs parties - XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary); - - // et finalement, expédions les données. - XHR.send(data); - } - - // Accéder au formulaire … - var form = document.getElementById("myForm"); - - // … pour prendre en charge l'événement soumission - form.addEventListener('submit', function (event) { - event.preventDefault(); - sendData(); - }); -});</pre> - -<p>Voici le résultat en direct :</p> - -<p>{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (<a href="https://fr.wikipedia.org/wiki/Polyfill">prothèse d'émulation</a>) pour cela sur les navigateurs anciens :</p> - -<ul> - <li><a href="https://gist.github.com/3120320" rel="external">Ces primitives</a> sont des « polyfills » de <code>FormData</code> avec des {{domxref("Using_web_workers","worker")}}.</li> - <li><a href="https://github.com/francois2metz/html5-formdata" rel="external">HTML5-formdata</a> tente d'opérer un « polyfill » de l'objet <code>FormData</code>, mais il requiert un <a href="http://www.w3.org/TR/FileAPI/" rel="external">File API</a></li> - <li><a href="https://github.com/jimmywarting/FormData">Ce « polyfill »</a> fournit la plupart des nouvelles méthodes dont <code>FormData</code> dispose (entrées, clés, valeurs et prise en charge de <code>for...of</code>)</li> -</ul> - -<p> </p> - -<div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}</div> - -<p> </p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html b/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html deleted file mode 100644 index ccbac0ef15..0000000000 --- a/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html +++ /dev/null @@ -1,874 +0,0 @@ ---- -title: Validation des données de formulaires -slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire -tags: - - Exemple - - Formulaires - - Guide - - HTML - - Intermédiaire - - JavaScript - - Web -translation_of: Learn/Forms/Form_validation ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}</div> - -<p class="summary">Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs, une bonne compréhension du <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, des <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> et de <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre.</td> - </tr> - </tbody> -</table> - -<h2 id="Qu'est‑ce_qu'une_validation_de_formulaire">Qu'est‑ce qu'une validation de formulaire?</h2> - -<p>Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :</p> - -<ul> - <li>« Ce champ est obligatoire » (vous ne pouvez pas le laisser vide)</li> - <li>« Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).</li> - <li>« Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).</li> - <li>« Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?).</li> -</ul> - -<p>C'est ce qu'on appelle la validation de formulaire — lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.</p> - -<p>La vérité est qu'aucun d'entre nous n'<em>aime</em> remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.</p> - -<p>Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :</p> - -<ul> - <li><strong>obtenir de bonnes données dans un bon format</strong> — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises.</li> - <li><strong>protéger nos utilisateurs</strong> — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données.</li> - <li><strong>nous protéger nous‑mêmes</strong> — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité du site Web</a>).</li> -</ul> - -<h3 id="Les_divers_types_de_validation_de_formulaire">Les divers types de validation de formulaire</h3> - -<p>Vous rencontrerez différents types de validation de formulaires sur le Web :</p> - -<ul style="list-style-type: disc;"> - <li>La validation côté client est la validation qui est effectuée dans le navigateur, avant que les données n'aient été soumises au serveur. Cette méthode est plus conviviale que la validation côté serveur car elle donne une réponse instantanée. Il est possible de la subdiviser encore avec : - <ul> - <li>la validation JavaScript, codée en JavaScript, entièrement personnalisable.</li> - <li>la validation de formulaire intégrée avec les fonctions de validation de formulaire HTML5. Elle ne nécessite généralement pas de JavaScript, a de meilleures performances, mais elle n'est pas aussi personnalisable.</li> - </ul> - </li> -</ul> - -<dl> -</dl> - -<ul> - <li>La validation côté serveur est la validation opérée sur le serveur, après que les données ont été soumises — le code côté serveur est utilisé pour valider les données avant de les mettre dans la base de données. Si elles sont erronées, une réponse est envoyée au client pour dire à l'utilisateur ce qui a mal tourné. La validation côté serveur n'est pas aussi conviviale que la validation côté client, car elle nécessite un aller-retour vers le serveur, mais c'est la dernière ligne de défense de votre application contre les mauvaises données (c'est-à-dire les données incorrectes, voire malveillantes). Tous les modèles de canevas de vérification courants côté serveur ont des fonctions de validation et de nettoyage des données (ce qui les sécurise).</li> -</ul> - -<p>Dans le monde réel, les développeurs ont tendance à utiliser une combinaison de validations côté client et côté serveur, pour être du côté sûr.</p> - -<h2 id="Utiliser_la_validation_intégrée_au_formulaire">Utiliser la validation intégrée au formulaire</h2> - -<p>Une des caractéristiques de <a href="/fr/docs/HTML/HTML5">HTML5</a> est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">attributs de validation</a> sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.<br> - Quand un élément est valide :</p> - -<ul> - <li>l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}} ; cela vous permet d'appliquer une composition de style distinctive.</li> - <li>si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript).</li> -</ul> - -<p>Quand un élément est invalide :</p> - -<ul> - <li>l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}} ; cela vous permet d'appliquer une composition de style distinctive.</li> - <li>si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.</li> -</ul> - -<h3 id="Contraintes_de_validation_sur_les_éléments_d'entrée_—_simple_début">Contraintes de validation sur les éléments d'entrée — simple début</h3> - - - -<p>Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.</p> - -<p>Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> et un exemple « live » ci-dessous :</p> - -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><form> - <label for="choose">Préférez‑vous la banane ou la cerise ?</label> - <input id="choose" name="i_like"> - <button>Soumettre</button> -</form></pre> - -<pre class="brush: css">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 1px solid black; -}</pre> -</div> - -<p>{{EmbedLiveSample("Hidden_code", "100%", 55)}}</p> - -<p>Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.</p> - -<h3 id="L'attribut_required">L'attribut required</h3> - -<p>La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).</p> - -<p>Ajoutez un attribut <code>required</code> à votre saisie, comme montré ci‑dessous :</p> - -<pre class="brush: html"><form> - <label for="choose">Préférez-vous la banane ou la cerise ?</label> - <input id="choose" name="i_like" required> - <button>Soumettre</button> -</form></pre> - -<p>Notez aussi le CSS incorporé dans le fichier exemple :</p> - -<pre class="brush: css">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 1px solid black; -}</pre> - -<p>L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :</p> - -<p>{{EmbedLiveSample("L'attribut_required", "100%", 55)}}</p> - -<h3 id="Validation_selon_une_expression_régulière">Validation selon une expression régulière</h3> - -<p>Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression régulière</a> comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.</p> - -<p>Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :</p> - -<ul> - <li><code>a</code> — correspond à un caractère qui doit être un a (ni b, ni aa, etc.)</li> - <li><code>abc</code> — correspond à <code>a</code>, suivi de <code>b</code>, suivi de <code>c</code>.</li> - <li><code>a*</code> — correspond au caractère a, absent ou présent plusieurs fois (<code>+</code> correspond à un caractère une ou plusieurs fois).</li> - <li><code>[^a]</code> — correspond à un caractère qui <strong>n'est pas</strong> un a.</li> - <li><code>a|b</code> — correspond à un caractère qui est a ou b.</li> - <li><code>[abc]</code> — correspond à un caractère qui est a, b ou c.</li> - <li><code>[^abc]</code> — correspond à un caractère qui <strong>n'est pas</strong> a, b ou c.</li> - <li><code>[a-z]</code> — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez <code>[A-Za-z]</code> pour minuscules et majuscules et <code>[A-Z]</code> pour les majuscules uniquement).</li> - <li><code>a.c</code> — correspond à a, suivi par n'importe quel caractère,suivi par c.</li> - <li><code>a{5}</code> — correspond à a, 5 fois.</li> - <li><code>a{5,7}</code> — correspond à a, 5 à 7 fois, mais ni plus, ni moins.</li> -</ul> - -<p>Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :</p> - -<ul> - <li><code>[ -]</code> — correspond à une espace ou un tiret.</li> - <li><code>[0-9]</code> — correspond à tout nombre compris entre 0 et 9.</li> -</ul> - -<p>Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :</p> - -<ul> - <li><code>[Ll].*k</code> — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules.</li> - <li><code>[A-Z][A-Za-z' -]+</code> — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford.</li> - <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration.</li> -</ul> - -<p>Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut <code>pattern</code>, ainsi :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><form> - <label for="choose">Préférez‑vous la banane ou la cerise ?</label> - <input id="choose" name="i_like" required pattern="banane|cerise"> - <button>Soumettre</button> -</form></code></pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 1px solid black; -}</code></pre> -</div> - -<p>{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}</p> - -<p>Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».</p> - -<p>Maintenant, essayez de changer la valeur à l'intérieur de l'attribut <code>pattern</code> suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !</p> - -<div class="note"> -<p><strong>Note :</strong> Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type <code>email</code>, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type <code>url</code> vont automatiquement nécessiter une URL correctement formée.</p> -</div> - -<div class="note"> -<p><strong>Note : </strong>L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.</p> -</div> - -<h3 id="Limitation_de_la_taille_des_entrées">Limitation de la taille des entrées</h3> - -<p>Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.</p> - -<p>Pour les champs numériques (c'est à dire, <type d'entrée="nombre">), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide.</p> - -<p>Prenons un autre exemple. Créez une nouvelle copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p> - -<p>Supprimez maintenant le contenu de l'élément <code><body></code> et remplacez-le par le suivant :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><form> - <div> - <label for="choose">Préférez‑vous la banane ou la cerise ?</label> - <input id="choose" name="i_like" required minlength="6" maxlength="6"> - </div> - <div> - <label for="number">Combien en voulez‑vous ?</label> - <input type="number" id="number" name="amount" value="1" min="1" max="10"> - </div> - <div> - <button>Soumettre</button> - </div> -</form></code></pre> - -<ul> - <li>Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de <em>banane</em> ou <em>cerise</em>. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.</li> - <li>Nous avons également contraint le champ <code>number</code> à un <code>min</code> de 1 et un <code>max </code>de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.</li> -</ul> - -<div class="hidden"> -<pre class="line-numbers language-html"><code class="language-html">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 2px solid black; -} - -div { - margin-bottom: 10px; -}</code></pre> -</div> - -<p>Voici cet exemple s'exécutant en « live » :</p> - -<p>{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}</p> - -<div class="note"> -<p><strong>Note</strong>: <code><input type="number"></code> (et d'autres types, comme <code>range</code>) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons <kbd>^</kbd> et <kbd>v</kbd>).</p> -</div> - -<h3 id="Exemple_complet">Exemple complet</h3> - -<p>Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">>Qualité</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ce champ est obligatoire<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>title<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Mr<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>M.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>title<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ms<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Mme.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel est votre âge ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="comment token"><!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est - pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter - que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand - il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>12<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> - <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>\d+<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span><span class="punctuation token">>Quel est votre fruit </span></span>favori ?<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ce champ est obligatoire<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> - <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Banane<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Cerise<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">> - </span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">>Citron</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">> -</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">>Fraise</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Orange<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pomme<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>datalist</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span><span class="punctuation token">>Quelle est votre</span></span> adresse électronique ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Laissez un court message<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span> <span class="attr-name token">maxlength</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>140<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Soumettre<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">1</span>em sans-serif<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">margin</span> <span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">form </span><span class="punctuation token">{</span> - <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">300</span>px<span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">5</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">p > label </span><span class="punctuation token">{</span> - <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">input[type=text], -input[type=email], -input[type=number], -textarea, -fieldset </span><span class="punctuation token">{</span> -<span class="comment token">/* requis pour composer de manière appropriée les éléments - de formulaire sur les navigateurs fondés sur WebKit */</span> - <span class="property token">-webkit-appearance</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> - - <span class="property token">width</span> <span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#333</span><span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - - <span class="property token">font-family</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">90%</span><span class="punctuation token">;</span> - - <span class="property token">-moz-box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">input<span class="pseudo-class token">:invalid</span> </span><span class="punctuation token">{</span> - <span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">5</span>px <span class="number token">1</span>px red<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">input<span class="pseudo-class token">:focus</span><span class="pseudo-class token">:invalid</span> </span><span class="punctuation token">{</span> - <span class="property token">outline</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p>{{EmbedLiveSample("Exemple_complet", "100%", 450)}}</p> - - - -<h3 id="Messages_d'erreur_personnalisés">Messages d'erreur personnalisés</h3> - -<p>Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.</p> - -<p>Ces messages automatiques présentent deux inconvénients:</p> - -<ul> - <li>Il n'y a pas de façon standard de changer leur apparence avec CSS.</li> - <li>Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre.</li> -</ul> - -<table> - <caption>Versions françaises des navigateurs sur une page en anglais</caption> - <thead> - <tr> - <th scope="col">Navigateur</th> - <th scope="col">Affichage</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 17 (Windows 7)</td> - <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td> - </tr> - <tr> - <td>Chrome 22 (Windows 7)</td> - <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td> - </tr> - <tr> - <td>Opera 12.10 (Mac OSX)</td> - <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td> - </tr> - </tbody> -</table> - -<p>Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.</p> - -<p>HMTL5 fournit une <a href="http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api">API de contraintes de validation</a> pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :</p> - -<pre class="brush: html"><form> - <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label> - <input type="email" id="mail" name="mail"> - <button>Envoyer</button> -</form></pre> - -<p>En JavaScript, il faut appeler la méthode <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()" title="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a>:</p> - -<pre class="brush: js">var email = document.getElementById("mail"); - -email.addEventListener("keyup", function (event) { - if(email.validity.typeMismatch) { - email.setCustomValidity("J'attend un e-mail, mon cher !"); - } else { - email.setCustomValidity(""); - } -});</pre> - -<p>{{EmbedLiveSample("Messages_d'erreur_personnalisés", "100%", 50)}}</p> - -<h2 id="Validation_de_formulaires_avec_JavaScript">Validation de formulaires avec JavaScript</h2> - -<p>Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.</p> - -<h3 id="API_de_contraintes_de_validation_HTML5">API de contraintes de validation HTML5</h3> - -<p>De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire.</p> - -<p>Propriétés de l'API de validation des contraintes</p> - -<table> - <thead> - <tr> - <th scope="col">Propriétés</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>validationMessage</code></td> - <td>Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (<code>willValidate</code> est alors <code>false</code>), ou bien la valeur de l'élément satisfait ses contraintes.</td> - </tr> - <tr> - <td><code>validity</code></td> - <td>Un objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.</td> - </tr> - <tr> - <td><code>validity.customError</code></td> - <td>Renvoie <code>true</code> si l'élément à une erreur personnalisée, <code>false</code> a contrario.</td> - </tr> - <tr> - <td><code>validity.patternMismatch</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément ne correspond pas au motif fourni, <code>false</code> dans le cas contraire. Si la méthode renvoie <code>true</code>, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>validity.rangeOverflow</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément est supérieure au maximum défini, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.rangeUnderflow</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément est plus petite que le minimum défini, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.stepMismatch</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément ne correspond pas aux règles définies par l'attribut <code>step</code>,<code>false</code> a contrario. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.tooLong</code></td> - <td>Renvoie <code>true</code> si la taille de l'élément est supérieure à la longueur maximum définie, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.typeMismatch</code></td> - <td>Renvoie <code>true</code> si la syntaxe de la valeur de l'élément n'est pas correcte ; <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>validity.valid</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément n'a pas de problème de validité, sinon <code>false</code>. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est <code>true</code> ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est <code>false</code>.</td> - </tr> - <tr> - <td><code>validity.valueMissing</code></td> - <td>Renvoie <code>true</code> si l'élément n'a pas de valeur alors que le champ est requis, sinon<code>false</code>. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est <code>true</code>.</td> - </tr> - <tr> - <td><code>willValidate</code></td> - <td>Retourne <code>true</code> si l'élément est validé lorsque le formulaire est soumis, <code>false</code> dans le cas contraire.</td> - </tr> - </tbody> -</table> - -<h4 id="Méthodes_de_l'API_de_validation_des_contraintes">Méthodes de l'API de validation des contraintes</h4> - -<table> - <thead> - <tr> - <th scope="col">Méthodes</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>checkValidity()</code></td> - <td>Renvoie <code>true</code> si la valeur de l'élément n'a pas de problème de validation, <code>false</code> autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.</td> - </tr> - <tr> - <td><code>setCustomValidity(<em>message</em>)</code></td> - <td>Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée.</td> - </tr> - </tbody> -</table> - -<p>Pour les anciens navigateurs, il existe <a href="https://hyperform.js.org/">une prothèse d'émulation (<em>polyfill</em>) comme Hyperform</a>, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.</p> - -<h4 id="Exemple_d'utilisation_de_l'API_de_validation_des_contraintes">Exemple d'utilisation de l'API de validation des contraintes</h4> - -<p>Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :</p> - -<pre class="brush: html"><form novalidate> - <p> - <label for="mail"> - <span>Veuillez saisir une adresse e-mail :</span> - <input type="email" id="mail" name="mail"> - <span class="error" aria-live="polite"></span> - </label> - <p> - <button>Envoyer</button> -</form></pre> - -<p>Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.</p> - -<p>L'attribut <code><a href="https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.</p> - -<h5 id="CSS">CSS</h5> - -<p>Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants.</p> - -<pre class="brush: css">/* Juste pour que notre exemple soit plus joli */ -body { - font: 1em sans-serif; - padding: 0; - margin : 0; -} - -form { - max-width: 200px; -} - -p * { - display: block; -} - -input[type=email]{ - -webkit-appearance: none; - - width: 100%; - border: 1px solid #333; - margin: 0; - - font-family: inherit; - font-size: 90%; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* Voici notre composition pour les champs invalides */ -input:invalid{ - border-color: #900; - background-color: #FDD; -} - -input:focus:invalid { - outline: none; -} - -/* Voici la mise en forme pour les erreurs */ -.error { - width : 100%; - padding: 0; - - font-size: 80%; - color: white; - background-color: #900; - border-radius: 0 0 5px 5px; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.error.active { - padding: 0.3em; -}</pre> - -<h5 id="JavaScript">JavaScript</h5> - -<p>Le code JavaScript suivant gère la validation personnalisée des erreurs.</p> - -<pre class="brush: js">// Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère -// le formulaire et le champ d'e-mail ainsi que l'élément span -// dans lequel on placera le message d'erreur - -var form = document.getElementsByTagName('form')[0]; -var email = document.getElementById('mail'); -var error = document.querySelector('.error'); - -email.addEventListener("input", function (event) { - // Chaque fois que l'utilisateur saisit quelque chose - // on vérifie la validité du champ e-mail. - if (email.validity.valid) { - // S'il y a un message d'erreur affiché et que le champ - // est valide, on retire l'erreur - error.innerHTML = ""; // On réinitialise le contenu - error.className = "error"; // On réinitialise l'état visuel du message - } -}, false); -form.addEventListener("submit", function (event) { - // Chaque fois que l'utilisateur tente d'envoyer les données - // on vérifie que le champ email est valide. - if (!email.validity.valid) { - - // S'il est invalide, on affiche un message d'erreur personnalisé - error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !"; - error.className = "error active"; - // Et on empêche l'envoi des données du formulaire - event.preventDefault(); - } -}, false);</pre> - -<p>Voici le résultat:</p> - -<p>{{EmbedLiveSample("Exemple_d'utilisation_de_l'API_de_validation_des_contraintes", "100%", 130)}}</p> - -<p>L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. </p> - -<h3 id="Valider_des_formulaires_sans_API_intégrée">Valider des formulaires sans API intégrée</h3> - -<p>Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets">widgets personnalisés</a>, de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.</p> - -<p>Pour valider un formulaire, vous devez vous poser un certain nombre de questions:</p> - -<dl> - <dt>Quel type de validation dois-je réaliser ?</dt> - <dd>Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.</dd> - <dt>Que dois-je faire si le formulaire n'est pas valide ?</dt> - <dd>C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?</dd> - <dt>Comment puis-je aider l'utilisateur à corriger ses données invalides?</dt> - <dd>Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :</dd> - <dd> - <ul> - <li>SmashingMagazine : <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external" title="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/">Form-Field Validation: The Errors-Only Approach</a></li> - <li>SmashingMagazine : <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external" title="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/">Web Form Validation: Best Practices and Tutorials</a></li> - <li>Six Revision : <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external" title="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/">Best Practices for Hints and Validation in Web Forms</a></li> - <li>A List Apart : <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external" title="http://www.alistapart.com/articles/inline-validation-in-web-forms/">Inline Validation in Web Forms</a></li> - </ul> - </dd> -</dl> - -<h4 id="Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes">Exemple qui n'utilise pas l'API de validation des contraintes</h4> - -<p>Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:</p> - -<pre class="brush: html"><form> - <p> - <label for="mail"> - <span>Veuillez saisir une adresse e-mail :</span> - <input type="text" class="mail" id="mail" name="mail"> - <span class="error" aria-live="polite"></span> - </label> - <p> - <!-- Certains navigateurs historiques ont besoin de l'attribut - `type` avec la valeur `submit` sur l'élément `button` --> - <button type="submit">Envoyer</button> -</form></pre> - -<p>Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.</p> - -<h5 id="CSS_2">CSS</h5> - -<p>De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.</p> - -<pre class="brush: css">/* On améliore l'aspect de l'exemple avec ces quelques règles */ -body { - font: 1em sans-serif; - padding: 0; - margin : 0; -} - -form { - max-width: 200px; -} - -p * { - display: block; -} - -input.mail { - -webkit-appearance: none; - - width: 100%; - border: 1px solid #333; - margin: 0; - - font-family: inherit; - font-size: 90%; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* Voici les règles de mise en forme pour les champs invalides */ -input.invalid{ - border-color: #900; - background-color: #FDD; -} - -input:focus.invalid { - outline: none; -} - -/* Voici les règles utilisées pour les messages d'erreur */ -.error { - width : 100%; - padding: 0; - - font-size: 80%; - color: white; - background-color: #900; - border-radius: 0 0 5px 5px; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.error.active { - padding: 0.3em; -}</pre> - -<h5 id="JavaScript_2">JavaScript</h5> - -<p>Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.</p> - -<pre class="brush: js">// Il existe moins de méthode pour sélectionner un nœud DOM -// avec les navigateurs historiques -var form = document.getElementsByTagName('form')[0]; -var email = document.getElementById('mail'); - -// Ce qui suit est une bidouille pour atteindre le prochain nœud Element dans le DOM -// Attention à cette méthode, elle peut permettre de construire une boucle -// infinie. Pour les navigateurs plus récents, on utilisera element.nextElementSibling -var error = email; -while ((error = error.nextSibling).nodeType != 1); - -// Pour respecter la spécification HTML5 -var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; - -// De nombreux navigateurs historiques ne supportent pas la méthode -// addEventListener. Voici une méthode simple (il en existe d'autres) -function addEvent(element, event, callback) { - var previousEventCallBack = element["on"+event]; - element["on"+event] = function (e) { - var output = callback(e); - - // Une fonction de rappel (callback) qui renvoie `false` - // pour arrêter la chaîne des callback - // et interrompre l'exécution du callback d'événement. - if (output === false) return false; - - if (typeof previousEventCallBack === 'function') { - output = previousEventCallBack(e); - if(output === false) return false; - } - } -}; - -// On peut désormais reconstruire notre validation de contrainte -// Étant donné qu'on n'utilise pas la pseudo-classe CSS, il faut -// explicitement gérer la classe valid/invalid du champ e-mail -addEvent(window, "load", function () { - // Ici, on teste si le champ est vide (rappel : le champ n'est pas obligatoire) - // S'il ne l'est pas, on vérifie que son contenu est une adresse e-mail valide. - var test = email.value.length === 0 || emailRegExp.test(email.value); - - email.className = test ? "valid" : "invalid"; -}); - -// Ici, on définit ce qui se passe lorsque l'utilisateur -// saisit quelque chose dans le champ -addEvent(email, "keyup", function () { - var test = email.value.length === 0 || emailRegExp.test(email.value); - if (test) { - email.className = "valid"; - error.innerHTML = ""; - error.className = "error"; - } else { - email.className = "invalid"; - } -}); - -// Ici, on définit ce qui se passe lorsque l'utilisateur -// tente d'envoyer les données du formulaire -addEvent(form, "submit", function () { - var test = email.value.length === 0 || emailRegExp.test(email.value); - - if (!test) { - email.className = "invalid"; - error.innerHTML = "Merci d'écrire une adresse e-mail valide."; - error.className = "error active"; - - // Certains navigateurs historiques ne supportent pas - // la méthode event.reventDefault() - return false; - } else { - email.className = "valid"; - error.innerHTML = ""; - error.className = "error"; - } -});</pre> - -<p>Voici le résultat:</p> - -<p>{{EmbedLiveSample("Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes", "100%", 130)}}</p> - -<p>Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :</p> - -<ul> - <li>Bibliothèques indépendantes : - <ul> - <li><a href="http://rickharrison.github.com/validate.js/" rel="external" title="http://rickharrison.github.com/validate.js/">Validate.js</a></li> - </ul> - </li> - <li>Greffons jQuery : - <ul> - <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external" title="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">Validation</a><span style="display: none;"> </span></li> - </ul> - </li> -</ul> - -<h4 id="Validation_à_distance">Validation à distance</h4> - -<p>Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.</p> - -<p>Pour réaliser une telle validation, plusieurs précautions doivent être prises :</p> - -<ul> - <li>Il est nécessaire d'exposer une API et des données ; assurez-vous que ces données ne soient pas critiques.</li> - <li>Un décalage (<em>lag</em>) du réseau nécessite une validtion asynchrone. L'interface utilisateur doit être conçue de façon à pas être bloquée si cette validation n'est pas réalisée correctement.</li> -</ul> - -<h2 id="Conclusion">Conclusion</h2> - -<p>La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :</p> - -<ul> - <li>Afficher des messages d'erreur explicites.</li> - <li>Être tolérant sur le format des données à envoyer.</li> - <li>Indiquer exactement où est l'erreur (en particulier pour les formulaires longs).</li> -</ul> - -<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}</p> - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> -</ul> diff --git a/files/fr/web/html/introduction_to_html5/index.html b/files/fr/web/guide/html/html5/introduction_to_html5/index.html index 51eaf4850e..51eaf4850e 100644 --- a/files/fr/web/html/introduction_to_html5/index.html +++ b/files/fr/web/guide/html/html5/introduction_to_html5/index.html diff --git a/files/fr/web/guide/html/html5/liste_des_éléments_html5/index.html b/files/fr/web/guide/html/html5/liste_des_éléments_html5/index.html deleted file mode 100644 index 42f2df0c51..0000000000 --- a/files/fr/web/guide/html/html5/liste_des_éléments_html5/index.html +++ /dev/null @@ -1,580 +0,0 @@ ---- -title: Liste des éléments HTML5 -slug: Web/Guide/HTML/HTML5/Liste_des_éléments_HTML5 -tags: - - Débutant - - Guide - - HTML - - HTML5 - - Web -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -<p>Cette Page n'est pas encore complète.</p> - -<p>Travail progressif basé sur document de travail en court à <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">http://www.whatwg.org/specs/web-apps/current-work/multipage/</a>.</p> - -<h3 id="Élément_racine" style="">Élément racine</h3> - -<p>Les éléments racines définissent la structure d'un document HTML. Ils sont présents dans chacune des pages web et se situent à la suite de la déclaration doctype à la première ligne du document HTML. Les éléments de page sont placés à l'intérieur des balises ouvrante <html> et fermante </html>.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("html") }}</td> - <td>L'<em>élément HTML racine</em> (<strong><code><html></code></strong>) représente la racine du document HTML. Tout autre élément est un descendant de cet élément racine.</td> - </tr> - </tbody> -</table> - -<h3 id="Métadonnées_du_document">Métadonnées du document</h3> - -<p>Les méta-données contiennent les informations liées à la page telles que les styles de présentation et les scripts. Les méta-données de style et de scripts peuvent être définies au sein de la page web ou via un lien pointant vers un fichier.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("head") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("title") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("base") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("link") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("meta") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("style") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Gestion_des_scripts">Gestion des scripts</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("script") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("noscript") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Sections">Sections</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("body") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("section") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("nav") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("article") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("aside") }}</td> - <td> </td> - </tr> - <tr> - <td><a href="/fr/HTML/Element/Heading_Elements" title="Elementy blokowe"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("hgroup") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("header") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("footer") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("address") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Contenu_de_type_bloc">Contenu de type bloc</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("p") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("hr") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("pre") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("blockquote") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("ol") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("ul") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("li") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("dl") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("dt") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("dd") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("figure") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("figcaption") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("div") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Les_sémantiques_à_un_niveau_textuel">Les sémantiques à un niveau textuel</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("a") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("em") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("strong") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("small") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("s") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("cite") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("q") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("dfn") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("abbr") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("data") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("time") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("code") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("var") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("samp") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("kbd") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("sub") }},{{ HTMLElement("sup") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("i") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("b") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("u") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("mark") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("ruby") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("rt") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("rp") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("bdi") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("bdo") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("span") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("br") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("wbr") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Les_éléments_d'édition">Les éléments d'édition</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("ins") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("del") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Le_contenu_inclus">Le contenu inclus</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("img") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("iframe") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("object") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("param") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("video") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("audio") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("source") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("track") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("canvas") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("map") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("area") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("svg") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("math") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Les_données_tabulaire">Les données tabulaire</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("table") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("caption") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("colgroup") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("col") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("tbody") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("thead") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("tfoot") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("tr") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("td") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("th") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Les_formulaires">Les formulaires</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("form") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("fieldset") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("legend") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("label") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("button") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("select") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("datalist") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("optgroup") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("option") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("textarea") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("keygen") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("output") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("progress") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("meter") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Les_éléments_pour_l'interactivité">Les éléments pour l'interactivité</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Balise</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ HTMLElement("details") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("summary") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("command") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ HTMLElement("menu") }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/fr/web/guide/html/liens_email/index.html b/files/fr/web/guide/html/liens_email/index.html deleted file mode 100644 index 77e52eafb4..0000000000 --- a/files/fr/web/guide/html/liens_email/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Liens email -slug: Web/Guide/HTML/Liens_email -tags: - - Beginner - - Exemple - - Guide - - HTML - - Web -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links -translation_of_original: Web/Guide/HTML/Email_links ---- -<p><span class="seoSummary">Il est parfois utile de créer des liens ou des boutons qui nous permettent d'écrire un nouvel e-mail. Par exemple, on peut les utiliser pour créer un bouton « contactez-nous ». Ceci est possible grâce à l'élement HTML {{HTMLElement("a")}} et au format d'URL <code>mailto</code>.</span></p> - -<h2 id="Bases_de_mailto">Bases de <code>mailto</code></h2> - -<p>Dans sa forme la plus basique et la plus utilisée, un lien <code>mailto</code> indique simplement l'adresse e-mail du destinataire. Par exemple :</p> - -<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a></pre> - -<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a>.</p> - -<p>En réalité, l'adresse e-mail est optionelle. Si on ne l'ajoute pas (le {{htmlattrxref("href", "a")}} contiendra simplement « mailto: »), une nouvelle fenêtre du client de messagerie de l'utilisateur s'ouvrira, sans destinataire spécifié. Cela peut être utile dans le cas d'un bouton « Partager » où l'utilisateur sélectionnera les personnes auxquelles il veut envoyer un e-mail.</p> - -<h2 id="Précisions">Précisions</h2> - -<p>En plus de l'adresse e-mail, on peut fournir d'autres informations. En effet, n'importe quel champ d'en-tête d'un e-mail standard peut être ajoutée à l'URL <code>mailto</code>. Les plus communément utilisés sont « <code>subject</code> », « <code>cc</code> » et « <code>body</code> » (qui n'est pas réellement un champ d'entête mais qui permet de spécifier un message court pour le nouvel email). Chaque champ et sa valeur sont indiqués comme un terme de requête.</p> - -<div class="note"> -<p><strong>Note :</strong> Les valeurs de chaque champ doivent être codées au <a href="https://en.wikipedia.org/wiki/Percent-encoding">format URL</a>.</p> -</div> - -<h3 id="Échantillons_dURL_mailto">Échantillons d'URL <code>mailto</code></h3> - -<p>Voici quelques échantillons d'URL <code>mailto</code>:</p> - -<ul> - <li><a href="mailto:">mailto:</a></li> - <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20le%20sujet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20le%20sujet</a></li> -</ul> - -<p>Notez l'utilisation de l'esperluette (&) pour séparer les champs de l'URL <code>mailto</code>. C'est le format standard d'écriture des URL.</p> - -<h3 id="Exemple">Exemple</h3> - -<p>Si vous voulez créer un lien qui permettrait de s'inscrire à une newsletter, vous pouvez utiliser un lien <code>mailto</code> comme ceci :</p> - -<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F"> -Inscrivez-vous à notre newsletter -</a></pre> - -<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F">Inscrivez-vous à notre newsletter</a>.</p> - -<section id="Quick_Links"> -<ol> - <li>{{HTMLElement("a")}}</li> - <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li> - <li>{{RFC(5322, "Internet Message Format")}}</li> - <li><a href="http://www.url-encode-decode.com/">Encodage/décodage d'URL en ligne</a></li> -</ol> -</section> diff --git a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/fr/web/guide/html/using_html_sections_and_outlines/index.html index 319d98e927..319d98e927 100644 --- a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html +++ b/files/fr/web/guide/html/using_html_sections_and_outlines/index.html diff --git a/files/fr/web/guide/introduction_to_web_development/index.html b/files/fr/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..97f1bc650f --- /dev/null +++ b/files/fr/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,29 @@ +--- +title: Introduction au développement web +slug: Développement_Web/Introduction_au_développement_web +translation_of: Web/Guide/Introduction_to_Web_development +--- +<p>Que vous débutiez dans le domaine du développement web ou que vous désiriez élargir vos horizons, ces liens devraient vous aider.</p> +<div class="note"> + <strong>Note :</strong> cette page n'est qu'une ébauche, nous aurions besoin de plus de contenu.</div> +<table class="mainpage-table"> + <tbody> + <tr> + <td> + <h2 id="Sujets_de_documentation">Sujets de documentation</h2> + <p>Aucun article n'est encore disponible.</p> + </td> + <td> + <h2 id="Ressources">Ressources</h2> + <dl> + <dt> + <a class="external" href="http://www.alsacreations.com/" title="http://www.alsacreations.com/">Alsacréations</a></dt> + <dd> + Tutoriels HTML, CSS, actualités et articles sur les standards du web.</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> +<p>{{ languages( { "en": "en/Web_development/Introduction_to_Web_development", "zh-tw": "zh_tw/Web_開發/Web開發入門" } ) }}</p> diff --git a/files/fr/web/guide/using_formdata_objects/index.html b/files/fr/web/guide/using_formdata_objects/index.html deleted file mode 100644 index 3d07259319..0000000000 --- a/files/fr/web/guide/using_formdata_objects/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Utiliser les objets FormData -slug: Web/Guide/Using_FormData_Objects -translation_of: Web/API/FormData/Using_FormData_Objects -translation_of_original: Web/Guide/Using_FormData_Objects ---- -<p>L'objet <a href="/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de créer un ensemble de paires clef-valeur pour un envoi via <code>XMLHttpRequest</code>. Cet objet est destiné avant tout à l'envoi de données de formulaire, mais il peut être utilisé indépendamment des formulaires afin de transmettre des données associées à une clef. Les données transmises sont dans le même format qu'utiliserait la méthode <code>submit()</code> pour envoyer des données si le type d'encodage du formulaire correspondait à "multipart/form-data".</p> - -<h2 id="Créer_un_objet_FormData_de_zéro">Créer un objet <code>FormData</code> de zéro</h2> - -<p>Vous pouvez créer un objet <code>FormData</code> en l'instanciant puis en lui ajoutant des champs au moyen de la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>append()</code></a>, comme ci-dessous :</p> - -<pre class="brush: js">var formData = new FormData(); - -formData.append("username", "Groucho"); -formData.append("accountnum", 123456); // le nombre 123456 est immédiatement converti en la chaîne "123456" - -// Choix de l'utilisateur à partir d'un input HTML de type file... -formData.append("userfile", fileInputElement.files[0]); - -// Pseudo-objet fichier JavaScript... -var content = '<a id="a"><b id="b">hey!</b></a>'; // le corps du nouveau fichier... -var blob = new Blob([content], { type: "text/xml"}); - -formData.append("webmasterfile", blob); - -var request = new XMLHttpRequest(); -request.open("POST", "http://foo.com/submitform.php"); -request.send(formData); -</pre> - -<div class="note"><strong>Remarque :</strong> les champs "userfile" et "webmasterfile" contiennent tous les deux un fichier. Le nombre assigné au champ "accountnum" est immédiatement converti en une chaîne de caractères par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être soit un {{ domxref("Blob") }}, soit un {{ domxref("File") }}, ou encore une chaîne de caractères : <strong>si la valeur n'est ni un objet Blob ni un objet File, la valeur est convertie en une chaîne de caractères</strong>).</div> - -<p>Cet exemple crée une instance de <code>FormData</code> contenant des valeurs pour les champs nommés "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> de <code>XMLHttpRequest</code> pour envoyer les données du formulaire. Le champ "webmasterfile" est un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>. Un objet <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a> représente un pseudo-objet fichier de données brutes et immuables. Les Blobs représentent des données qui ne sont pas forcément dans un format natif de JavaScript. L'interface {{ domxref("File") }} est basée sur le <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, héritant des fonctionnalités du blob et l'étendant afin de supporter les fichiers système de l'utilisateur. Afin de construire un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, vous pouvez invoquer le <a href="/en/DOM/Blob#Constructor" title="en/DOM/Blob#Constructor"><code>constructeur Blob</code></a>.</p> - -<h2 id="Récupérer_un_objet_FormData_à_partir_d'un_formulaire">Récupérer un objet <code>FormData</code> à partir d'un formulaire</h2> - -<p>Pour construire un objet <code>FormData</code> qui contient les données d'un {{ HTMLElement("form") }} existant, il suffit de spécifier cet élément formulaire lors de la création de l'objet <code>FormData</code> :</p> - -<pre class="brush: js">var formData = new FormData(someFormElement); -</pre> - -<p>Par exemple :</p> - -<pre class="brush: js">var formElement = document.getElementById("myFormElement"); -var request = new XMLHttpRequest(); -request.open("POST", "submitform.php"); -request.send(new FormData(formElement)); -</pre> - -<p>Vous pouvez également ajouter des données additionnelles à l'objet <code>FormData</code> après l'avoir extrait d'un formulaire et avant son envoi, comme ceci :</p> - -<pre class="brush: js">var formElement = document.getElementById("myFormElement"); -formData = new FormData(formElement); -formData.append("serialnumber", serialNumber++); -request.send(formData);</pre> - -<p>Cela vous permet de compléter les données du formulaire avant de les envoyer, en incluant des informations additionnelles qui ne sont pas nécessairement accessibles à l'utilisateur dans le formulaire.</p> - -<h2 id="Envoyer_des_fichiers_avec_un_objet_FormData">Envoyer des fichiers avec un objet <code>FormData</code></h2> - -<p>Vous pouvez aussi envoyer des fichiers en utilisant <code>FormData</code>. Il suffit d'inclure un élément {{ HTMLElement("input") }} de type "file" :</p> - -<pre class="brush: html"><form enctype="multipart/form-data" method="post" name="fileinfo"> - <label>Your email address:</label> - <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> - <label>Custom file label:</label> - <input type="text" name="filelabel" size="12" maxlength="32" /><br /> - <label>File to stash:</label> - <input type="file" name="file" required /> - <input type="submit" value="Stash the file!" /> -</form> -<div id="output"></div> -</pre> - -<p>Vous pouvez ensuite l'envoyer en utilisant un code semblable à celui-ci :</p> - -<pre class="brush: js">var form = document.forms.namedItem("fileinfo"); -form.addEventListener('submit', function(ev) { - - var - oOutput = document.getElementById("output"), - oData = new FormData(document.forms.namedItem("fileinfo")); - - oData.append("CustomField", "This is some extra data"); - - var oReq = new XMLHttpRequest(); - oReq.open("POST", "stash.php", true); - oReq.onload = function(oEvent) { - if (oReq.status == 200) { - oOutput.innerHTML = "Uploaded!"; - } else { - oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>"; - } - }; - - oReq.send(oData); - ev.preventDefault(); -}, false); -</pre> - -<div class="note"> -<p><strong>Remarque </strong>: si vous passez une référence au formulaire, la méthode spécifiée dans le formulaire sera utilisée en remplacement de celle précisée dans l'appel à open().</p> -</div> - -<div class="note"> -<p><strong>Remarque </strong>: Cet exemple redirige les données en sortie vers un script PHP sur le serveur, et gère les erreurs HTTP, quoique d'une manière peu élégante.</p> -</div> - -<p>Vous pouvez aussi ajouter un {{ domxref("File") }} ou un {{ domxref("Blob") }} directement à l'objet {{ domxref("XMLHttpRequest/FormData", "FormData") }}, comme ceci :</p> - -<pre class="brush: js">data.append("myfile", myBlob, "filename.txt"); -</pre> - -<p>Lorsque la méthode <code>append</code> est utilisée, il est possible de renseigner le troisième paramètre optionnel pour passer un nom de fichier à l'en-tête <code>Content-Disposition</code> qui est envoyée au serveur. Si aucun nom de fichier n'est spécifié (ou si le paramètre n'est pas supporté,) le nom "blob" est utilisé.</p> - -<p>Vous pouvez aussi utiliser <code>FormData</code> avec jQuery si vous configurez les bonnes options :</p> - -<pre class="brush: js">var fd = new FormData(document.getElementById("fileinfo")); -fd.append("CustomField", "This is some extra data"); -$.ajax({ - url: "stash.php", - type: "POST", - data: fd, - processData: false, // indique à jQuery de ne pas traiter les données - contentType: false // indique à jQuery de ne pas configurer le contentType -}); -</pre> - -<h2 id="Soumettre_des_formulaires_et_téléverser_des_fichiers_via_AJAX_sans_objets_FormData">Soumettre des formulaires et téléverser des fichiers via AJAX <em>sans</em> <code>objets FormData</code></h2> - -<p>Si vous souhaitez savoir comment sérialiser et soumettre via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> un formulaire<em> sans</em> utiliser d'objets FormData, veuillez consulter <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a>.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/DOM/HTMLFormElement" title="/en-US/docs/DOM/HTMLFormElement"><code>HTMLFormElement</code></a></li> - <li><a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a></li> - <li><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></li> -</ul> diff --git a/files/fr/web/guide/writing_forward-compatible_websites/index.html b/files/fr/web/guide/writing_forward-compatible_websites/index.html new file mode 100644 index 0000000000..f1005a2ace --- /dev/null +++ b/files/fr/web/guide/writing_forward-compatible_websites/index.html @@ -0,0 +1,137 @@ +--- +title: Développer des sites à compatibilité descendante +slug: Développement_Web/Développer_des_sites_à_compatibilité_descendante +tags: + - NeedsEditorialReview + - NeedsTechnicalReview +translation_of: Web/Guide/Writing_forward-compatible_websites +--- +<p>Cette page explique comment développer des sites qui continuent de fonctionner au fur et à mesure des mises à jour des navigateurs.</p> + +<p>C'est d'autant plus important pour les intranets et autres sites non-publics; s'il n'est pas possible de voir votre site, il ne nous est pas possible de voir s'il est cassé. Il ne nous est pas toujours possible de suivre tous les sites, mais en suivre autant que possible permet d'en assurer la pérennité.</p> + +<h2 id="JavaScript">JavaScript</h2> + +<h3 id="Préfixez_tous_les_accès_à_des_variables_globales_dans_les_attributs_onfoo_par_“window.”">Préfixez tous les accès à des variables globales dans les attributs <code>onfoo</code> par “<code>window.</code>”</h3> + +<div>Quand un attribut de gestion d'évenement (<code>onclick</code>, <code>onmouseover</code>, etc) est utilisé sur un élément HTML, toutes les résolutions de variable dans l'attribut sont d'abord résolues sur l'élément lui-même, puis sur le formulaire contenant l'élément (si c'est un élément de formulaire), puis sur <code>document</code>, puis finalement sur <code>window</code> (là où se trouvent les variables globales que vous avez définies).Par exemple, si vous avez le balisage suivant :</div> + +<pre><div onclick="alert(ownerDocument)">Cliquez moi</div></pre> + +<p>Alors cliquer sur le texte affichera le <code>ownerDocument</code> du <code>div</code>. Il en sera toujours ainsi, même s'il y a une <code>var ownerDocument</code> déclarée dans l'espace de visibilité global.</p> + +<p>Cela signifie qu'à chaque fois que vous accédez à une variable (ou une fonction) globale dans un attribut de gestion d'évenement vous pouvez vous retrouver avec une collision de nom. Il suffit pour cela qu'une nouvelle specification ajoute une nouvelle propriété DOM aux éléments, et que cette propriété porte le même nom que votre variable ou fonction.<br> + Si cela arrive, alors soudainement votre function ne sera plus appellée. Ceci est déjà arrivé de nombreuses fois à de multiples sites durant la phase d'évolution d'HTML5.</p> + +<p>Pour éviter ce problème, qualifiez complétement vos variables globales en utilisant <code>window.</code>, comme ceci :</p> + +<pre><script> + function nomLocal() { + alert('La fonction nomLocal a été appellée.'); + } +</script> +<div onclick="<strong>window.</strong>nomLocal()">Cliquer ici devrait faire apparaitre un message.<div> +</pre> + +<h3 id="Ne_concatenez_pas_les_scripts_dont_vous_n'avez_pas_le_contrôle.">Ne concatenez pas les scripts dont vous n'avez pas le contrôle.</h3> + +<p>En ECMAScript, la directive "<code>use strict;</code>" s'applique sur la totalité du fichier. Ainsi, ajouter un script qui dépends d'un comportement non-strict à la suite d'un script en mode strict risque fortement de générer des erreurs.</p> + +<h3 id="Demandez_aux_auteurs_des_bibliothèques_Javascript_que_vous_utilisez_de_suivre_ces_recommandations.">Demandez aux auteurs des bibliothèques Javascript que vous utilisez de suivre ces recommandations.</h3> + +<p>Suggérez aux développeurs de vos bibliothèques favorites de suivre ces recommendations. S'ils ne le font pas, vous n'avez pas l'assurance que la bibliothèque continue de fonctionner dans le futur. Malheureusement, les bibliothèques suivent rarement ces conseils.</p> + +<h2 id="Détection">Détection</h2> + +<h3 id="Détecter_des_fonctionnalités_particulières">Détecter des fonctionnalités particulières</h3> + +<p>Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur <code>"filter" in body.style</code> s'évalue à <code>true</code>, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet <code>window.event</code> disponible dans les gestionnaires d'évenement. </p> + +<p>De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte <em>pas</em> une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte <code>onload</code> sur les éléments scripts alors cela signifie qu'il ne supportera jamais <code>onreadystatechange</code> sur ces mêmes éléments.</p> + +<p>Les comportement des navigateurs convergent de plus en plus: des fonctionnalités sont ajoutées, supprimées, des bugs sont corrigés. Tout ceci arrive regulièrement et arrivera encore.</p> + +<p>Ne cherchez donc pas à détecter une fonctionnalité ou un objet pour en déduire ensuite que parce qu'elle existe (ou non) alors telle ou telle autre fonctionnalité doit alors aussi exister (ou non).</p> + +<h3 id="Ne_détectez_pas_l'agent_utilisateur">Ne détectez pas l'agent utilisateur</h3> + +<p>Ceci est une sous-catégorie très particulière de l'exemple précédent. Il ne faut pas penser qu'une certaine fonctionnalité (la présence ou non d'une certaine chaine de caractères dans l'agent utilisateur -UA-) implique la présence ou l'absence d'autres fonctionnalités.</p> + +<h4 id="Si_vous_devez_détecter_l'agent_utilisateur_alors_ne_détectez_que_pour_les_anciennes_versions.">Si vous devez détecter l'agent utilisateur, alors ne détectez que pour les anciennes versions.</h4> + +<p>Si vous devez <strong>vraiment</strong> détecter l'agent utilisateur, alors ne l'utilisez que pour cibler des versions déjà dépassées.<br> + Tout d'abord, prévoyez toujours un chemin dans votre code pour les navigateurs que vous ne connaissez pas, ainsi que pour les versions courantes et futures des navigateurs avec lesquels vous avez testé votre site. Ensuite si ce chemin par défaut ne fonctionne pas dans certaines anciennes versions de certains navigateurs et uniquement si l'erreur ne peut pas être détectée par l'absence de fonctionnalités utilisées par votre chemin par défaut, alors il est raisonnable d'ajouter des hacks qui ne ciblent que ces anciennes versions de certains navigateurs, en recourant à la détection de l'agent utilisateur.</p> + +<p>Pour les besoins de ce conseil, considérez que "version courante" signifie la dernière version du navigateur que vous avez testé. Par exemple, si vous avez testé le chemin par défaut de votre code dans Firefox Aurora mais que Firefox Beta et les dernières versions ont un bug qui font planter votre code, alors il est raisonnable de considérer le numero de version de Aurora au moment du test comme étant la "version courante", et considérer la version Beta comme une version "ancienne", même si elle n'est pas encore sortie pour le public.</p> + +<h3 id="Ne_créez_pas_de_chemin_de_code_inutile_pour_une_multitude_de_navigateurs_différents">Ne créez pas de chemin de code inutile pour une multitude de navigateurs différents</h3> + +<div>N'allez pas créer trop de branches de code différentes, qui s'executent en fonction de l'agent utilisateur ou de la détection de fonctionnalité si vous avez une branche de code qui fonctionne pour tous les navigateurs. Il y a de fortes chances pour que les navigateurs convergent vers un comportement commun, ce qui risque de casser les chemins alternatifs que vous auriez créés pour tel ou tel navigateur.</div> + +<h2 id="Test">Test</h2> + +<h3 id="Tester_dans_les_navigateurs_principaux">Tester dans les navigateurs principaux</h3> + +<p>Testez votre code au moins sous Firefox, Chrome ou Safari (vu que les deux sont basés sur le même moteur WebKit), Opera et Internet Explorer. Si vous avez suivi le conseil donné précedemment à propos de l'unique branche de code pour toutes les versions de navigateurs (connues et inconnues), tester uniquement cette unique branche de code dans tous les navigateurs rends extremement probable le fait que votre code ne cassera pas dans le futur.</p> + +<p>Parfois, plusieurs navigateurs implementent une certaine fonctionnalité de manière légérement différente. Si vous avez une unique branche de code qui tourne dans tous les navigateurs principaux, cela signifie que vous utilisez soit des fonctionnalités pour lesquelles les navigateurs ont un comportement identiques, ou, s'ils n'ont pas encore convergé vers un seul comportement, votre code fonctionnera quelque soit le comportement final qui sera utilisé par tous.</p> + +<h2 id="Prefixes_et_fonctionnalités_propres_à_un_certain_navigateur">Prefixes et fonctionnalités propres à un certain navigateur</h2> + +<h3 id="N'utilisez_pas_de_hack_pour_cibler_la_version_actuelle_ou_une_version_future_d'un_navigateur">N'utilisez pas de hack pour cibler la version actuelle ou une version future d'un navigateur</h3> + +<p>Cela reviendrai à supposer que la corrélation actuelle entre plusieurs bugs implique une future corrélation entre ces mêmes bugs. Nous avons vu que cela n'était pas le cas.</p> + +<p>Il est par contre acceptable de cibler d'anciennes versions du navigateur si votre hack repose sur un bug présent dans les anciennes versions et corrigé dans les versions actuelles. Une fois que le bug X a été corrigé d'un navigateur, vous pouvez savoir que toutes les versions qui avaient le bug X avaient aussi le bug Y, et vous pourrez ainsi vous servir de X pour cibler des cas particuliers pour le bug Y.</p> + +<p>Dans ce cas, on considère par "actuelles" les versions les plus récentes du navigateur que vous avez testé, comme nous l'avons déjà évoqué dans le cas de la détection de l'agent utilisateur précédemment.</p> + +<h3 id="Evitez_de_dépendre_de_fonctionnalités_non_standard_ultra_récentes">Evitez de dépendre de fonctionnalités non standard ultra récentes</h3> + +<p>Même si la fonctionnalitée est préfixée, l'utiliser peut être dangereux : au fur et à mesure de l'évolution de la spécification, l'implémentation préfixée du navigateur peut évoluer pour se rapprocher de la spécification. De plus, une fois la fonctionnalité standardisée, les versions prefixées seront vraisemblablement supprimées.</p> + +<p>Les fonctionnalités non standard, prefixées, sont fournies par les développeurs de navigateurs pour vous permettre de les expérimenter et d'offrir vos remarques en retour. Elles ne sont pas censées être déployées. Si vous choisissez de les utiliser, préparez-vous à faire des mises à jour régulières de votre site pour rester à flot avec les changements.</p> + +<p>Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site.</p> + +<h3 id="N'utilisez_pas_les_versions_préfixées_des_fonctionnalités_à_moins_de_cibler_les_anciennes_versions">N'utilisez pas les versions préfixées des fonctionnalités, à moins de cibler les anciennes versions</h3> + +<p>Le comportement des versions préfixées des fonctionnalités peut changer dans une future version. Néanmoins, dès lors qu'un navigateur est sorti avec une fonctionnalité non-prefixée, vous pouvez utiliser la version préfixée pour cibler les anciennes versions. Assurez-vous de toujours utiliser la version non-préfixée quand celle-ci est disponible.</p> + +<p>Voici un exemple, pour un navigateur qui utilise le préfixe <code>-vnd</code> en CSS et qui a sorti une version non-prefixée de la propriété <code>rends-moi-joli</code>, avec un comportement défini pour la valeur "<code>parfois</code>" qui diffère de la valeur préfixée.</p> + +<pre class="brush: html"><style> + .joli-element { + -vnd-rends-moi-joli: parfois; + rends-moi-joli: parfois; + } +</style> +</pre> + +<p>L'ordre des déclarations dans la règle précédente est important : la version non préfixée doit apparaitre en dernier.</p> + +<h3 id="N'utilisez_pas_les_versions_non_préfixées_des_propriétés_CSS_ou_des_APIs_tant_qu'au_moins_un_navigateur_ne_les_ont_pas_implémentées">N'utilisez pas les versions non préfixées des propriétés CSS ou des APIs tant qu'au moins un navigateur ne les ont pas implémentées</h3> + +<p>Tant que le support d'une version non préfixée d'une fonctionnalité n'est pas généralisé auprès des navigateurs, son comportement peut encore changer de manière radicale. Plus particulièrement, n'utilisez pas les versions non préfixées si aucun navigateur ne les implémente. Vous ne pouvez même pas être sûr que la syntaxe de la version finale sera la même que la syntaxe utilisée dans l'une des version préfixées.</p> + +<h2 id="Hygiène_de_code">Hygiène de code</h2> + +<h3 id="Evitez_les_>_manquants">Evitez les > manquants</h3> + +<p>Passer votre code au validateur est un bon moyen de s'assurer de cela. Mais même si votre site ne valide pas complétement, vous devriez vous assurer que tous vos caractères > sont présents.<br> + S'ils manquent, cela peut vous amener à des situations où un nom de balise est interprété comme un attribut d'une balise précédente. Cela peut sembler fonctionner pendant quelques temps, mais finira par casser si une spécification future défini un sens à cet attribut. </p> + +<p>Voici un exemple qui fonctionne dans les navigateurs ne possédant pas le support du HTML5, mais est cassé dans un navigateur le supportant :</p> + +<pre class="brush: html"><form action="http://www.exemple.com"> + <input type="submit" value="Soumettre le formulaire" +</form> +</pre> + +<p>à cause du > manquant sur la balise <code>input</code>.</p> + +<h3 id="Ne_laissez_pas_de_tests_qui_ne_fonctionnent_pas_dans_votre_code">Ne laissez pas de tests qui ne fonctionnent pas dans votre code</h3> + +<p>Si vous essayez d'utiliser une propriété CSS, mais que celle-ci n'a pas d'effet, supprimez-la. Elle pourrait se mettre à avoir un effet que vous n'attendiez pas du tout dans une version future.</p> + +<p>{{ languages( {"en":"en/Web_development/Writing_forward-compatible_websites" } ) }}</p> diff --git a/files/fr/web/html/appliquer_des_couleurs/index.html b/files/fr/web/html/applying_color/index.html index 58015bad66..58015bad66 100644 --- a/files/fr/web/html/appliquer_des_couleurs/index.html +++ b/files/fr/web/html/applying_color/index.html diff --git a/files/fr/web/html/attributs/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html index fca919718d..fca919718d 100644 --- a/files/fr/web/html/attributs/autocomplete/index.html +++ b/files/fr/web/html/attributes/autocomplete/index.html diff --git a/files/fr/web/html/reglages_des_attributs_cors/index.html b/files/fr/web/html/attributes/crossorigin/index.html index ebb63f97f5..ebb63f97f5 100644 --- a/files/fr/web/html/reglages_des_attributs_cors/index.html +++ b/files/fr/web/html/attributes/crossorigin/index.html diff --git a/files/fr/web/html/attributs/index.html b/files/fr/web/html/attributes/index.html index 1b1c140c4e..1b1c140c4e 100644 --- a/files/fr/web/html/attributs/index.html +++ b/files/fr/web/html/attributes/index.html diff --git a/files/fr/web/html/attributs/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html index 556f50aca9..556f50aca9 100644 --- a/files/fr/web/html/attributs/pattern/index.html +++ b/files/fr/web/html/attributes/pattern/index.html diff --git a/files/fr/web/html/attributs_universels/dropzone/index.html b/files/fr/web/html/attributs_universels/dropzone/index.html deleted file mode 100644 index e645e30973..0000000000 --- a/files/fr/web/html/attributs_universels/dropzone/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Attributs_universels/dropzone -tags: - - Attribut universel - - HTML - - Obsolete - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -<div>{{HTMLSidebar("Global_attributes")}} {{deprecated_header}}</div> - -<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>dropzone</strong></code> est un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont :</p> - -<ul> - <li><code>copy</code> qui indique que déposer un élément glissé créera une copie de celui-ci</li> - <li><code>move</code> qui indique qu'un élément qui a été glissé sera déplacé vers son nouvel emplacement</li> - <li><code>link</code> qui crée un lien vers les données déplacées</li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> -</ul> diff --git a/files/fr/web/html/éléments_en_bloc/index.html b/files/fr/web/html/block-level_elements/index.html index c099de574f..c099de574f 100644 --- a/files/fr/web/html/éléments_en_bloc/index.html +++ b/files/fr/web/html/block-level_elements/index.html diff --git a/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html b/files/fr/web/html/cors_enabled_image/index.html index e0f92b24c7..e0f92b24c7 100644 --- a/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html +++ b/files/fr/web/html/cors_enabled_image/index.html diff --git a/files/fr/web/html/formats_date_heure_html/index.html b/files/fr/web/html/date_and_time_formats/index.html index f9da6c5f01..f9da6c5f01 100644 --- a/files/fr/web/html/formats_date_heure_html/index.html +++ b/files/fr/web/html/date_and_time_formats/index.html diff --git a/files/fr/web/html/element/command/index.html b/files/fr/web/html/element/command/index.html deleted file mode 100644 index d5bdf50924..0000000000 --- a/files/fr/web/html/element/command/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: '<command> : l''élément de commande' -slug: Web/HTML/Element/command -tags: - - Element - - HTML - - Obsolete - - Reference -translation_of: Web/HTML/Element/command ---- -<div>{{obsolete_header}}{{HTMLRef}}</div> - -<p>L'élément HTML <strong><code><command></code></strong> représente une commande qui peut être lancée par l'utilisateur. Ces commandes font généralement partie d'un menu contextuel ou d'une barre d'outils mais on peut les exécuter n'importe où sur la page.</p> - -<div class="note"> -<p><strong>Note :</strong> L'élément <code><command></code> est inclus dans la spécification du W3C mais pas dans celle du WHATWG. Par ailleurs, à l'heure actuelle, aucun navigateur ne prend en charge cet élément.</p> -</div> - -<h2 id="Attributes">Attributes</h2> - -<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Cet attribut indique que la commande est sélectionnée. Il ne doit pas être utilisé si l'attribut <code>type</code> ne vaut pas <code>checkbox</code> ou <code>radio</code>.</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Cet attribut indique que la commande n'est pas disponible.</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Cet attribut fournit une image qui représente la commande.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>Cet attribut indique le nom de la commande telle qu'elle est affichée à l'utilisateur.</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>Cet attribut indique le nom du groupe de commandes auquel appartient la commande lorsque l'attribut <code>type</code> vaut <code>radio</code> le groupe sera activé lorsque la commande sera activée. Cet attribut ne doit pas être utilisé lorsque l'attribut <code>type</code> ne vaut pas <code>radio</code>.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Cet attribut à valeur contrainte indique le type de commande. On peut utiliser une des trois valeurs . - <ul> - <li> - <p><code>command</code> (le type par défaut) indique une commande normale.</p> - </li> - <li> - <p><code>checkbox</code> indique que la commande peut être activée grâce à une case à cocher.</p> - </li> - <li> - <p><code>radio</code> indique que la commande peut être activée grâce à un bouton radio.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><command type="command" label="Save" - icon="icons/save.png" onclick="save()"> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","100")}}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">contenu de méta-données</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, cet élément est un élément vide.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>La balise de début est obligatoire et la balise de fin est interdite car c'est un élément vide.</td> - </tr> - <tr> - <th scope="row">Éléments parents autorisés</th> - <td>{{HTMLElement("colgroup")}} uniquement bien que celui-ci puisse être défini implicitement car sa balise de début n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'élément fils {{HTMLElement("span")}}.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLCommandElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#commands')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("html.elements.command")}}</p> diff --git a/files/fr/web/html/element/element/index.html b/files/fr/web/html/element/element/index.html deleted file mode 100644 index 7b2a731677..0000000000 --- a/files/fr/web/html/element/element/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: '<element> : l''élément pour les éléments personnalisés (obsolète)' -slug: Web/HTML/Element/element -tags: - - Element - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/element ---- -<div>{{HTMLRef}}{{obsolete_header}}</div> - -<p>L'élément HTML <strong><code><element></code></strong> était conçu pour être utilisé afin de définir des éléments DOM personnalisés, il a été retiré de la spécification. Il a été retiré en faveur d'outils JavaScript qui permettront de créer de nouveaux éléments personnalisés, par exemple avec les Web Components.</p> - -<div class="warning"> -<p><strong>Attention !</strong> Cet élément a été retiré de la spécification. Pour plus d'informations, se référer à cette <a href="https://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">note</a>.</p> -</div> - -<h2 id="Attributs">Attributs</h2> - -<p>On peut employer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Indéfini.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Éléments parents autorisés</th> - <td>Indéfini.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Cet élément faisait actuellement partie d'un brouillon de spécification, <em><a href="https://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a></em> mais a été retiré.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("html.elements.element")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Les éléments HTML liés aux composants web (<em>web components</em>) : - - <ul> - <li>{{HTMLElement("content")}}</li> - <li>{{HTMLElement("decorator")}}</li> - <li>{{HTMLElement("shadow")}}</li> - <li>{{HTMLElement("template")}}</li> - </ul> - </li> -</ul> diff --git a/files/fr/web/html/attributs_universels/accesskey/index.html b/files/fr/web/html/global_attributes/accesskey/index.html index e53f876ed8..e53f876ed8 100644 --- a/files/fr/web/html/attributs_universels/accesskey/index.html +++ b/files/fr/web/html/global_attributes/accesskey/index.html diff --git a/files/fr/web/html/attributs_universels/autocapitalize/index.html b/files/fr/web/html/global_attributes/autocapitalize/index.html index 206412edde..206412edde 100644 --- a/files/fr/web/html/attributs_universels/autocapitalize/index.html +++ b/files/fr/web/html/global_attributes/autocapitalize/index.html diff --git a/files/fr/web/html/attributs_universels/class/index.html b/files/fr/web/html/global_attributes/class/index.html index 6204b6a173..6204b6a173 100644 --- a/files/fr/web/html/attributs_universels/class/index.html +++ b/files/fr/web/html/global_attributes/class/index.html diff --git a/files/fr/web/html/attributs_universels/contenteditable/index.html b/files/fr/web/html/global_attributes/contenteditable/index.html index 1f805fc490..1f805fc490 100644 --- a/files/fr/web/html/attributs_universels/contenteditable/index.html +++ b/files/fr/web/html/global_attributes/contenteditable/index.html diff --git a/files/fr/web/html/attributs_universels/contextmenu/index.html b/files/fr/web/html/global_attributes/contextmenu/index.html index 187be1f1cc..187be1f1cc 100644 --- a/files/fr/web/html/attributs_universels/contextmenu/index.html +++ b/files/fr/web/html/global_attributes/contextmenu/index.html diff --git a/files/fr/web/html/attributs_universels/data-_star_/index.html b/files/fr/web/html/global_attributes/data-_star_/index.html index d8befa7a2f..d8befa7a2f 100644 --- a/files/fr/web/html/attributs_universels/data-_star_/index.html +++ b/files/fr/web/html/global_attributes/data-_star_/index.html diff --git a/files/fr/web/html/attributs_universels/dir/index.html b/files/fr/web/html/global_attributes/dir/index.html index 5cf187f35e..5cf187f35e 100644 --- a/files/fr/web/html/attributs_universels/dir/index.html +++ b/files/fr/web/html/global_attributes/dir/index.html diff --git a/files/fr/web/html/attributs_universels/draggable/index.html b/files/fr/web/html/global_attributes/draggable/index.html index fe5d5cf514..fe5d5cf514 100644 --- a/files/fr/web/html/attributs_universels/draggable/index.html +++ b/files/fr/web/html/global_attributes/draggable/index.html diff --git a/files/fr/web/html/attributs_universels/hidden/index.html b/files/fr/web/html/global_attributes/hidden/index.html index c14d208620..c14d208620 100644 --- a/files/fr/web/html/attributs_universels/hidden/index.html +++ b/files/fr/web/html/global_attributes/hidden/index.html diff --git a/files/fr/web/html/attributs_universels/id/index.html b/files/fr/web/html/global_attributes/id/index.html index a08d5e0dce..a08d5e0dce 100644 --- a/files/fr/web/html/attributs_universels/id/index.html +++ b/files/fr/web/html/global_attributes/id/index.html diff --git a/files/fr/web/html/attributs_universels/index.html b/files/fr/web/html/global_attributes/index.html index 779e617a3d..779e617a3d 100644 --- a/files/fr/web/html/attributs_universels/index.html +++ b/files/fr/web/html/global_attributes/index.html diff --git a/files/fr/web/html/attributs_universels/inputmode/index.html b/files/fr/web/html/global_attributes/inputmode/index.html index 2babf82909..2babf82909 100644 --- a/files/fr/web/html/attributs_universels/inputmode/index.html +++ b/files/fr/web/html/global_attributes/inputmode/index.html diff --git a/files/fr/web/html/attributs_universels/is/index.html b/files/fr/web/html/global_attributes/is/index.html index e460ffc4a3..e460ffc4a3 100644 --- a/files/fr/web/html/attributs_universels/is/index.html +++ b/files/fr/web/html/global_attributes/is/index.html diff --git a/files/fr/web/html/attributs_universels/itemid/index.html b/files/fr/web/html/global_attributes/itemid/index.html index c592936a5d..c592936a5d 100644 --- a/files/fr/web/html/attributs_universels/itemid/index.html +++ b/files/fr/web/html/global_attributes/itemid/index.html diff --git a/files/fr/web/html/attributs_universels/itemprop/index.html b/files/fr/web/html/global_attributes/itemprop/index.html index 956054bb32..956054bb32 100644 --- a/files/fr/web/html/attributs_universels/itemprop/index.html +++ b/files/fr/web/html/global_attributes/itemprop/index.html diff --git a/files/fr/web/html/attributs_universels/itemref/index.html b/files/fr/web/html/global_attributes/itemref/index.html index 894df9c87c..894df9c87c 100644 --- a/files/fr/web/html/attributs_universels/itemref/index.html +++ b/files/fr/web/html/global_attributes/itemref/index.html diff --git a/files/fr/web/html/attributs_universels/itemscope/index.html b/files/fr/web/html/global_attributes/itemscope/index.html index 5e76969620..5e76969620 100644 --- a/files/fr/web/html/attributs_universels/itemscope/index.html +++ b/files/fr/web/html/global_attributes/itemscope/index.html diff --git a/files/fr/web/html/attributs_universels/itemtype/index.html b/files/fr/web/html/global_attributes/itemtype/index.html index 5d3ce08694..5d3ce08694 100644 --- a/files/fr/web/html/attributs_universels/itemtype/index.html +++ b/files/fr/web/html/global_attributes/itemtype/index.html diff --git a/files/fr/web/html/attributs_universels/lang/index.html b/files/fr/web/html/global_attributes/lang/index.html index 6a45c3ed2a..6a45c3ed2a 100644 --- a/files/fr/web/html/attributs_universels/lang/index.html +++ b/files/fr/web/html/global_attributes/lang/index.html diff --git a/files/fr/web/html/attributs_universels/slot/index.html b/files/fr/web/html/global_attributes/slot/index.html index c6b96098a0..c6b96098a0 100644 --- a/files/fr/web/html/attributs_universels/slot/index.html +++ b/files/fr/web/html/global_attributes/slot/index.html diff --git a/files/fr/web/html/attributs_universels/spellcheck/index.html b/files/fr/web/html/global_attributes/spellcheck/index.html index efc982d646..efc982d646 100644 --- a/files/fr/web/html/attributs_universels/spellcheck/index.html +++ b/files/fr/web/html/global_attributes/spellcheck/index.html diff --git a/files/fr/web/html/attributs_universels/style/index.html b/files/fr/web/html/global_attributes/style/index.html index 3da865a0e9..3da865a0e9 100644 --- a/files/fr/web/html/attributs_universels/style/index.html +++ b/files/fr/web/html/global_attributes/style/index.html diff --git a/files/fr/web/html/attributs_universels/tabindex/index.html b/files/fr/web/html/global_attributes/tabindex/index.html index 87aa27e5cc..87aa27e5cc 100644 --- a/files/fr/web/html/attributs_universels/tabindex/index.html +++ b/files/fr/web/html/global_attributes/tabindex/index.html diff --git a/files/fr/web/html/attributs_universels/title/index.html b/files/fr/web/html/global_attributes/title/index.html index 06f0feee8d..06f0feee8d 100644 --- a/files/fr/web/html/attributs_universels/title/index.html +++ b/files/fr/web/html/global_attributes/title/index.html diff --git a/files/fr/web/html/attributs_universels/translate/index.html b/files/fr/web/html/global_attributes/translate/index.html index 215800e5ff..215800e5ff 100644 --- a/files/fr/web/html/attributs_universels/translate/index.html +++ b/files/fr/web/html/global_attributes/translate/index.html diff --git a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html index f03780b703..f03780b703 100644 --- a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html +++ b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html diff --git a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html index f11309e1b5..f11309e1b5 100644 --- a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html +++ b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html diff --git a/files/fr/web/html/éléments_en_ligne/index.html b/files/fr/web/html/inline_elements/index.html index fb9207dd72..fb9207dd72 100644 --- a/files/fr/web/html/éléments_en_ligne/index.html +++ b/files/fr/web/html/inline_elements/index.html diff --git a/files/fr/web/html/types_de_lien/index.html b/files/fr/web/html/link_types/index.html index f8134a8fe7..f8134a8fe7 100644 --- a/files/fr/web/html/types_de_lien/index.html +++ b/files/fr/web/html/link_types/index.html diff --git a/files/fr/web/html/microdonnées/index.html b/files/fr/web/html/microdata/index.html index 66230edd72..66230edd72 100644 --- a/files/fr/web/html/microdonnées/index.html +++ b/files/fr/web/html/microdata/index.html diff --git a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index 15342d7577..0000000000 --- a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Optimisation des pages pour l'analyse spéculative -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -tags: - - Avancé - - Cookies - - Développement Web - - HTML - - HTML5 - - NeedsUpdate -translation_of: Glossary/speculative_parsing ---- -<p><span id="result_box" lang="fr"><span>Traditionnellement dans les navigateurs, l'analyseur HTML a été exécuté sur le fil principal et a été bloqué après une balise <code></script></code> jusqu'à ce que le script ait été extrait du réseau et exécuté.</span> <span>L'analyseur HTML dans Firefox 4 et versions ultérieures prend en charge l'analyse spéculative sur le fil principal.</span> <span>Il analyse "en avant" pendant que les scripts sont téléchargés et exécutés.</span> <span>Comme dans Firefox 3.5 et 3.6, l'analyseur HTML lance des chargements spéculatifs pour les scripts, les feuilles de style et les images qu'il trouve à l'avance dans le flux.</span> <span>Toutefois, dans Firefox 4 et versions ultérieures, l'analyseur HTML exécute également l'algorithme de construction de l'arborescence HTML de manière spéculative.</span> <span>L'avantage est que lorsqu'une spéculation réussit, il n'est pas nécessaire d'analyser la partie du fichier entrant qui a déjà été analysée pour les scripts, les feuilles de style et les images.</span> <span>L'inconvénient est qu'il y a plus de travail perdu quand la spéculation échoue.</span><br> - <br> - <span>Ce document vous aide à éviter le genre de choses qui font échouer la spéculation et ralentir le chargement de votre page.</span></span></p> - -<h2 id="Réussir_les_chargements_spéculatifs">Réussir les chargements spéculatifs</h2> - -<p><span id="result_box" lang="fr"><span>Il n'y a qu'une seule règle pour réussir les chargements spéculatifs de scripts liés, de feuilles de style et d'images :</span></span></p> - -<ul> - <li>Si vous utilisez un élément <code><base></code> p<span id="result_box" lang="fr"><span>our remplacer l'URI de base de votre page, placez l'élément dans la partie non-scriptée du document.</span></span> Ne l'ajoutez pas par <code>document.write()</code> ou <code>document.createElement()</code>.</li> -</ul> - -<h2 id="Éviter_de_perdre_la_sortie_du_constructeur_d'arborescence">Éviter de perdre la sortie du constructeur d'arborescence</h2> - -<p>L'analyse spéculative du constructeur d'arborescence échoue quand <code>document.write()</code> change l'état du constructeur d'arborescence, au point que l'état spéculatif après la balise <code></script></code> <span class="short_text" id="result_box" lang="fr"><span>ne tient plus lorsque tout le contenu inséré par</span></span> <code>document.write()</code> a été analysé. <span id="result_box" lang="fr"><span>Cependant, seules les utilisations inhabituelles de</span></span> <code>document.write()</code> entraînent ce genre de problèmes. Ici, les choses à éviter :</p> - -<ul> - <li><span class="short_text" id="result_box" lang="fr"><span>n'écrivez pas d'arborescences déséquilibrées.</span></span> <code><script>document.write("<div>");</script></code> est mauvais. <code><script>document.write("<div></div>");</script></code> est valide.</li> - <li>n'écrivez pas de balisage infini. <code><script>document.write("<div></div");</script></code> est mauvais.</li> - <li><span id="result_box" lang="fr"><span>ne terminez pas votre écriture avec un retour chariot</span></span> . <code><script>document.write("Hello World!\r");</script></code> est mauvais. <code><script>document.write("Hello World!\n");</script></code> est valide.</li> - <li><span id="result_box" lang="fr"><span>notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée</span></span>. Par exemple, <code><script>document.write("<div></div>");</script></code> <span id="result_box" lang="fr"><span>à l'intérieur de l'élément d'en-tête sera interprété comme</span></span> <code><script>document.write("</head><body><div></div>");</script></code> qui est déséquilibré.</li> - <li><span class="short_text" id="result_box" lang="fr"><span>ne pas formater une partie de tableau</span></span>. <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> est mauvais. Par contre, <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code> est valide.</li> - <li><span id="result_box" lang="fr"><span>À FAIRE : document.write inclus dans d'autres éléments de formatage.</span></span></li> -</ul> diff --git a/files/fr/web/html/précharger_du_contenu/index.html b/files/fr/web/html/preloading_content/index.html index 2519577b6c..2519577b6c 100644 --- a/files/fr/web/html/précharger_du_contenu/index.html +++ b/files/fr/web/html/preloading_content/index.html diff --git a/files/fr/web/html/utiliser_application_cache/index.html b/files/fr/web/html/using_the_application_cache/index.html index ccc78772a8..ccc78772a8 100644 --- a/files/fr/web/html/utiliser_application_cache/index.html +++ b/files/fr/web/html/using_the_application_cache/index.html diff --git a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html b/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html deleted file mode 100644 index efa30853e6..0000000000 --- a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Utilisation d'audio et video en HTML5 -slug: Web/HTML/Utilisation_d'audio_et_video_en_HTML5 -tags: - - Aperçu - - Featured - - Guide - - HTML - - HTML5 - - Media - - Web -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> - -<p>La gestion des éléments HTML 5 <a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a> et <a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a> a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.</p> - -<h2 id="Intégration_de_médias">Intégration de médias</h2> - -<p>Il est trivial d'intégrer des médias dans vos documents HTML :</p> - -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - Votre navigateur ne gère pas l'élément <code>video</code>. -</video> -</pre> - -<p>Cet exemple jouera une vidéo exemple du site web de Theora.</p> - -<p>Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément <a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a> afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4"> - Votre navigateur ne gère pas l'élément <code>video</code>. -</video> -</pre> - -<p>jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.</p> - -<p>Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions :</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;"> - Votre navigateur ne gère pas l'élément <code>video</code>. -</video></pre> - -<p>Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.</p> - -<p>Si l'attribut <code>type</code> n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément <code>source</code> suivant est vérifié. Si aucun des éléments <code>source</code> ne peut être utilisé, un évènement <code>error</code> est transmis à l'élément <code>video</code>. Si l'attribut <code>type</code> est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément <code>source</code> suivant.</p> - -<p> </p> - -<h2 id="Contrôle_de_la_lecture">Contrôle de la lecture</h2> - -<p>Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode <a class="external" href="/fr/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/fr/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> de l'élément, telle que définie dans l'interface {{ interface("nsIDOMHTMLMediaElement") }} utilisée pour implémenter les éléments de médias.</p> - -<h2 id="Évènements_des_médias">Évènements des médias</h2> - -<p>Différents évènements sont envoyés lors du traitement de médias :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Nom de l'évènement</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>abort</code></td> - <td>Envoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.</td> - </tr> - <tr> - <td><code>canplay</code></td> - <td>Envoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur <code>CAN_PLAY</code> de <code>readyState</code>.</td> - </tr> - <tr> - <td><code>canplaythrough</code></td> - <td>Envoyé lorsque l'état devient <code>CAN_PLAY_THROUGH</code>, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.</td> - </tr> - <tr> - <td><code>canshowcurrentframe</code></td> - <td>L'image courante est chargée et peut être présentée. Ceci correspond à la valeur <code>CAN_SHOW_CURRENT_FRAME</code> de <code>readyState</code>.</td> - </tr> - <tr> - <td><code>dataunavailable</code></td> - <td>Envoyé lorsque l'état devient <code>DATA_UNAVAILABLE</code>.</td> - </tr> - <tr> - <td><code>durationchange</code></td> - <td>Les métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.</td> - </tr> - <tr> - <td><code>emptied</code></td> - <td>Le média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode <a class="internal" href="/fr/nsIDOMMediaHTMLElement#load()" title="fr/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> pour le recharger.</td> - </tr> - <tr> - <td><code>empty</code></td> - <td>Envoyé lorsqu'une erreur survient et que le média est vide.</td> - </tr> - <tr> - <td><code>ended</code></td> - <td>Envoyé lorsque la lecture se termine.</td> - </tr> - <tr> - <td><code>error</code></td> - <td>Envoyé lorsqu'une erreur se produit. L'attribut <code>error</code> de l'élément contient plus d'informations.</td> - </tr> - <tr> - <td><code>loadedfirstframe</code></td> - <td>La première image du média a été chargée.</td> - </tr> - <tr> - <td><code>loadedmetadata</code></td> - <td>Les métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.</td> - </tr> - <tr> - <td><code>loadstart</code></td> - <td>Envoyé lorsque le chargement du média débute.</td> - </tr> - <tr> - <td><code>pause</code></td> - <td>Envoyé lorsque la lecture est interrompue.</td> - </tr> - <tr> - <td><code>play</code></td> - <td>Envoyé lorsque la lecture débute ou reprend.</td> - </tr> - <tr> - <td><code>progress</code></td> - <td> - <p>Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :</p> - - <dl> - <dt><code>lengthComputable</code></dt> - <dd>vaut <code>true</code> si la taille totale du média est connue, <code>false</code> sinon.</dd> - <dt><code>loaded</code></dt> - <dd>Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.</dd> - <dt><code>total</code></dt> - <dd>Le nombre total d'octets dans le fichier de média.</dd> - </dl> - </td> - </tr> - <tr> - <td><code>ratechange</code></td> - <td>Envoyé lorsque la vitesse de lecture change.</td> - </tr> - <tr> - <td><code>seeked</code></td> - <td>Envoyé lorsqu'une opération de positionnement est effectuée.</td> - </tr> - <tr> - <td><code>seeking</code></td> - <td>Envoyé lorsqu'une opération de positionnement débute.</td> - </tr> - <tr> - <td><code>suspend</code> {{ gecko_minversion_inline("1.9.2") }}</td> - <td>Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.</td> - </tr> - <tr> - <td><code>timeupdate</code></td> - <td>Le temps indiqué par l'attribut <code>currentTime</code> de l'élément a été modifié.</td> - </tr> - <tr> - <td><code>volumechange</code></td> - <td>Envoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut <code>muted</code>).</td> - </tr> - <tr> - <td><code>waiting</code></td> - <td>Envoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).</td> - </tr> - </tbody> -</table> - -<p>{{ gecko_minversion_note("1.9.2", "L'ancien évènement <code>load</code> a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.") }}</p> - -<p>Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :</p> - -<pre>var v = document.getElementsByTagName("video")[0]; - -v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); -v.currentTime = 10.0; -</pre> - -<p>Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode <code>play()</code> de l'élément, qui lance la lecture.</p> - -<p>Ensuite, à la ligne 4, cet exemple positionne l'attribut <code>currentTime</code> de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement <code>seeking</code> au début de l'opération, ensuite d'un évènement <code>seeked</code> lorsque le positionnement est terminé.</p> - -<p>Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.</p> - -<h2 id="Options_de_rechange">Options de rechange</h2> - -<p>Le code HTML fourni entre les balises, par exemple <code><video></code> et <code></video></code>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.</p> - -<p>Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.</p> - -<h3 id="Utilisation_de_Flash">Utilisation de Flash</h3> - -<p>Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément <code>video</code> n'est pas géré :</p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video> -</pre> - -<p>Notez qu'il ne faut pas mettre d'attribut <code>classid</code> à la balise <code>object</code> afin de rester compatible avec les autres navigateurs qu'Internet Explorer.</p> - -<h3 id="Lecture_de_vidéos_Ogg_dans_une_applet_Java">Lecture de vidéos Ogg dans une applet Java</h3> - -<p>Une applet Java appelée <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :</p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" - width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video> -</pre> - -<p>Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément <p> dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.</p> - -<h2 id="Voir_également">Voir également</h2> - -<ul> - <li><a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a></li> - <li><a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a></li> - <li><a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a></li> - <li><a class="internal" href="/fr/Manipulation_de_vidéos_avec_canvas" title="fr/Manipulation de vidéos avec canvas"><code>Manipulation de vidéos avec canvas</code></a></li> - <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> - <li><a class="internal" href="/fr/docs/Web/HTML/formats_media_support" title="fr/Formats de médias gérés par les éléments audio et video"><code>Formats de médias gérés par les éléments audio et video</code></a></li> -</ul> - -<p> {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}</p> - -<p> {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}</p> diff --git a/files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html b/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html index fe94d1e4c9..fe94d1e4c9 100644 --- a/files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html +++ b/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html diff --git a/files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html b/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html index 0265a81829..0265a81829 100644 --- a/files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html +++ b/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html diff --git a/files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html b/files/fr/web/http/basics_of_http/resource_urls/index.html index 4f38214e57..4f38214e57 100644 --- a/files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html +++ b/files/fr/web/http/basics_of_http/resource_urls/index.html diff --git a/files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html b/files/fr/web/http/browser_detection_using_the_user_agent/index.html index bd7a98de65..bd7a98de65 100644 --- a/files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html +++ b/files/fr/web/http/browser_detection_using_the_user_agent/index.html diff --git a/files/fr/web/http/cache/index.html b/files/fr/web/http/caching/index.html index d29e51d434..d29e51d434 100644 --- a/files/fr/web/http/cache/index.html +++ b/files/fr/web/http/caching/index.html diff --git a/files/fr/web/http/requêtes_conditionnelles/index.html b/files/fr/web/http/conditional_requests/index.html index 922b07a2fd..922b07a2fd 100644 --- a/files/fr/web/http/requêtes_conditionnelles/index.html +++ b/files/fr/web/http/conditional_requests/index.html diff --git a/files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html index fcaedad211..fcaedad211 100644 --- a/files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html +++ b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html diff --git a/files/fr/web/http/cors/errors/corsnapasréussi/index.html b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html index 72a1788f81..72a1788f81 100644 --- a/files/fr/web/http/cors/errors/corsnapasréussi/index.html +++ b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html diff --git a/files/fr/web/http/cors/errors/corsdesactive/index.html b/files/fr/web/http/cors/errors/corsdisabled/index.html index d24896db89..d24896db89 100644 --- a/files/fr/web/http/cors/errors/corsdesactive/index.html +++ b/files/fr/web/http/cors/errors/corsdisabled/index.html diff --git a/files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html index d18a0d1565..d18a0d1565 100644 --- a/files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html +++ b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html diff --git a/files/fr/web/http/headers/serveur/index.html b/files/fr/web/http/headers/server/index.html index d5712fc7ac..d5712fc7ac 100644 --- a/files/fr/web/http/headers/serveur/index.html +++ b/files/fr/web/http/headers/server/index.html diff --git a/files/fr/web/http/faq_sur_le_préchargement_des_liens/index.html b/files/fr/web/http/link_prefetching_faq/index.html index c401133b7f..c401133b7f 100644 --- a/files/fr/web/http/faq_sur_le_préchargement_des_liens/index.html +++ b/files/fr/web/http/link_prefetching_faq/index.html diff --git a/files/fr/web/http/méthode/connect/index.html b/files/fr/web/http/methods/connect/index.html index 62b1ee7d6c..62b1ee7d6c 100644 --- a/files/fr/web/http/méthode/connect/index.html +++ b/files/fr/web/http/methods/connect/index.html diff --git a/files/fr/web/http/méthode/delete/index.html b/files/fr/web/http/methods/delete/index.html index d2a40a8ea9..d2a40a8ea9 100644 --- a/files/fr/web/http/méthode/delete/index.html +++ b/files/fr/web/http/methods/delete/index.html diff --git a/files/fr/web/http/méthode/get/index.html b/files/fr/web/http/methods/get/index.html index 008f479d98..008f479d98 100644 --- a/files/fr/web/http/méthode/get/index.html +++ b/files/fr/web/http/methods/get/index.html diff --git a/files/fr/web/http/méthode/head/index.html b/files/fr/web/http/methods/head/index.html index f89bbdde39..f89bbdde39 100644 --- a/files/fr/web/http/méthode/head/index.html +++ b/files/fr/web/http/methods/head/index.html diff --git a/files/fr/web/http/méthode/index.html b/files/fr/web/http/methods/index.html index 25ae456c7c..25ae456c7c 100644 --- a/files/fr/web/http/méthode/index.html +++ b/files/fr/web/http/methods/index.html diff --git a/files/fr/web/http/méthode/options/index.html b/files/fr/web/http/methods/options/index.html index ccdd97ef59..ccdd97ef59 100644 --- a/files/fr/web/http/méthode/options/index.html +++ b/files/fr/web/http/methods/options/index.html diff --git a/files/fr/web/http/méthode/patch/index.html b/files/fr/web/http/methods/patch/index.html index aca3dfe6d4..aca3dfe6d4 100644 --- a/files/fr/web/http/méthode/patch/index.html +++ b/files/fr/web/http/methods/patch/index.html diff --git a/files/fr/web/http/méthode/post/index.html b/files/fr/web/http/methods/post/index.html index e534246de7..e534246de7 100644 --- a/files/fr/web/http/méthode/post/index.html +++ b/files/fr/web/http/methods/post/index.html diff --git a/files/fr/web/http/méthode/put/index.html b/files/fr/web/http/methods/put/index.html index d6e7dbeeb7..d6e7dbeeb7 100644 --- a/files/fr/web/http/méthode/put/index.html +++ b/files/fr/web/http/methods/put/index.html diff --git a/files/fr/web/http/méthode/trace/index.html b/files/fr/web/http/methods/trace/index.html index cc58e561ca..cc58e561ca 100644 --- a/files/fr/web/http/méthode/trace/index.html +++ b/files/fr/web/http/methods/trace/index.html diff --git a/files/fr/web/http/aperçu/index.html b/files/fr/web/http/overview/index.html index 33d2758ec2..33d2758ec2 100644 --- a/files/fr/web/http/aperçu/index.html +++ b/files/fr/web/http/overview/index.html diff --git a/files/fr/web/security/public_key_pinning/index.html b/files/fr/web/http/public_key_pinning/index.html index 287455b2e0..287455b2e0 100644 --- a/files/fr/web/security/public_key_pinning/index.html +++ b/files/fr/web/http/public_key_pinning/index.html diff --git a/files/fr/web/javascript/une_réintroduction_à_javascript/index.html b/files/fr/web/javascript/a_re-introduction_to_javascript/index.html index fd730c44fd..fd730c44fd 100644 --- a/files/fr/web/javascript/une_réintroduction_à_javascript/index.html +++ b/files/fr/web/javascript/a_re-introduction_to_javascript/index.html diff --git a/files/fr/web/javascript/a_propos/index.html b/files/fr/web/javascript/about_javascript/index.html index aeb4c07c17..aeb4c07c17 100644 --- a/files/fr/web/javascript/a_propos/index.html +++ b/files/fr/web/javascript/about_javascript/index.html diff --git a/files/fr/web/javascript/structures_de_données/index.html b/files/fr/web/javascript/data_structures/index.html index 1b605a9fc7..1b605a9fc7 100644 --- a/files/fr/web/javascript/structures_de_données/index.html +++ b/files/fr/web/javascript/data_structures/index.html diff --git a/files/fr/web/javascript/caractère_énumérable_des_propriétés_et_rattachement/index.html b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html index a4d1574b35..a4d1574b35 100644 --- a/files/fr/web/javascript/caractère_énumérable_des_propriétés_et_rattachement/index.html +++ b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html diff --git a/files/fr/web/javascript/les_différents_tests_d_égalité/index.html b/files/fr/web/javascript/equality_comparisons_and_sameness/index.html index 3208ebe8bc..3208ebe8bc 100644 --- a/files/fr/web/javascript/les_différents_tests_d_égalité/index.html +++ b/files/fr/web/javascript/equality_comparisons_and_sameness/index.html diff --git a/files/fr/web/javascript/concurrence_et_boucle_des_événements/index.html b/files/fr/web/javascript/eventloop/index.html index 9924edecec..9924edecec 100644 --- a/files/fr/web/javascript/concurrence_et_boucle_des_événements/index.html +++ b/files/fr/web/javascript/eventloop/index.html diff --git a/files/fr/web/javascript/guide/apropos/index.html b/files/fr/web/javascript/guide/apropos/index.html deleted file mode 100644 index d9e7239070..0000000000 --- a/files/fr/web/javascript/guide/apropos/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: A propos de ce guide -slug: Web/JavaScript/Guide/Apropos -tags: - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/About ---- -<p>{{jsSidebar("JavaScript Guide")}}</p> - -<p>JavaScript est un langage de script orienté objet et indépendant de la plateforme. Ce guide explique tout ce que vous devriez savoir pour utiliser JavaScript.</p> - -<h2 id="Nouvelles_fonctionalités_selon_les_versions_de_JavaScript">Nouvelles fonctionalités selon les versions de JavaScript</h2> - -<p></p><ul> -<li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.2">Nouveautés de JavaScript 1.2</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.3">Nouveautés de JavaScript 1.3</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.4">Nouveautés de JavaScript 1.4</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.5">Nouveautés de JavaScript 1.5</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.6">Nouveautés dans JavaScript 1.6</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.7">Nouveautés dans JavaScript 1.7</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8">Nouveautés dans JavaScript 1.8</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8.1">Nouveautés de JavaScript 1.8.1</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8.5">Nouveautés de JavaScript 1.8.5</a></li> -</ul><p></p> - -<h2 id="Ce_que_vous_devriez_déjà_connaître">Ce que vous devriez déjà connaître</h2> - -<p>Ce guide présuppose que vous possédez déjà les connaissances suivantes :</p> - -<ul> - <li>Une compréhension générale d'Internet et du World Wide Web (WWW).</li> - <li>De bonnes connaissances pratiques du langage <a href="/fr/docs/Web/HTML" title="en/HTML">HTML</a> (HyperText Markup Language).</li> - <li>Une expérience avec un langage de programmation est utile, mais n'est pas indispensable. Si vous débutez en programmation, vous pouvez essayer de suivre un des tutoriel de la page <a href="/fr/docs/Web/JavaScript">JavaScript</a></li> -</ul> - -<h2 id="Versions_de_JavaScript">Versions de JavaScript</h2> - -<table class="standard-table"> - <caption>Tableau des versions de JavaScript et des navigateurs correspondants</caption> - <thead> - <tr> - <th scope="col">Version JavaScript</th> - <th scope="col">Version du navigateur</th> - </tr> - </thead> - <tbody> - <tr> - <td>JavaScript 1.0</td> - <td>Navigator 2.0</td> - </tr> - <tr> - <td>JavaScript 1.1</td> - <td>Navigator 3.0</td> - </tr> - <tr> - <td>JavaScript 1.2</td> - <td>Navigator 4.0-4.05</td> - </tr> - <tr> - <td>JavaScript 1.3</td> - <td>Navigator 4.06-4.7x</td> - </tr> - <tr> - <td>JavaScript 1.4</td> - <td> </td> - </tr> - <tr> - <td>JavaScript 1.5</td> - <td>Navigator 6.0<br> - Mozilla (open source browser)</td> - </tr> - <tr> - <td>JavaScript 1.6</td> - <td><a href="/fr/Firefox/Versions/1.5">Firefox 1.5</a> et les autres produits Mozilla basés sur Gecko 1.8</td> - </tr> - <tr> - <td>JavaScript 1.7</td> - <td><a href="/fr/Firefox/Versions/2">Firefox 2</a> et les autres produits Mozilla basés sur Gecko 1.8</td> - </tr> - <tr> - <td>JavaScript 1.8</td> - <td><a href="/fr/Firefox/Versions/3">Firefox 3</a> et les autres produits Mozilla basés sur Gecko 1.9</td> - </tr> - </tbody> -</table> - -<h2 id="Où_trouver_de_l'information_sur_JavaScript">Où trouver de l'information sur JavaScript</h2> - -<p>La documentation JavaScript se trouve dans les ouvrages suivants:</p> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> (ce guide) qui fournit l'information de base sur le langage JavaScript et ses composantes.</li> - <li><a href="/fr/docs/JavaScript/Reference">La référence JavaScript</a> qui est le document de référence du langage JavaScript.</li> - <li><a href="http://fr.eloquentjavascript.net/">javaScript éloquent</a> est un guide d'initiation progressive avec des exercices interactifs.</li> -</ul> - -<p>Si vous découvrez JavaScript, commencez par <a href="/fr/docs/Web/JavaScript/Guide">le guide JavaScript</a>. Une fois familiarisé avec les fondamentaux, vous pourrez utiliser <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a> pour plus de détails sur les objets et les instructions.</p> - -<h2 id="Astuces_pour_l'apprentissage_du_JavaScript">Astuces pour l'apprentissage du JavaScript</h2> - -<p>Commencer l'apprentissage de JavaScript est assez simple : tout ce dont vous avez besoin c'est d'un navigateur Web récent. Ce guide intègre quelques fonctions JavaScript qui ne sont disponibles qu'avec les dernières versions de Firefox (et/ou les autres navigateurs basés sur le moteur Gecko), aussi est-il recommandé d'utiliser la version la plus récente de Firefox.</p> - -<p>Deux outils utiles sont nativement intégrés à Firefox et permettent de manipuler du JavaScript : la console web et l'ardoise JavaScript.</p> - -<h3 id="La_console_web">La console web</h3> - -<p>La <a href="/fr/docs/Outils/Web_Console">console web</a> permet d'afficher des informations sur la page web chargée dans le navigateur. Elle possède également <a href="/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande">une ligne de commande</a> qui permet d'exécuter des expressions JavaScript dans la page courante.</p> - -<p>Pour ouvrir la console web, aller dans le menu « Outils » puis « Développement web » puis « Console web ». La console apparaîtra en base de la fenêtre du navigateur. En bas de cette console se situe une ligne de commande qui peut être utilisée pour saisir du JavaScript :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="L'ardoise_JavaScript">L'ardoise JavaScript</h3> - -<p>La console web permet d'exécuter des lignes de JavaScript une à une. Dès qu'on souhaite exécuter plusieurs lignes, la console n'est plus très pratique. De plus, il est impossible d'enregistrer du code grâce à la console web. Pour mettre en place des exemples plus complexes, l'<a href="/fr/docs/Outils/Ardoise">ardoise JavaScript</a> sera plus adaptée.</p> - -<p>Pour ouvrir l'ardoise, aller dans le menu « Outils » puis « Développement web » puis « Ardoise JavaScript ». Elle s'ouvre dans une fenêtre séparée et contient un éditeur qui permet d'écrire et d'exécuter du JavaScript dans le navigateur. Elle permet également de sauvegarder/charger des scripts sur votre ordinateur</p> - -<p>Si vous utiliser l'option aller dans le menu « Examiner », le code contenu dans l'ardoise sera exécuter dans le navigateur et le résultat sera renvoyé dans l'éditeur sous forme d'un commentaire :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h2 id="Conventions">Conventions</h2> - -<p>Les applications JavaScript fonctionnent sur de nombreux systèmes d'exploitations. Les informations de ce guide doivent s'appliquer à l'ensemble des systèmes sur lesquels fonctionne JavaScript.</p> - -<p>Ce guide utilise des URL de la forme suivante :</p> - -<p><code>http://<em>serveur</em>.<em>domaine</em>/<em>chemin</em>/<em>fichier</em>.html</code></p> - -<p>Dans ces URL, <em>serveur</em> représente le nom du serveur à partir duquel on lance l'application ; <em>domaine</em> représente le nom de domaine utilisé (par exemple <code>netscape.com</code> ou <code>uiuc.edu</code>) ; <em>chemin</em> représente l'arborescence du serveur et <em>fichier</em><code>.html</code> représente un fichier dans cette arborescence. Généralement, les éléments représentés en italique dans l'URL seront des paramètres et les éléments représentés en police à chasse fixe seront à prendre au sens littéral. Si votre serveur permet d'utiliser SSL/TLS, vous pourrez utiliser <code>https</code> à la place de <code>http</code>.</p> - -<p>Ce guide utilise les conventions de typographie suivantes :</p> - -<ul> - <li><code>La police à chasse fixe</code> est utilisée pour les exemples de code, les éléments de code (mots-clés, noms de méthodes et de propriétés), les noms de fichiers, les chemins vers les fichiers, les noms de répertoires, les balises HTML ainsi que tout texte devant être saisi à l'écran (<code><em>La police à chasse fixe italique</em></code> est utilisée pour les paramètres dans le code.)</li> - <li><em>L'italique</em> est utilisé pour les titres d'œuvres, l'accentuation, les variables et les paramètres ainsi que les termes à utiliser littéralement.</li> - <li><strong>Le gras</strong> est utilisé pour les termes du glossaire.</li> -</ul> - -<div> -<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/Web/JavaScript/Guide" title="JavaScript Guide">« Précédent</a></span><a href="/fr/docs/JavaScript/Guide/JavaScript_Overview" title="JavaScript Overview">Suivant »</a></p> -</div> - -<p> </p> diff --git a/files/fr/web/javascript/guide/contrôle_du_flux_gestion_des_erreurs/index.html b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.html index a267ed8c97..a267ed8c97 100644 --- a/files/fr/web/javascript/guide/contrôle_du_flux_gestion_des_erreurs/index.html +++ b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.html diff --git a/files/fr/web/javascript/guide/le_modèle_objet_javascript_en_détails/index.html b/files/fr/web/javascript/guide/details_of_the_object_model/index.html index 50a78fdf27..50a78fdf27 100644 --- a/files/fr/web/javascript/guide/le_modèle_objet_javascript_en_détails/index.html +++ b/files/fr/web/javascript/guide/details_of_the_object_model/index.html diff --git a/files/fr/web/javascript/guide/expressions_et_opérateurs/index.html b/files/fr/web/javascript/guide/expressions_and_operators/index.html index fc922c49ce..fc922c49ce 100644 --- a/files/fr/web/javascript/guide/expressions_et_opérateurs/index.html +++ b/files/fr/web/javascript/guide/expressions_and_operators/index.html diff --git a/files/fr/web/javascript/guide/expressions_régulières/limites/index.html b/files/fr/web/javascript/guide/expressions_régulières/limites/index.html deleted file mode 100644 index f56d56a399..0000000000 --- a/files/fr/web/javascript/guide/expressions_régulières/limites/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Limites -slug: Web/JavaScript/Guide/Expressions_régulières/Limites -tags: - - Guide - - JavaScript - - Limites - - RegExp -translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions -translation_of_original: Web/JavaScript/Guide/Regular_Expressions/Boundaries ---- -<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> - -<p>Les limites permettent d'indiquer les débuts et fins des lignes et des mots.</p> - -<h2 id="Types">Types</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Caractères</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>^</code></td> - <td> - <p>Correspond au début la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut <code>true</code>, il correspondra également immédiatement après un caractère de saut de ligne.<br> - <br> - Ainsi, <code>/^A/</code> ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".<br> - <br> - Le caractère '<code>^</code>' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les <a href="#special-negated-character-set">compléments sur les ensembles de caractères </a>pour plus de détails et d'exemples.</p> - </td> - </tr> - <tr> - <td><code>$</code></td> - <td> - <p>Correspond à la fin de la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.</p> - - <p>Ainsi, <code>/t$/</code> ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".</p> - </td> - </tr> - <tr> - <td><code>\b</code></td> - <td> - <p>Correspond à la position d'uneAfter the <em>limite de mot</em>. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec <code>[\b]</code>.)</p> - - <p>Exemples :<br> - <code>/\bm/</code> correspond au 'm' dans "mignon" ;<br> - <code>/no\b/</code> ne correspond pas au 'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;<br> - <code>/non\b/</code> correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.<br> - <code>/\w\b\w/</code> ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.</p> - - <div class="note"> - <p><strong>Note :</strong> Le moteur d'expressions rationnelles JavaScript définit <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">un ensemble de caractères spécifiques</a> qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (<em>underscore</em>). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.</p> - </div> - </td> - </tr> - <tr> - <td><code>\B</code></td> - <td> - <p>Correspond à une "non-<em>limite de mot</em>". Cela correspond pour les cas suivants :</p> - - <ul> - <li>Avant le premier caractère d'une chaîne de caractères</li> - <li>Après le dernier caractère d'une chaîne de caractères</li> - <li>Entre deux caractères de mot</li> - <li>Entre deux caractères qui ne sont pas des caractères de mot</li> - <li>Avec la chaîne vide.</li> - </ul> - - <p>Ainsi, <code>/\B../</code> correspond au 'oo' de "football" (et <code>/e\B./</code> correspond au 'er' dans "une mer "</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Cibler_le_début_d'un_champ_grâce_au_caractère_de_contrôle">Cibler le début d'un champ grâce au caractère de contrôle <code>^</code></h3> - -<p>On utilisera le caractère spécial <code>^</code> afin de cibler le début d'un mot. Dans cet exemple, on filtre les fruits qui commencent par A grâce à l'expression rationnelle <code> /^A/</code>.</p> - -<pre class="brush: js">let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"]; - -let fruitsDebutantParA = fruits.filter(fruit => /^A/.test(fruit)); -console.table(fruitsDebutantsParA); // [ 'Ananas', 'Abricot' ]</pre> - -<p>Dans ce deuxième exemple, on utilise <code>^</code> à la fois pour indiquer le début du mot et pour indiquer un groupe complémentaire pour ne sélectionner que les fruits dont le nom ne commence pas par A.</p> - -<pre class="brush: js">let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"]; - -let fruitsNeDebutantPasParA = fruits.filter(fruit => /^[^A]/.test(fruit)); -console.table(fruitsNeDebutantPasParA); // [ 'Melon', 'Orange', 'Pomme' ]] -</pre> diff --git a/files/fr/web/javascript/guide/fonctions/index.html b/files/fr/web/javascript/guide/functions/index.html index 68c87566ff..68c87566ff 100644 --- a/files/fr/web/javascript/guide/fonctions/index.html +++ b/files/fr/web/javascript/guide/functions/index.html diff --git a/files/fr/web/javascript/guide/types_et_grammaire/index.html b/files/fr/web/javascript/guide/grammar_and_types/index.html index e2c51c9cc3..e2c51c9cc3 100644 --- a/files/fr/web/javascript/guide/types_et_grammaire/index.html +++ b/files/fr/web/javascript/guide/grammar_and_types/index.html diff --git a/files/fr/web/javascript/guide/collections_indexées/index.html b/files/fr/web/javascript/guide/indexed_collections/index.html index 7efda85419..7efda85419 100644 --- a/files/fr/web/javascript/guide/collections_indexées/index.html +++ b/files/fr/web/javascript/guide/indexed_collections/index.html diff --git a/files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html b/files/fr/web/javascript/guide/iterators_and_generators/index.html index d714b614cf..d714b614cf 100644 --- a/files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html +++ b/files/fr/web/javascript/guide/iterators_and_generators/index.html diff --git a/files/fr/web/javascript/guide/javascript_overview/index.html b/files/fr/web/javascript/guide/javascript_overview/index.html deleted file mode 100644 index a5ec22c993..0000000000 --- a/files/fr/web/javascript/guide/javascript_overview/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Aperçu de JavaScript -slug: Web/JavaScript/Guide/JavaScript_Overview -tags: - - Guide - - Intermediate - - JavaScript -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/JavaScript_Overview ---- -<p>{{jsSidebar("JavaScript Guide")}}</p> -<p>Ce chapitre est une introduction à JavaScript et détaille quelques-uns des concepts fondamentaux de ce langage.</p> -<h2 id="Qu'est-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2> -<p>JavaScript est un langage de script, multi-plateforme, orienté-objet. JavaScript est un langage compact, léger. Il n'est pas conçu pour être utilisé de manière autonome, mais pour être intégré dans d'autres produits et applications tels que les navigateurs web. Dans un environnement hôte, JavaScript peut servir d'interface de manipulation avec les objets mis à disposition par l'environnement.</p> -<p>Le noyau du langage JavaScript contient un ensemble d'objets, tels que <code>Array</code>, <code>Date</code>, et <code>Math</code>, et un noyau d'éléments comme les opérateurs, structures de contrôle et déclarations. Le c<span>œ</span>ur de JavaScript peut être étendu pour remplir différents besoins grâce à des objets additionnels. Par exemple :</p> -<ul> - <li>Le JavaScript, côté client, étend le noyau du langage en y ajoutant des objets pour contrôler le navigateur et son Document Object Model (DOM). Les extensions côté client permettent par exemple à une application de placer des éléments dans un formulaire HTML et de répondre à des événements tels que le clic de la souris, une entrée dans un formulaire ou la navigation dans une page.</li> - <li>Le JavaScript, côté serveur, étend le noyau du langage en y ajoutant des objets nécessaires pour faire fonctionner JavaScript sur un serveur. Par exemple, les extensions côté serveur permettent à une application de communiquer avec une base de données relationnelle, d'offrir des informations continues au fur et à mesure des appels, ou encore d'effectuer des manipulations de fichiers sur le serveur.</li> -</ul> -<p>Grâce à la fonctionnalité LiveConnect, JavaScript peut faire communiquer du code Java avec JavaScript. À partir de JavaScript, on peut instancier des objets Java et accéder à leurs méthodes publiques et attributs. À partir de Java, on peut accéder des objets, propriétés et méthodes JavaScript.</p> -<p>Netscape inventa JavaScript et fut le premier navigateur à l'utiliser.</p> -<h2 id="JavaScript_et_Java">JavaScript et Java</h2> -<p>JavaScript et Java sont semblables en ce qui concerne quelques aspects mais restent fondamentalement différents. JavaScript ressemble à Java, mais il ne possède pas un typage fort et statique. JavaScript suit la syntaxe de la plupart des expressions Java, les conventions de nommage et les structures de flots de contrôle basiques. C'est pour cette raison qu'il a été renommé de LiveScript en JavaScript.</p> -<p>En contraste avec le système <em>compile-time</em> des classes construites par des déclarations, JavaScript supporte les systèmes <em>runtime </em>basés sur un petit nombre de types de données représentant des valeurs numériques, booléennes et des chaines de caractères. JavaScript possède un modèle objet basé sur des prototypes au lieu du modèle objet traditionnel. Le modèle basé sur le prototype offre un héritage dynamique. Cela signifie que ce qui est hérité peut varier selon les objets. JavaScript supporte aussi l'écriture de fonctions sans qu'il y ait besoin de déclarations spéciales. Les fonctions peuvent être des propriétés d'objets, exécutées comme des méthodes avec un typage souple.</p> -<p>JavaScript est un langage beaucoup plus souple que Java. Il n'est pas nécessaire de déclarer toutes les variables, classes, et méthodes. Il n'y a pas à se soucier qu'une méthode soit publique, privée ou protégée, il n'y a pas à implémenter d'interfaces. Les variables, paramètres et types de retour des fonctions ne sont pas explicitement typés.</p> -<p>Java est un langage de programmation basé sur les classes conçues pour une exécution rapide et un typage sûr. La sûreté du typage signifie qu'on ne peut pas transformer un entier en Java en une référence vers un objet ni accéder à la mémoire privée via une corruption du bytecode Java. Le modèle de Java, basé sur les classes, signifie que les programmes se composent exclusivement de classes et de leurs méthodes. L'héritage des classes en Java ainsi que le typage fort exigent généralement une hiérarchie d'objets étroitement couplée. Ces exigences font que la programmation en Java peut s'avérer plus complexe que JavaScript.<br> - <br> - En revanche, JavaScript vient d'une lignée de langages plus légers, dynamiquement typés comme HyperTalk et dBASE. Ces langages de script offrent des outils de programmation à un public beaucoup plus large en raison de leur syntaxe plus facile, des fonctionnalités spécialisées intégrées et des exigences minimales pour la création d'objets.</p> -<p>Table 1.1 Comparaison entre JavaScript et Java</p> -<table class="standard-table"> - <caption> - Tableau 1.1 Comparaison entre JavaScript et Java</caption> - <thead> - <tr> - <th scope="col">JavaScript</th> - <th scope="col">Java</th> - </tr> - </thead> - <tbody> - <tr> - <td>Orienté objet. Pas de distinction entre les types d'objets. L'héritage se fait à travers le mécanisme de prototype et les propriétés et méthodes peuvent être ajoutées à n'importe quel objet dynamique.</td> - <td>Basé sur classes. Les objets sont divisés en classes et instances avec une hiérarchie d'héritage. Les classes et les instances ne peuvent pas avoir des propriétés ou des méthodes ajoutées dynamiquement.</td> - </tr> - <tr> - <td>Les types des variables ne sont pas déclarés (typage dynamique).</td> - <td>Les types des variables doivent être déclarés (typage statique).</td> - </tr> - <tr> - <td>On ne peut pas écrire automatiquement sur le disque dur.</td> - <td>On ne peut pas écrire automatiquement sur le disque dur.</td> - </tr> - </tbody> -</table> -<p>Pour plus d'informations sur la différence entre JavaScript et Java, voir les détails au chapitre du <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">modèle objet</a> de JavaScript.</p> -<h2 id="JavaScript_et_la_spécification_ECMAScript">JavaScript et la spécification ECMAScript</h2> -<p>Netscape a inventé JavaScript et JavaScript a d'abord été utilisé dans les navigateurs Netscape. Cependant, Netscape travailla avec <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">Ecma International </a>- l'association européenne pour la normalisation des systèmes d'information et de communication (ECMA était autrefois un acronyme pour European Computer Manufacturers Association), afin de fournir un standard et un langage de programmation international basée sur le noyau JavaScript. Cette version standardisée de JavaScript, appelée ECMAScript, se comporte de la même façon dans toutes les applications qui prennent en charge la norme. Les entreprises peuvent utiliser le langage standard ouvert pour développer leur implémentation de JavaScript. La norme ECMAScript est documentée dans la spécification ECMA-262.<br> - <br> - La norme ECMA-262 est également approuvée par <a href="http://www.iso.org/iso/home.html" title="http://www.iso.org/iso/home.html">l'ISO</a> (Organisation internationale de normalisation) en tant que norme ISO-16262. Vous pouvez trouver <a href="http://www-archive.mozilla.org/js/language/E262-3.pdf" title="http://www-archive.mozilla.org/js/language/E262-3.pdf">une version PDF de la norme ECMA-262</a> (version obsolète) sur le site de Mozilla. Vous pouvez également trouver les spécifications sur <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">le site de l'Ecma International</a>. La spécification ECMAScript ne décrit pas le Document Object Model (DOM), qui est standardisé par le <a href="http://www.w3.org/" title="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. Le DOM définit la manière dont les objets des documents HTML sont exposés à votre script.</p> -<h3 id="Relation_entre_les_versions_de_JavaScript_et_les_éditions_d'ECMAScript">Relation entre les versions de JavaScript et les éditions d'ECMAScript</h3> -<p>Netscape a travaillé en étroite collaboration avec Ecma International afin de produire la spécification ECMAScript (ECMA-262). Le tableau suivant décrit la relation entre les versions de JavaScript et les éditions d'ECMAScript.</p> -<table class="standard-table"> - <caption> - Tableau 1.2 Les versions de JavaScript et les liens avec les versions ECMAScript</caption> - <thead> - <tr> - <th scope="col">Version de JavaScript</th> - <th scope="col">Lien avec l'édition d'ECMAScript</th> - </tr> - </thead> - <tbody> - <tr> - <td>JavaScript 1.1</td> - <td>ECMA-262, Édition 1 basée sur JavaScript 1.1.</td> - </tr> - <tr> - <td>JavaScript 1.2</td> - <td> - <p>ECMA-262 n'était pas terminée lorsque JavaScript 1.2 est sorti. JavaScript 1.2 n'est pas entièrement compatible avec la norme ECMA-262, édition 1, pour les raisons suivantes :</p> - <ul> - <li>Netscape a développé des fonctionnalités supplémentaires dans JavaScript 1.2 qui n'ont pas été prises en considération pour ECMA-262.</li> - <li>ECMA-262 ajoute deux nouvelles fonctionnalités : l'internationalisation en utilisant le comportement Unicode et uniforme sur toutes les plateformes. Plusieurs fonctionnalités de JavaScript 1.2, telles que l'objet Date, qui étaient dépendantes de la plateforme.</li> - </ul> - </td> - </tr> - <tr> - <td>JavaScript 1.3</td> - <td>JavaScript 1.3 est entièrement compatible avec la norme ECMA-262, édition 1.<br> - JavaScript 1.3 a résolu les contradictions que JavaScript 1.2 a eu avec ECMA-262, tout en conservant toutes les fonctionnalités supplémentaires de JavaScript 1.2, sauf == et! =, qui ont été modifiées pour se conformer à la norme ECMA-262.</td> - </tr> - <tr> - <td>JavaScript 1.4</td> - <td>JavaScript 1.4 est entièrement compatible avec la norme ECMA-262, édition 1.<br> - La troisième version de la spécification ECMAScript n'a pas été finalisée lorsque JavaScript 1.4 est sorti.</td> - </tr> - <tr> - <td>JavaScript 1.5</td> - <td>JavaScript 1.5 est entièrement compatible avec la spécification ECMA-262, édition 3.</td> - </tr> - </tbody> -</table> -<div class="note"> - <p><strong>Remarque </strong>: ECMA-262 dans sa deuxième édition contenait des modifications mineures et corrections de bugs selon la spécification Édition 1. La version actuelle par le groupe de travail TC39 d'Ecma International est ECMAScript Edition 5.1</p> -</div> -<p>La<a href="/fr/docs/Web/JavaScript/Reference"> référence JavaScript</a> indique les fonctionnalités du langage qui sont conformes à ECMAScript.</p> -<p>JavaScript inclut toujours des fonctionnalités qui ne font pas partie de la spécification ECMAScript. JavaScript est compatible avec ECMAScript, tout en offrant des fonctionnalités supplémentaires.</p> -<h3 id="Documentation_de_JavaScript_et_spécification_ECMAScript">Documentation de JavaScript et spécification ECMAScript</h3> -<p>La spécification ECMAScript est un ensemble d'exigences pour la mise en œuvre ECMAScript. Elle est utile pour savoir si une fonctionnalité JavaScript est prise en charge dans d'autres implémentations ECMAScript. Si vous prévoyez d'écrire du code JavaScript qui utilise des fonctionnalités prises en charge par ECMAScript seulement, alors il vous sera peut-être nécessaire de revoir la spécification ECMAScript.<br> - <br> - Le document ECMAScript n'est pas destiné à aider les programmeurs de script : c'est le but de la documentation JavaScript.</p> -<h3 id="Terminologie_JavaScript_et_ECMAScript">Terminologie JavaScript et ECMAScript</h3> -<p>La spécification ECMAScript utilise une syntaxe et une terminologie qui peuvent ne pas être familières à un programmeur JavaScript. Bien que la description du langage puisse varier en ECMAScript, le langage lui-même reste le même. JavaScript prend en charge toutes les fonctionnalités décrites dans la spécification ECMAScript.</p> -<p>La documentation JavaScript décrit les aspects du langage qui sont appropriés pour un programmeur JavaScript. Par exemple :</p> -<ul> - <li>L'objet global n'est pas abordé dans la documentation JavaScript parce qu'il n'a pas à être utilisé directement. Les méthodes et propriétés de l'objet global, que vous utilisez, sont abordées dans la documentation de JavaScript, mais sont appelées fonctions et propriétés de plus haut niveau (<em>top-level</em>).</li> - <li>Le constructeur sans paramètre des objets <code>Number</code> et <code>String</code> ne sont pas abordés dans la documentation JavaScript, parce que le résultat est peu utile. Un constructeur <code>Number</code> appelé sans argument retourne +0, et un constructeur <code>String</code> sans argument retourne "" (une chaine de caractères vide).</li> -</ul> -<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/Web/JavaScript/Guide/Apropos">« Précédent</a> </span><a href="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_litt%C3%A9raux">Suivant »</a></p> -<p style="margin-left: 40px;"> </p> diff --git a/files/fr/web/javascript/guide/collections_avec_clés/index.html b/files/fr/web/javascript/guide/keyed_collections/index.html index 82a275c036..82a275c036 100644 --- a/files/fr/web/javascript/guide/collections_avec_clés/index.html +++ b/files/fr/web/javascript/guide/keyed_collections/index.html diff --git a/files/fr/web/javascript/guide/boucles_et_itération/index.html b/files/fr/web/javascript/guide/loops_and_iteration/index.html index 0646c94d53..0646c94d53 100644 --- a/files/fr/web/javascript/guide/boucles_et_itération/index.html +++ b/files/fr/web/javascript/guide/loops_and_iteration/index.html diff --git a/files/fr/web/javascript/guide/métaprogrammation/index.html b/files/fr/web/javascript/guide/meta_programming/index.html index fcec88d12b..fcec88d12b 100644 --- a/files/fr/web/javascript/guide/métaprogrammation/index.html +++ b/files/fr/web/javascript/guide/meta_programming/index.html diff --git a/files/fr/web/javascript/guide/nombres_et_dates/index.html b/files/fr/web/javascript/guide/numbers_and_dates/index.html index a7debdc697..a7debdc697 100644 --- a/files/fr/web/javascript/guide/nombres_et_dates/index.html +++ b/files/fr/web/javascript/guide/numbers_and_dates/index.html diff --git a/files/fr/web/javascript/guide/objets_élémentaires_javascript/index.html b/files/fr/web/javascript/guide/objets_élémentaires_javascript/index.html deleted file mode 100644 index a251b58105..0000000000 --- a/files/fr/web/javascript/guide/objets_élémentaires_javascript/index.html +++ /dev/null @@ -1,899 +0,0 @@ ---- -title: Objets élémentaires JavaScript -slug: Web/JavaScript/Guide/Objets_élémentaires_JavaScript -tags: - - Guide - - JavaScript - - Objets JavaScript -translation_of: Web/JavaScript/Guide -translation_of_original: Web/JavaScript/Guide/Predefined_Core_Objects ---- -<p>{{jsSidebar("JavaScript Guide")}}</p> - -<p>Dans ce chapitre nous verrons les différents objets élémentaires qui existent en JavaScript : <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Function</code>, <code>Math</code>, <code>Number</code>, <code>RegExp</code>, et <code>String</code>.</p> - -<h2 id="Les_tableaux_objet_Array">Les tableaux : objet <code>Array</code></h2> - -<p>JavaScript ne possède pas type primitif pour les tableaux. En revanche, il est possible d'utiliser l'objet natif <code>Array</code> ainsi que ses méthodes pour manipuler des tableaux. L'objet <code>Array</code> possède différentes méthodes pour manipuler les tableaux : fusion, inverse, tri... Il possède une propriété permettant de déterminer la longueur du tableau et d'autres propriétés qu'on peut utiliser avec les expressions rationnelles.</p> - -<p>Un <em>tableau</em> est un ensemble ordonné de valeurs auxquelles on peut faire référence via un nom et un indice. Si par exemple on utilise un tableau <code>reg </code>qui contient un registre de noms indicés (autrement dit dont la position dans le tableau est déterminée) par un identifiant : on aurait <code>reg[1]</code> pour le premier nom, <code>reg[2]</code> pour le second et ainsi de suite/</p> - -<h3 id="Créer_un_tableau">Créer un tableau :</h3> - -<p>Les instructions suivantes permettent de créer des objets <code>Array</code> équivalents :</p> - -<div> -<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN); -var arr = Array(element0, element1, ..., elementN); -var arr = [element0, element1, ..., elementN]; -</pre> -</div> - -<p><code>element0, element1, ..., elementN</code> est la liste des valeurs des éléments du tableau. Quand ces valeurs sont fournies, les éléments du tableau sont initialisés avec ses valeurs. La propriété <code>length </code>vaudra alors le nombre d'arguments.</p> - -<p>La dernière syntaxe, utilisant des crochets, est appelée « littéral de tableau » ou « initialisateur de tableau ». C'est la forme la plus courte pour créer un tableau et c'est cette forme qui est souvent préférée. Voir la page <a href="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux" title="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">Littéraux de tableaux</a> pour plus de détails.</p> - -<p>Lorsqu'on souhaite créer un tableau de longueur non nulle mais qui ne contient aucun élément, les syntaxes suivantes peuvent être utilisées :</p> - -<pre class="brush: js">var arr = new Array(longueurTabl); -var arr = Array(longueurTabl); - -// Ces instructions ont le même effet -var arr = []; -arr.length = longueurTabl; -</pre> - -<p>Dans le code ci-dessus, <code>longueurTabl</code> doit être du type <code>Number</code>. Si ce n'est pas le cas, un tableau avec une seule valeur, celle fournie, <code>longueurTabl</code>, sera créé. Si on appelle <code>arr.length</code>, on aura bien <code>longueurTabl</code>, en revanche le tableau ne contiendra que des éléments vides (indéfinis). Si on utilise une boucle <code>for...in</code> sur le tableau, aucun des éléments du tableau ne sera renvoyé.</p> - -<p>En plus de définir une nouvelle variable en lui assignant un tableau, on peut également assigner les tableaux à une propriété d'un nouvel objet ou d'un objet existant :</p> - -<pre class="brush: js">var obj = {}; -// ... -obj.prop = [element0, element1, ..., elementN]; - -// OU -var obj = {prop: [element0, element1, ...., elementN]} -</pre> - -<p>Si on souhaite initialiser un tableau avec un seul élément qui est un nombre, on doit utiliser la syntaxe avec crochets. En effet, si on utilise le constructeur <code>Array()</code> auquel on passe un seul argument numérique, celui-ci sera interprété comme <code>longueurTabl</code>, et non pas comme le seul élément du tableau.</p> - -<pre><code>var arr = [42]; -var arr = Array(42); // Crée un tableau sans élément mais de longueur 42 - -// L'instruction ci-avant est équivalente à -var arr = []; -arr.length = 42; -</code> -</pre> - -<p>Si on appelle le constructeur <code>Array() </code>avec un argument qui n'est pas un nombre entier (dont la partie décimale est non nulle), on obtiendra une erreur <code>RangeError</code>. Voici un exemple :</p> - -<pre>var arr = Array(9.3); // RangeError: Invalid array length -</pre> - -<p>Si on souhaite créer des tableaux d'un seul élément (peu importe le type), il est plus adapté d'utiliser des littéraux de tableaux ou de créer un tableau vide puis d'y ajouter la valeur.</p> - -<h3 id="Remplir_un_tableau">Remplir un tableau</h3> - -<p>Il est possible de remplir un tableau en affectant des valeurs à ses différents éléments :</p> - -<pre class="brush: js">var reg = []; -reg[0] = "Casey Jones"; -reg[1] = "Phil Lesh"; -reg[2] = "August West"; -</pre> - -<p><strong>Note :</strong> Si on utilise les crochets et un nombre décimal non entier, une propriété sera créée pour l'objet mais cela ne créera pas un élément du tableau.</p> - -<pre> var arr = []; -arr[3.4] = "Oranges"; -console.log(arr.length); // 0 -console.log(arr.hasOwnProperty(3.4)); // true -</pre> - -<p>On peut également remplir un tableau à la création :</p> - -<pre class="brush: js">var monTableau = new Array("Hello", maVar, 3.14159); -var monTableau = ["Mangue", "Pomme", "Orange"] -</pre> - -<h3 id="Faire_référence_aux_éléments_d'un_tableau">Faire référence aux éléments d'un tableau</h3> - -<p>Il est possible de faire référence aux élément d'un tableau en utilisant leur indice dans ce tableau. Ainsi, si on définit le tableau suivant :</p> - -<pre class="brush: js">var monTableau = ["Vent", "Eau", "Feu"]; -</pre> - -<p>On peut faire référence au premier élément du tableau en utilisant <code>monTableau[0]</code> et au second élément en utilisant <code>monTableau[1]</code>. Les indices des éléments d'un tableau commencent à zéro.</p> - -<p><strong>Note :</strong> L'opérateur du tableau (les crochets) est aussi utilisé pour accéder aux propriétés du tableau (en effet les tableaux sont des objets en JavaScript, et on peut donc utiliser leurs propriétés). Par exemple :</p> - -<pre> var tabl = ["un", "deux", "trois"]; -tabl[2]; // trois -tabl["length"]; // 3 -</pre> - -<h3 id="La_propriété_length">La propriété <code>length</code></h3> - -<p>En termes d'implémentation, les éléments d'un tableau sont en fait stockés comme des propriétés de l'objet et l'indice de l'élément est le nom de la propriété. La propriété <code>length</code> est spéciale : elle renvoie toujours l'indice du dernier élément plus 1. Attention : les indices d'un tableau, en JavaScript, commencent à 0 et pas à 1.</p> - -<pre class="brush: js">var chats = []; -chats[30] = ['Nyan']; -print(chats.length); // 31 -</pre> - -<p>Il est également possible d'affecter une valeur à la propriété <code>length</code>. Si on lui assigne une valeur inférieure au nombre d'éléments du tableau : le tableau sera tronqué. Si on lui affecte la valeur 0, le tableau sera entièrement vidé.</p> - -<pre class="brush: js">var chats = ['Marie', 'Toulouse', 'Berlioz']; -console.log(chats.length); // 3 - -chats.length = 2; -console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré - -chats.length = 0; -console.log(chats); // Rien n'est affiché : tableau vide - -chats.length = 3; -console.log(cats); // [undefined, undefined, undefined] -</pre> - -<h3 id="Effectuer_des_boucles_sur_des_tableaux">Effectuer des boucles sur des tableaux</h3> - -<p>On sera souvent amené à faire des boucles sur les valeurs d'un tableau pour répéter un traitement sur chacune d'elle. La façon la plus simple de faire des boucles est la suivante :</p> - -<pre class="brush: js">var couleurs = ['rouge', 'vert', 'bleu']; -for (var i = 0; i < couleurs.length; i++) { - console.log(couleurs[i]); -} -</pre> - -<p>Si on est certain qu'aucun des éléments du tableau ne pourra être évalué à <code>false</code>. Si par exemple le tableau est constitué d'éléments du <a href="/fr/docs/R%C3%A9f%C3%A9rence_DOM_Gecko">DOM</a>, on peut utiliser la syntaxe suivante, plus efficace :</p> - -<pre class="brush: js">var divs = document.getElementsByTagName('div'); -for (var i = 0, div; div = divs[i]; i++) { - /* Effectuer un traitement sur les div */ -} -</pre> - -<p>En faisant cela, on évite de répéter le test qui consiste à vérifier la longueur du tableau et on s'assure que la variable <code>div</code> est réassignée à chaque passage dans la boucle.</p> - -<p>La méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach()</code></a>, introduite avec JavaScript 1.6, permet de boucler sur un tableau d'une autre façon :</p> - -<pre class="brush: js">var couleurs = ['rouge', 'vert', 'bleu']; -couleurs.forEach(function(couleur) { - console.log(couleur); -}); -</pre> - -<p>La fonction, passée en argument de la méthode <code>forEach</code> est exécutée pour chaque élément du tableau (qui sera passé en argument de cette fonction). Les éléments du tableau non assignés ne sont pas traités.</p> - -<p>Les éléments du tableau qui n'ont pas été définis lors de la création du tableau ne sont pas utilisés avec <code>forEach, </code>en revanche lorsque <code>undefined</code> a été explicitement assigné à un élément du tableau, il est pris en compte :</p> - -<pre class="brush: js">var array = ['premier', 'second', , 'quatrième']; - -// la boucle ci-dessous renvoie ['premier', 'second', 'quatrième']; -array.forEach(function(element) { - console.log(element); -}) - -if(array[2] === undefined) { console.log('array[2] vaut undefined'); } // true - -var array = ['premier', 'second', undefined, 'quatrième']; - -//la boucle ci-dessous renvoie ['premier', 'second', undefined, 'quatrième']; -array.forEach(function(element) { - console.log(element); -})</pre> - -<p>Les éléments d'un tableau étant stockés comme des propriétés d'un tableau, il n'est pas conseillé d'utiliser de boucle <code>for...in</code> pour traiter les tableaux car on traitera les éléments du tableau ainsi que toutes les propriétés énumérables.</p> - -<h3 id="Méthodes_de_l'objet_Array">Méthodes de l'objet <code>Array</code></h3> - -<p>L'objet <code>Array</code> possède les méthodes suivantes :</p> - -<ul> - <li><a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Array/concat"><code>concat()</code></a> : fusionne deux tableaux et renvoie le résultat de cette fusion - - <pre class="brush: js">var monTableau = new Array("1", "2", "3"); -monTableau = monTableau.concat("a", "b", "c"); // monTableau vaut maintenant ["1", "2", "3", "a", "b", "c"] -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/join"><code>join(délimiteur = ",")</code></a> fusionne les éléments d'un tableau en une seule chaîne, en utilisant un délimiteur : - <pre class="brush: js">var monTableau = new Array("Air", "Eau", "Feu"); -var liste = monTableauArray.join(" - "); // "Air - Eau - Feu" -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/push"><code>push()</code></a> ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la longueur du tableau après cet ajout : - <pre class="brush: js">var monTableau = new Array("1", "2"); -monTableau.push("3"); // monTableau vaut maintenant ["1", "2", "3"] -</pre> - </li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/pop"><code>pop()</code></a> retire le dernier élément d'un tableau et renvoie cet élément : - <pre class="brush: js">var monTableau = new Array("1", "2", "3"); -var dernier = monTableau.pop(); // monTableau vaut ["1", "2"] et dernier = "3" -</pre> - </li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/shift"><code>shift()</code></a> retire le premier élément du tableau et renvoie cet élément : - <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); -var premier = monTableau.shift(); // monTableau vaut ["2", "3"], premier vaut "1" -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/unshift"><code>unshift()</code></a> ajoute un ou plusieurs éléments en premier(s) élément(s) dans un tableau et renvoie la nouvelle longueur : - <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); -monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/slice"><code>slice(indice_debut, jusqu_indice)</code></a> extrait une portion d'un tableau et renvoie un nouveau tableau : - <pre class="brush: js">var monTableau = new Array ("a", "b", "c", "d", "e"); -monTableau = monTableau.slice(1, 4); /* commencer à 1 et jusqu'à l'indice 3, renvoyant - ainsi [ "b", "c", "d"] */ -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/splice"><code>splice(indice, nombre_a_enlever, ajout_element1, ajout_element2, ...)</code></a> retire des éléments d'un tableau et les remplace si des valeurs sont fournies : - <pre class="brush: js">var monTableau = new Array ("1", "2", "3", "4", "5"); -monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut ["1", "a", "b", "c", "d", "5"] - // ce code commence à l'indice 1 (où il y a la valeur "2"), retire 3 éléments - // puis insère les éléments fournis à partir de cet indice -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/reverse"><code>reverse()</code></a> transpose les éléments d'un tableau : le premier élément du tableau et le dernier devient le premier : - <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); -monTableau.reverse(); // transpose le tableau qui devient [ "3", "2", "1" ] -</pre> - </li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort"><code>sort()</code></a> trie les éléments d'un tableau : - <pre class="brush: js">var monTableau = new Array("Air", "Eau", "Feu"); -monTableau.sort(); // trie le tableau qui devient [ "Air", "Eau", "Feu" ] -</pre> - - <p><code>sort()</code> peut également prendre en argument une fonction de rappel (<em>callback</em> en anglais) qui détermine la relation d'ordre selon laquelle les éléments sont comparés. Cette fonction compare deux valeurs et renvoie l'une de ces trois valeurs :</p> - - <ul> - <li>Si <code>a</code> est inférieur à <code>b</code> selon la relation d'ordre : -1 (ou tout autre nombre négatif)</li> - <li>Si <code>a</code> est supérieur à <code>b</code> selon la relation d'ordre : 1 (ou tout autre nombre positif)</li> - <li>Si <code>a</code> et<code> b</code> sont égaux selon la relation d'ordre : 0.</li> - </ul> - - <p>Par exemple, on peut utiliser la fonction ci-après pour trier selon la dernière lettre d'un tableau :</p> - - <pre class="brush: js">var triFn = function(a, b){ - if (a[a.length - 1] < b[b.length - 1]) return -1; - if (a[a.length - 1] > b[b.length - 1]) return 1; - if (a[a.length - 1] == b[b.length - 1]) return 0; -} -monTableau.sort(triFn); // tri le tableau qui deviendra -//monTableau = ["Air","Eau","Feu"]</pre> - </li> -</ul> - -<p>Du code compatible avec les anciens navigateurs, pour remplacer ces fonctions, est disponible sur les pages qui concernent ces fonctions. Le support des navigateurs pour ces fonctions est détaillé <a class="external" href="http://www.robertnyman.com/javascript/" title="http://www.robertnyman.com/javascript/">ici (en anglais)</a>.</p> - -<ul> - <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/indexOf"><code>indexOf(élémentCherché[, indiceDebut])</code></a> permet de chercher dans le tableau l'élément <code>élémentCherché</code> et renvoie le premier indice où l'élément est trouvé. - - <pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a']; -alert(a.indexOf('b')); // Affiche 1 -// Ensuite, on cherche après la première correspondance -alert(a.indexOf('b', 2)); // Affiche 3 -alert(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/lastIndexOf"><code>lastIndexOf(élémentCherché[, indiceDebut])</code></a> fonctionne comme <code>indexOf</code>, mais cherche à partir de la fin du tableau. - <pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b']; -alert(a.lastIndexOf('b')); // Affiche 5 -// Ensuite on cherche avant la dernière correspondance -alert(a.lastIndexOf('b', 4)); // Affiche 1 -alert(a.lastIndexOf('z')); // Affiche -1 -</pre> - </li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach(callback[, thisObject])</code></a>exécute la fonction <code>callback</code> sur chaque élément du tableau. - <pre class="brush: js">var a = ['a', 'b', 'c']; -a.forEach(alert); // Affiche chaque élément -</pre> - </li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map"><code>map(callback[, thisObject])</code></a> renvoie un nouveau tableau composé des résultats de l'application de la fonction <code>callback</code> sur chaque élément du tableau initial - <pre class="brush: js">var a1 = ['a', 'b', 'c']; -var a2 = a1.map(function(item) { return item.toUpperCase(); }); -alert(a2); // affiche A,B,C -</pre> - </li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter"><code>filter(callback[, thisObject])</code></a> renvoie un nouveau tableau composé des éléments du tableau initial pour lesquels la fonction callback a renvoyé <code>true</code>. - <pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30]; -var a2 = a1.filter(function(item) { return typeof item == 'number'; }); -alert(a2); // affiche 10,20,30 -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/every"><code>every(callback[, thisObject])</code></a> renvoie true si la fonction <code>callback</code> renvoie <code>true</code> pour chaque élément du tableau - <pre class="brush: js">function isNumber(value){ - return typeof value == 'number'; -} -var a1 = [1, 2, 3]; -alert(a1.every(isNumber)); // Affiche true -var a2 = [1, '2', 3]; -alert(a2.every(isNumber)); // Affiche false -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/some"><code>some(callback[, thisObject])</code></a> renvoie true si la fonction <code>callback</code> renvoie true pour au moins un élément du tableau - <pre class="brush: js">function isNumber(value){ - return typeof value == 'number'; -} -var a1 = [1, 2, 3]; -alert(a1.some(isNumber)); // Affiche true -var a2 = [1, '2', 3]; -alert(a2.some(isNumber)); // Affiche true -var a3 = ['1', '2', '3']; -alert(a3.some(isNumber)); // Affiche false -</pre> - </li> -</ul> - -<p>Les méthodes ci-dessus utilisent des fonctions de rappel (<em>callback</em>) et sont appelées méthodes <em>itératives</em>. En effet, d'une certaine façon, elles bouclent sur le tableau. Chacune de ces méthodes possède un argument facultatif <code>thisObject</code>. Si cet argument est utilisé, il représentera le contexte utilisé pour le mot-clé <code>this</code> utilisé dans la fonction de rappel. S'il n'est pas utilisé et que la fonction est appelée en dehors d'un contexte objet donné <code>this</code> fera référence à l'objet global (<a href="/fr/docs/DOM/window" title="/fr/docs/DOM/window"><code>window</code></a>). Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a>.</p> - -<p>En réalité, la fonction de rappel est utilisé avec trois arguments. Le premier est la valeur de l'élément, le deuxième est l'indice de l'élément et le troisième est la référence au tableau. Étant donné que JavaScript ignore les arguments en trop pour une fonction, on peut très bien appeler une fonction qui ne prend qu'un seul paramètre (comme <code>alert</code> par exemple).</p> - -<ul> - <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/Reduce"><code>reduce(callback[, initialValue])</code></a> applique la fonction <code>callback(valeur1, valeur2)</code> afin de réduire le tableau à une seule valeur. - - <pre class="brush: js">var a = [10, 20, 30]; -var total = a.reduce(function(premier, second) { return first + second; }, 0); -alert(total) // Affiche 60 -</pre> - </li> - <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/ReduceRight"><code>reduceRight(callback[, initialValue])</code></a> fonctionne comme <code>reduce()</code> mais en partant du dernier élément.</li> -</ul> - -<p><code>reduce</code> et <code>reduceRight</code> sont des méthodes itératives plus compliquées. Ces méthodes sont à utiliser pour des algorithmes récursifs pour réduire une séquence d'objet en une seule valeur.</p> - -<h3 id="Tableaux_à_plusieurs_dimensions">Tableaux à plusieurs dimensions</h3> - -<p>Les tableaux peuvent être imbriqués, cela signifie qu'un tableau peut contenir un autre tableau comme élément. De cette façon, on peut créer des tableaux à plusieurs dimensions.</p> - -<p>Voici par exemple la création d'un tableau de dimension 2.</p> - -<pre class="brush: js">var a = new Array(4); -for (i = 0; i < 4; i++) { - a[i] = new Array(4); - for (j = 0; j < 4; j++) { - a[i][j] = "[" + i + "," + j + "]"; - } -} -</pre> - -<p>Le code précédent permettra de créer un tableau avec ces lignes :</p> - -<pre>Ligne 0: [0,0] [0,1] [0,2] [0,3] -Ligne 1: [1,0] [1,1] [1,2] [1,3] -Ligne 2: [2,0] [2,1] [2,2] [2,3] -Ligne 3: [3,0] [3,1] [3,2] [3,3] -</pre> - -<h3 id="Tableaux_et_expressions_rationnelles">Tableaux et expressions rationnelles</h3> - -<p>Lorsqu'un tableau provient d'une correspondance entre une expression rationnelle et une chaîne de caractères, le tableau possède des propriétés et des éléments fournissant des informations sur la correspondance. Un tel tableau peut être renvoyé par <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec"><code>RegExp.exec()</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match"><code>String.match()</code></a>, et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split"><code>String.split()</code></a>. Pour plus d'informations sur l'utilisation des tableaux et des expressions rationnelles, voir la page <a href="/fr/docs/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">Expressions rationnelles</a>.</p> - -<h3 id="Manipuler_des_objets_semblables_aux_tableaux">Manipuler des objets semblables aux tableaux</h3> - -<p>Certains objets JavaScript, comme <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a> (renvoyé par la méthode <a href="/fr/docs/DOM/document.getElementsByTagName"><code>document.getElementsByTagName()</code></a>) ou <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> (disponible au sein d'une fonction) ressemblent à des tableaux et peuvent se comporter comme tels, en revanche ils ne possèdent pas toutes les propriétés d'un objet de type <code>Array</code>. Par exemple, l'objet <code>arguments</code> possède un attribut <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length"><code>length</code></a> mais ne possède pas la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach()</code></a>.</p> - -<p>Les méthodes génériques, disponibles à partir de JavaScript 1.6, permettent d'utiliser des méthodes de l'objet <code>Array</code> sur des objets semblables à des tableaux. Chaque méthode standard possède un équivalent disponible via l'objet <code>Array</code> lui-même. Ainsi :</p> - -<pre class="brush: js"> function alertArguments() { - Array.forEach(arguments, function(item) { - alert(item); - }); - } -</pre> - -<p>Dans les versions plus anciennes, il est possible d'émuler ces méthodes génériques en utilisant la méthode <code>call</code> fournie par les fonctions :</p> - -<pre class="brush: js"> Array.prototype.forEach.call(arguments, function(item) { - alert(item); - }); -</pre> - -<p>Ces méthodes génériques peuvent également être utilisées sur les chaînes de caractères. En effet, elles fournissent un accès séquentiel aux différents caractères, comme pour les différents éléments d'un tableau :</p> - -<pre class="brush: js">Array.forEach("une chaine", function(caractere) { - alert(caractere); -});</pre> - -<p>Voici d'autres exemples utilisant ces méthodes sur des chaînes de caractères. Ces exemples utilisent également les <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8#Fermetures_d.27expressions">fermetures d'expressions de JavaScript 1.8</a> :</p> - -<pre class="brush: js">var str = 'abcdef'; -var filtreConsonnes = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf' -var voyellesPrésentes = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true -var toutesVoyelles = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false -var intercaleZéros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0' -var valeurNumérique = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0); -// 21 (reduce() since JS v1.8) -</pre> - -<p>Les méthodes <code>filter</code> et <code>map</code> ne renvoient pas directement les caractères comme faisant partie d'une même chaîne de caractères mais le résultat de l'opération sur chacun des caractères, il est donc nécessaire d'utiliser <code>join</code> pour obtenir une chaîne de caractères finale.</p> - -<h3 id="Tableaux_définis_par_compréhensions">Tableaux définis par compréhensions</h3> - -<p>À partir de JavaScript 1.7, les définitions de tableaux par compréhension permettent de construire, simplement, un tableau se basant sur le contenu d'un premier tableau. Ces compréhensions sont souvent utilisées en lieu et place des méthodes <code>map()</code> et <code>filter()</code>.</p> - -<p>Dans l'exemple suivant, on définit un tableau par compréhension pour qu'il contienne les doubles des éléments du premier tableau :</p> - -<pre class="brush: js">var nombres = [1, 2, 3, 4]; -var doubles = [i * 2 for (i of nombres)]; -alert(doubles); // Affiche 2,4,6,8 -</pre> - -<p>Cela est équivalent à l'opération <code>map()</code> qui suit :</p> - -<pre class="brush: js">var doubles = nombres.map(function(i){return i * 2;}); -</pre> - -<p>Les compréhensions peuvent également être utilisées afin de restreindre un tableau à certaines valeurs correspondants à un critère. On peut par exemple ne garder que les nombres pairs :</p> - -<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30]; -var pairs = [i for (i of nombres) if (i % 2 === 0)]; -alert(pairs); // Affiche 2,22,30 -</pre> - -<p><code>filter()</code> aurait également pu être utilisé :</p> - -<pre class="brush: js">var pairs = nombres.filter(function(i){return i % 2 === 0;}); -</pre> - -<p>Les opérations du style de <code>map()</code> et <code>filter()</code> peuvent être combinées en une seule compréhension. Voici par exmple un tableau défini par compréhension qui contient les doubles des nombres pairs du premier tableau :</p> - -<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30]; -var pairsDoubles = [i * 2 for (i of nombres) if (i % 2 === 0)]; -alert(pairsDoubles); // Affiche 4,44,60 -</pre> - -<p>Les crochets utilisés pour les définitions par compréhension permettent d'introduire une portée implicite. Les nouvelles variables (comme i dans l'exemple) sont utilisées comme si elles avaient été déclarées avec <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let"><code>let</code></a>. Elles ne seront donc pas disponibles en dehors de la compréhension.</p> - -<p>Il n'est pas nécessaire de partir d'un tableau pour utiliser une telle définition, on peut également utiliser les <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et les générateurs</a>.</p> - -<p>On peut également utiliser des chaînes de caractères comme objet de départ :</p> - -<pre class="brush: js">var str = 'abcdef'; -var filtreConsonnes = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c)) ].join(''); // 'bcdf' -var intercaleZéros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0' -</pre> - -<p>Ici aussi, il faut utiliser la méthode <code>join()</code> pour obtenir une chaîne de caractère unique en sortie.</p> - -<h2 id="L'objet_Boolean">L'objet <code>Boolean</code></h2> - -<p>L'objet <code>Boolean</code> est une « enveloppe » (ou <em>wrapper</em> en anglais) autour du type primitif booléen. La syntaxe suivante permet de créer un objet <code>Boolean</code> :</p> - -<pre class="brush: js">var nomObjetBooléen = new Boolean(valeur); -</pre> - -<p>Attention, il ne faut pas confondre les valeurs <code>true</code> et <code>false</code> du type primitif booléen et les valeurs true et false de l'objet <code>Boolean</code>. Tout objet dont la valeur n'est pas <code>undefined</code> , <code>null</code>, <code>0</code>, <code>NaN</code>, ou la chaîne de caractères vide (y compris un objet <code>Boolean</code> dont la valeur est false) sera évalué comme <code>true</code> dans un test conditionnel. Voir l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else </a>pour plus d'informations.</p> - -<h2 id="Objet_Date">Objet <code>Date</code></h2> - -<p>JavaScript ne possède pas de type de données pour gérer les dates. En revanche, il est possible d'utiliser un objet <code>Date</code>, ainsi que ses méthodes, pour manipuler de telles données. L'objet<code> Date</code> possède différentes méthodes pour définir des dates, obtenir des informations sur une dates et les manipuler, il ne possède aucune propriété.</p> - -<p>La gestion des dates en JavaScript est similaire à celle effectuée par Java. Les deux languages partagent de nombreuses méthodes et ils stockent tous les deux les dates comme le nombre de millisecondes depuis le premier janvier 1970 à 00h00m00 UTC.</p> - -<p>L'intervalle qu'on peut utiliser avec l'objet <code>Date</code> est entre100 000 000 jours avant le premier janvier 1970 UTC et 100 000 000 jours après.</p> - -<p>Pour créer un tel objet :</p> - -<pre class="brush: js">var nomObjetDate = new Date([paramètres]); -</pre> - -<p><code>nomObjetDate</code> est le nom de l'objet qu'on crée. Il peut être un nouvel objet à part entière ou bien la propriété d'un objet existant.</p> - -<p>Si on utilise le constructeur Date sans le mot-clé <code>new</code>, on obtiendra seulement la date représentée dans une chaîne de caractères.</p> - -<p>On peut utiliser les <code>paramètres</code> suivants :</p> - -<ul> - <li>Aucun : on crée la date et l'heure du jour : <code>aujourdhui = new Date();</code>.</li> - <li>Une chaîne de caractères qui représente la date au format suivant "Mois_en_anglais jour, année heures:minutes:secondes." Ainsi <code>var Noel95 = new Date("December 25, 1995 13:30:00")</code>. Il est possible de ne pas renseigner les heures, minutes et secondes : les valeurs par défaut seront nulles (0).</li> - <li>Un ensemble d'entiers pour l'année, le mois et le jour<code> : var Noel95 = new Date(1995, 11, 25)</code>.</li> - <li>Un ensemble d'entiers pour l'année, le mois, le jour, l'heure, les minutes et les secondes : <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> -</ul> - -<p><strong>Versions antérieures à JavaScript 1.2 (inclus)</strong><br> - L'objet <code>Date</code> fonctionne de la façon suivante :</p> - -<ul> - <li>Les dates antérieures à 1970 ne sont pas autorisées.</li> - <li>JavaScript se repose sur des utilitaires de gestion des dates qui dépendent de la plate-forme utilisée : on obtient donc des comportements et des résultats différents en fonction de la plate-forme sur laquelle on se situe.</li> -</ul> - -<h3 id="Les_méthodes_de_l'objet_Date">Les méthodes de l'objet <code>Date</code></h3> - -<p>Les méthodes de l'objet <code>Date</code> sont à répartir entre quatre grandes catégories :</p> - -<ul> - <li>Les méthodes de définition <code>set...</code>, permettant de régler le jour et l'heure dans les objets <code>Date</code></li> - <li>Les méthodes d'accès <code>get...</code>, permettant d'obtenir les valeurs de la date et de l'heure des objets <code>Date</code></li> - <li>Les méthodes de conversion <code>to...</code>, qui permettent d'obtenir une mise en forme en chaîne de caractères</li> - <li>Les méthodes d'analyse (<em>parsing</em>) et les méthodes UTC, permettant de transformer certaines chaînes de caractères en <code>Date</code>.</li> -</ul> - -<p>Les deux premières catégories permettent de définir ou d'obtenir les secondes, les minutes, les heures, le jour du mois, le jour de la semaine, les mois et les années. Il existe une méthode <code>getDay</code> pour obtenir le jour de la semaine, en revanche, il n'existe pas de méthode <code>setDay</code> car le calcul du jour de la semaine se fait automatiquement. Ces méthodes utilisent des entiers, de la façon suivante :</p> - -<ul> - <li>Les secondes et minutes : 0 à 59</li> - <li>Les heures : 0 à 23</li> - <li>Les jours : 0 (Dimanche) à 6 (Samedi)</li> - <li>La date : 1 to 31 (jour du mois)</li> - <li>Les mois : 0 (janvier) à 11 (décembre)</li> - <li>Les années : années depuis 1900</li> -</ul> - -<p>Par exemple, si on veut définir la date suivante :</p> - -<pre class="brush: js">var Noel95 = new Date("December 25, 1995"); -</pre> - -<p>On aura alors <code>Noel95.getMonth()</code> qui renverra 11, Noel<code>95.getFullYear()</code> qui renverra 1995.</p> - -<p>Les méthodes <code>getTime</code> et <code>setTime</code> peuvent notamment être utilisées pour comparer des dates. La méthode <code>getTime</code> renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 00h00m00s pour un objet <code>Date</code>.</p> - -<p>De cette façon, le code suivant permet d'afficher le nombre de jours restants pour l'année courante :</p> - -<pre class="brush: js">var ajd = new Date(); -var finAnnee = new Date(1995, 11, 31, 23, 59, 59, 999); // On règle jour et mois -finAnnee.setFullYear(ajd.getFullYear()); // On règle l'année -var msParJour = 24 * 60 * 60 * 1000; // Nombre de millisecondes par jour -var joursRestants = (finAnnee.getTime() - ajd.getTime()) / msParJour; -var joursRestants = Math.round(joursRestants); //renvoie le nombre de jours restants -</pre> - -<p>Dans cet exemple, on crée un objet <code>Date</code> qui contient la date du jour. Ensuite on crée un objet <code>finAnnee</code> et on fixe son année à celle du jour courant. Ensuite, en connaissant le nombre de millisecondes dans une journée, on calcule le nombre de jours entre<code> ajd</code> et <code>finAnnee</code> en utilisant la méthode <code>getTime</code> puis en arrondissant la valeur à un nombre entier.</p> - -<p>La méthode <code>parse</code> peut s'avérer utile lorsqu'on souhaite transformer une chaîne de caractères (en anglais, attention) en une date. L'exemple qui suit utilise les méthodes <code>parse</code> et <code>setTime</code> pour assigner une valeur de date à l'objet <code>dateIPO </code>:</p> - -<pre class="brush: js">var dateIPO = new Date(); -dateIPO.setTime(Date.parse("Aug 9, 1995")); -</pre> - -<h3 id="Exemple_d'utilisation">Exemple d'utilisation</h3> - -<p>L'exemple qui suit permet de définir la fonction <code>JSClock()</code> qui renvoie l'heure au même format qu'une horloge numérique :</p> - -<pre class="brush: js">function JSClock() { - var time = new Date(); - var heure = time.getHours(); - var minute = time.getMinutes(); - var seconde = time.getSeconds(); - var temp = "" + heure; - temp += ((minute < 10) ? ":0" : ":") + minute; - temp += ((seconde < 10) ? ":0" : ":") + seconde; - return temp; -} -</pre> - -<p>La fonctionThe <code>JSClock</code> commence par créer un objet <code>Date</code> appelé <code>time</code>. Aucun argument n'est donné, c'est donc la date et l'heure courante. Ensuite, on appelle les méthodes <code>getHours</code>, <code>getMinutes</code>, et <code>getSeconds</code> pour connaître l'heure, les minutes et les secondes.</p> - -<p>Les trois instructions suivantes permettent de construire une chaîne de caractères avec la variable <code>temp</code>. On ajoute l'heure, puis les minutes (si celles-ci sont inférieures à 10, on rajoute un 0 devant), puis les secondes (de la même manière on rajoute un zéro devant si le nombre de secondes est inférieur à 10).</p> - -<h2 id="L'objet_Function">L'objet <code>Function</code></h2> - -<p>L'objet élémentaire <code>Function</code> définit une chaîne de caractères de code JavaScript qui doit être compilé comme une fonction.</p> - -<p>Pour créer un objet <code>Function</code> on peut utiliser la syntaxe suivante :</p> - -<pre class="brush: js">var functionNomObjet = new Function ([arg1, arg2, ... argn], corpsFonction); -</pre> - -<p><code>functionNomObjet</code> est le nom d'une variable ou d'une propriété d'un objet. On peut également utiliser cette syntaxe avec un objet suivi par un nom de gestionnaire d'événements en minuscules comme <code>window.onerror</code>.</p> - -<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> sont les arguments qui sont utilisés par la fonction. Chacun de ces arguments doit être une chaîne de caractères qui est un identifiant JavaScript valide (ex : "x" ou "monFormulaire".</p> - -<p><code>corpsFonction</code> est une chaîne de caractères définissant le code JavaScript qui doit être compilé comme le code de la fonction.</p> - -<p>Les objets<code> Function</code> sont évalués à chaque fois qu'ils sont utilisés. Utiliser ces objets est moins efficaces que la déclaration de fonctions qu'on appellera au sein du code. Cela est dû au fait que les fonctions déclarées sont compilées.</p> - -<p>En plus de la définition de fonction abordée ici, on peut également les expressions de fonction ou l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a>. Voir la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a> pour plus d'informations sur ces différentes syntaxes.</p> - -<p>Le code suivant assigne une fonction à la variable <code>setBGColor</code>. Cette fonction permet de définir la couleur d'arrière-plan du document courant.</p> - -<pre class="brush: js">var setBGColor = new Function("document.bgColor = 'antiquewhite'"); -</pre> - -<p>Pour appeler l'objet <code>Function</code>, on peut utiliser le nom de la variable comme une fonction. Le code qui suit exécute la fonction qui aura été assignée à la variable <code>setBGColor</code> :</p> - -<pre class="brush: js">var choixCouleur="antiquewhite"; -if (choixCouleur=="antiquewhite") {setBGColor()} -</pre> - -<p>On peut assigner la fonction à un gestionnaire d'événements de différentes façons :</p> - -<ol> - <li> - <pre class="brush: js">document.form1.colorButton.onclick = setBGColor; -</pre> - </li> - <li> - <pre class="brush: html"><INPUT NAME="colorButton" TYPE="button" - VALUE="Changer la couleur de l'arrière-plan" - onClick="setBGColor()"> -</pre> - </li> -</ol> - -<p>La création de la variable <code>setBGColor</code> montrée avant est similaire à la fonction suivante :</p> - -<pre class="brush: js">function setBGColor() { - document.bgColor = 'antiquewhite'; -} -</pre> - -<p>Assigner une fonction à une variable est similaire à la déclaration d'une fonction, cependant il y a quelques différences :</p> - -<ul> - <li>Lorsqu'on assigne une fonction à une variable en utilisant la syntaxe <code>var setBGColor = new Function("...")</code>, <code>setBGColor</code> est une variable dont la valeur courante est une référence à la fonction créée avec <code>new Function()</code>.</li> - <li>Quand on crée une fonction en utilisant la syntaxe <code>function setBGColor() {...}</code>, <code>setBGColor</code> n'est pas une variable, c'est le nom de la fonction.</li> -</ul> - -<p>Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée est privée, en termes de portée, pour la fonction englobante.</p> - -<ul> - <li>La fonction imbriquée peut être utilisée à partir d'instructions seulement depuis la fonction englobante.</li> - <li>La fonction imbriquée peut utiliser des arguments et des variables de la fonction englobante. La fonction englobante ne peut pas utiliser les arguments et les variables de la fonction imbriquée.</li> -</ul> - -<h2 id="L'objet_Math">L'objet <code>Math</code></h2> - -<p>L'objet élémentaire <code>Math</code> possède différentes propriétés et méthodes pour manipuler des constantes et des fonctions mathématiques. Ainsi, la propriété <code>PI</code> de cette objet possède la valeur de pi (3.141...) :</p> - -<pre class="brush: js">Math.PI -</pre> - -<p>De la même façon, cet objet met a disposition des fonctions mathématiques qui sont des méthodes de l'objet <code>Math</code>. On retrouvera des fonctions trigonométriques, logarithmiques, exponentielles... Ainsi pour utiliser la fonction sinus, on écriera :</p> - -<pre class="brush: js">Math.sin(1.56) -</pre> - -<p>Note : les arguments des méthodes trigonométriques de cet objet doivent être exprimés en radians.</p> - -<p>Le tableau suivant liste les différentes méthodes de l'objet <code>Math</code>.</p> - -<table class="standard-table"> - <caption>Tableau 7.1 Méthodes de l'objet Math</caption> - <thead> - <tr> - <th scope="col">Méthode</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>abs</code></td> - <td>Valeur absolue</td> - </tr> - <tr> - <td><code>sin</code>, <code>cos</code>, <code>tan</code></td> - <td>Fonctions trigonométriques sinus, cosinus et tangente</td> - </tr> - <tr> - <td><code>acos</code>, <code>asin</code>, <code>atan</code>, <code>atan2</code></td> - <td>Fonctions trigonométriques inverses, les valeurs renvoyées sont exprimées en radians</td> - </tr> - <tr> - <td><code>exp</code>, <code>log</code></td> - <td>Les fonctions exponentielle et logarithme (naturel ou à base <code>e</code>)</td> - </tr> - <tr> - <td><code>ceil</code></td> - <td>Renvoie le plus petit entier supérieur ou égal à l'argument</td> - </tr> - <tr> - <td><code>floor</code></td> - <td>Renvoie le plus grand entier inférieur ou égal à l'argument</td> - </tr> - <tr> - <td><code>min</code>, <code>max</code></td> - <td>Renvoie le minimum ou le maximum (respectivement) des deux arguments</td> - </tr> - <tr> - <td><code>pow</code></td> - <td>La fonction puissance, le premier argument est la base et le second argument est l'exposant</td> - </tr> - <tr> - <td><code>random</code></td> - <td>Renvoie un nombre aléatoire compris entre 0 et 1</td> - </tr> - <tr> - <td><code>round</code></td> - <td>Arrondit l'argument au plus proche entier</td> - </tr> - <tr> - <td><code>sqrt</code></td> - <td>La fonction racine carrée</td> - </tr> - </tbody> -</table> - -<p>Contrairement à beaucoup d'autres objets, on ne crée jamais d'objet <code>Math</code> personnalisé : on utilise toujours l'objet élémentaire <code>Math</code>.</p> - -<h2 id="L'objet_Number">L'objet <code>Number</code></h2> - -<p>L'objet <code>Number</code> possède des propriétés correspondantes aux constantes numériques. On y trouve : la valeur maximale qu'il est possible de représenter, la valeur minimale, les infinis (négatifs et positifs), et également la constante « not a number » ou NaN qui indique que la valeur n'est pas un nombre. Ces valeurs sont fixes, ne peuvent être changées et s'utilisent de la façon suivante :</p> - -<pre class="brush: js">var maximum = Number.MAX_VALUE; -var minimum = Number.MIN_VALUE; -var infiniPlus = Number.POSITIVE_INFINITY; -var infiniMoins = Number.NEGATIVE_INFINITY; -var nonNombre = Number.NaN; -</pre> - -<p>Il faut toujours utiliser les propriétés de l'objet <code>Number</code> lui-même et non pas celles d'un objet <code>Number</code> qui aurait été créé.</p> - -<p>Le tableau suivant liste les différents propriétés de l'objet <code>Number</code> :</p> - -<table class="standard-table"> - <caption>Tableau 7.2 Propriétés de l'objet Number</caption> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>MAX_VALUE</code></td> - <td>Le plus grand nombre qu'on peut représenter</td> - </tr> - <tr> - <td><code>MIN_VALUE</code></td> - <td>Le plus petit nombre qu'on peut représenter</td> - </tr> - <tr> - <td><code>NaN</code></td> - <td>Valeur spéciale pour les valeurs non numériques</td> - </tr> - <tr> - <td><code>NEGATIVE_INFINITY</code></td> - <td>Valeur spéciale pour représenter l'infini négatif</td> - </tr> - <tr> - <td><code>POSITIVE_INFINITY</code></td> - <td>Valeur spéciale pour représenter l'infini positif</td> - </tr> - </tbody> -</table> - -<p>Le prototype <code>Number</code> fournit également des méthodes pour obtenir des informations d'objets <code>Number</code>. Le tableau suivant liste ces différentes méthodes de <code>Number.prototype</code> :</p> - -<table class="fullwidth-table"> - <caption>Tableau 7.3 Méthodes de Number.prototype</caption> - <thead> - <tr> - <th scope="col">Méthode</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>toExponential</code></td> - <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation exponentielle.</td> - </tr> - <tr> - <td><code>toFixed</code></td> - <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe.</td> - </tr> - <tr> - <td><code>toPrecision</code></td> - <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe, avec une précision donnée.</td> - </tr> - <tr> - <td><code>toSource</code></td> - <td>Renvoie un littéral objet représentant l'objet <code>Number</code>. Cette valeur peut ensuite être utilisée pour créer un nouvel objet. Cette méthode surcharge la méthode <code>Object.toSource</code>.</td> - </tr> - <tr> - <td><code>toString</code></td> - <td>Renvoie une chaîne de caractères représentant l'objet. Cette méthode surcharge la méthode <code>Object.toString.</code></td> - </tr> - <tr> - <td><code>valueOf</code></td> - <td>Renvoie la valeur primitive de l'objet. Cette méthode surcharge la méthode <code>Object.valueOf</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="L'objet_RegExp">L'objet <code>RegExp</code></h2> - -<p>Pour plus d'explications sur le fonctionnement des expressions rationnelles, voir la page sur<a href="/fr/docs/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res"> les expressions rationnelles</a>.</p> - -<h2 id="L'objet_String">L'objet String</h2> - -<p>L'objet <code>String</code> est une enveloppe pour les données du type chaîne de caractères. Les littéraux de chaînes de caractères ne doivent pas être confondus avec les objets <code>String</code>. Par exemple, le code suivant crée deux choses : un littéral de chaîne de caractère,<code> s1</code>, et l'objet <code>String</code> <code>s2</code> :</p> - -<pre class="brush: js">var s1 = "truc"; //crée un littéral de chaîne de caractères -var s2 = new String("truc"); //crée un objet String -</pre> - -<p>Chacune des méthodes de l'objet <code>String</code> peut être utilisée sur une valeur qui est un littéral de chaîne de caractères (pour ce faire, JavaScript convertit automatiquement le littéral en un objet <code>String</code> temporaire, appelle la méthode voulue puis supprime l'objet temporaire). Il est également possible d'utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractères.</p> - -<p>Il est fortement recommandé d'utiliser des littéraux de chaînes de caractères à moins d'avoir spécifiquement besoin d'utiliser un objet <code>String</code>. En effet, les objets <code>String</code> peuvent avoir des effets inattendus :</p> - -<pre class="brush: js">var s1 = "2 + 2"; //crée un littéral de chaîne de caractères -var s2 = new String("2 + 2"); //crée un objet String -eval(s1); //renvoie 4 -eval(s2); //renvoie la chaîne "2 + 2"</pre> - -<p>Un objet <code>String</code> possède une seule propriété, <code>length</code>, indiquant le nombre de caractères contenus dans la chaîne de caractères. Dans le code qui suit, x recevra la valeur 13 car la chaîne "Hello, World!" possède 13 caractères :</p> - -<pre class="brush: js">var maChaine = "Hello, World!"; -var x = maChaine.length; -</pre> - -<p>Un objet possède deux types de méthodes : celles qui renvoient une chaîne modifiée à partir de l'objet initial et celles qui renvoient une version au format HTML de la chaîne. Dans la première catégorie on trouvera des méthodes comme<code> substring</code> et <code>toUpperCase</code>, dans la seconde catégorie, on trouvera notamment <code>bold</code> et <code>link</code>.</p> - -<p>Par exemple, si on utilise la chaîne précédente <code>maChaine.toUpperCase()</code> ou aussi <code>"hello, world!".toUpperCase()</code>, on obtiendra le résultat "HELLO, WORLD!".</p> - -<p>La méthode <code>substring</code> contient deux arguments et renvoie un fragment de la chaîne de caractères entre ces deux arguments qui correspondent aux indices de début et de fin du « découpage ». <code>maChaine.substring(4, 9)</code> renverra "o, Wo".</p> - -<p>L'objet <code>String</code> possède également certaines méthodes permettant d'obtenir directement des données au format HTML : des liens, du texte formaté... Ainsi on pourrait créer un hyperlien avec la méthode suivante :</p> - -<pre class="brush: js">maChaine.link("http://www.helloworld.com") -</pre> - -<p>Le tableau qui suit liste les méthodes des objets <code>String</code>.</p> - -<table class="fullwidth-table"> - <caption>Tableau 7.4 Méthodes des instances du prototype String</caption> - <thead> - <tr> - <th scope="col">Méthode</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/anchor">anchor</a></code></td> - <td>Permet de créer un ancre HTML</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/big" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String//big">big</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/blink" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/blink">blink</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/bold" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/bold">bold</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fixed" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fixed">fixed</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/italics" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/italics">italics</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/small" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/small">small</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/strike" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/strike">strike</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sub" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sub">sub</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sup" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sup">sup</a></code></td> - <td>Permet de formater une chaîne de caractères au format HTML. (Note : l'utilisation du CSS peut parfois être plus judicieuse que certaines entités HTML).</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charAt" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charAt">charAt</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt">charCodeAt</a></code></td> - <td>Renvoie le caractère ou le code du caractère à la position indiquée dans la chaîne de caractères.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf">indexOf</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf">lastIndexOf</a></code></td> - <td>Renvoie la position d'un fragment de la chaîne de caractères (respectivement la dernière position).</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/link" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/link">link</a></code></td> - <td>Crée un hyperlien HTML</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/concat" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/concat">concat</a></code></td> - <td>Concatène deux chaînes de caractères en une chaîne de caractères.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode">fromCharCode</a></code></td> - <td>Construit une chaîne de caractères à partir de la séquence de codes Unicodes fournie. Cette méthode appartient au prototype String mais pas aux instances objets String.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split">split</a></code></td> - <td>Découpe un objet <code>String</code> en un tableau de chaînes de caractères selon un séparateur donné.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice">slice</a></code></td> - <td>Extrait un fragment de la chaîne de caractères et renvoie une nouvelle chaîne.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substring" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substring">substring</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substr" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substr">substr</a></code></td> - <td>Renvoie un fragment de la chaîne de caractères à partir d'un indice jusqu'à un autre indice ou à partir d'un indice et pour une longueur donnée.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace">replace</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/search" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/search">search</a></code></td> - <td>Fonctionne avec les expressions rationnelles.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase">toLowerCase</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase">toUpperCase</a></code></td> - <td> - <p>Renvoie la chaîne de caractères en lettres minuscules (respectivement, en lettres majuscules).</p> - </td> - </tr> - </tbody> -</table> - -<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">« Précédent</a></span> <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">Suivant »</a></p> diff --git a/files/fr/web/javascript/guide/expressions_régulières/assertions/index.html b/files/fr/web/javascript/guide/regular_expressions/assertions/index.html index 2802651d49..2802651d49 100644 --- a/files/fr/web/javascript/guide/expressions_régulières/assertions/index.html +++ b/files/fr/web/javascript/guide/regular_expressions/assertions/index.html diff --git a/files/fr/web/javascript/guide/expressions_régulières/classes_de_caractères/index.html b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.html index ce2d02b789..ce2d02b789 100644 --- a/files/fr/web/javascript/guide/expressions_régulières/classes_de_caractères/index.html +++ b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.html diff --git a/files/fr/web/javascript/guide/expressions_régulières/groupes_et_intervalles/index.html b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html index 269313a659..269313a659 100644 --- a/files/fr/web/javascript/guide/expressions_régulières/groupes_et_intervalles/index.html +++ b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html diff --git a/files/fr/web/javascript/guide/expressions_régulières/index.html b/files/fr/web/javascript/guide/regular_expressions/index.html index 94d037bbf2..94d037bbf2 100644 --- a/files/fr/web/javascript/guide/expressions_régulières/index.html +++ b/files/fr/web/javascript/guide/regular_expressions/index.html diff --git a/files/fr/web/javascript/guide/expressions_régulières/quantificateurs/index.html b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html index 75137ff14d..75137ff14d 100644 --- a/files/fr/web/javascript/guide/expressions_régulières/quantificateurs/index.html +++ b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html diff --git a/files/fr/web/javascript/guide/expressions_régulières/échappement_propriétés_unicode/index.html b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html index df05a95dda..df05a95dda 100644 --- a/files/fr/web/javascript/guide/expressions_régulières/échappement_propriétés_unicode/index.html +++ b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html diff --git a/files/fr/web/javascript/guide/retours_sur_héritage/index.html b/files/fr/web/javascript/guide/retours_sur_héritage/index.html deleted file mode 100644 index 1397899d63..0000000000 --- a/files/fr/web/javascript/guide/retours_sur_héritage/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Retours sur l'héritage -slug: Web/JavaScript/Guide/Retours_sur_héritage -tags: - - Guide - - JavaScript - - Prototype -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain -translation_of_original: Web/JavaScript/Guide/Inheritance_Revisited ---- -<p>Pour des informations plus générales sur l'héritage et les prototypes dans JavaScript, il est conseillé de lire la page <a href="/fr/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="/fr/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain">Héritage et chaîne de prototypes</a>.</p> - -<p>L'héritage a toujours été présent dans JavaScript. Les exemples de cette page utilisent des méthodes qui ont été introduites avec ECMAScript 5. Les pages décrivant ces méthodes vous permettront de savoir si elles peuvent être émulées ou non (pour les anciennes versions notamment).</p> - -<h2 id="Example" name="Example">Exemple</h2> - -<p><code>B</code> hérite de <code>A</code> :</p> - -<pre class="brush: js">function A(a){ - this.varA = a; -} - -A.prototype = { - faireQuelqueChose : function(){ - // ... - } -} - -function B(a, b){ - A.call(this, a); - this.varB = b; -} -B.prototype = Object.create(A.prototype, { - varB : { - value: null, - enumerable: true, - configurable: true, - writable: true - }, - faireQuelqueChose : { - value: function(){ // surcharge - A.prototype.faireQuelqueChose.apply(this, arguments); // call super - // ... - }, - enumerable: true, - configurable: true, - writable: true - } -}); - -var b = new B(); -b.faireQuelqueChose(); -</pre> - -<p>Ce qui est à retenir ici :</p> - -<ul> - <li>Les types sont définis dans <code>.prototype</code></li> - <li>On utiliser <code>Object.create()</code> pour l'héritage</li> -</ul> - -<h2 id="La_propriété_prototype_et_la_méthode_Object.getPrototypeOf">La propriété <code>prototype</code> et la méthode Object.getPrototypeOf</h2> - -<p>JavaScript peut paraître déroutant, relativement à Java ou C++ car il y a une gestion dynamique, à l'exécution et qu'il n'y a pas de classe. Tous les objets sont des instances.</p> - -<p>On voit dans l'exemple précédent que la fonction <code>A</code> possède une propriété spéciale appelée <code>prototype</code>. Cette propriété spéciale est liée à l'utilisation de l'opérateur <code>new</code>. Une référence à l'objet prototype est copié vers la propriété interne<code> [[Prototype]]</code> de la nouvelle instance. Ainsi, si on fait <code>var a1 = new A()</code>, JavaScript (une fois que l'objet sera créé en mémoire et avant d'exécuter la fonction<code> A()</code> avec <code>this</code> lié à l'objet) définira <code>a1.[[Prototype]] = A.prototype</code>. Quand on accède aux propriétés d'une instance, JavaScript vérifie d'abord que la propriété en question existe ou non pour l'instance même et si ce n'est pas le cas, consulte <code>[[Prototype]]</code>. Cela signifie que chaque chose définie dans <code>prototype</code> est partagée avec toutes les instances et qu'on peut changer certains aspects du prototype par la suite, ces changements seront répercutés pour toutes les instances.</p> - -<p>Si, dans l'exemple suivant, on fait <code>var a1 = new A(); var a2 = new A();</code> alors <code>a1.faireQuelqueChose</code> se référerait à <code>Object.getPrototypeOf(a1).faireQuelqueChose</code>, qui correspond exactement à <code>A.prototype.faireQuelqueChose</code>. Autrement dit : <code>Object.getPrototypeOf(a1).<code>faireQuelqueChose</code> == Object.getPrototypeOf(a2).<code>faireQuelqueChose</code> == A.prototype.<code>faireQuelqueChose</code></code>.</p> - -<p>En résumé, le <code>prototype</code> correspond au type tandis que <code>Object.getPrototypeOf()</code> permet de décrire une instance.</p> - -<p><code><span>[[Prototype]]</span></code> est exploré récursivement. Cela signifie qu'on cherche <code>a1.faireQuelqueChose</code>, puis <code>Object.getPrototypeOf(a1).<code>faireQuelqueChose</code></code>, puis <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).<code>faireQuelqueChose</code></code> et ainsi de suite jusqu'à ce que <code>Object.getPrototypeOf </code>renvoie la valeur <code>null</code>.</p> - -<p>Quand on appelle :</p> - -<pre class="brush: js">var o = new Toto();</pre> - -<p>JavaScript effectue en fait :</p> - -<pre class="brush: js">var o = new Object(); -o.[[Prototype]] = Toto.prototype; -o.Toto();</pre> - -<p>Puis, si on utilise cette instruction</p> - -<pre class="brush: js">o.unePropriété;</pre> - -<p>qui vérifie si <code>o</code> possède une propriété <code>unePropriété</code>. Si ce n'est pas le cas, JavaScript vérifiera si <code>Object.getPrototypeOf(o).<code>unePropriété</code></code> existe, si ce n'est pas le cas il vérifie <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).<code>unePropriété</code></code> et ainsi de suite.</p> diff --git a/files/fr/web/javascript/guide/formatage_du_texte/index.html b/files/fr/web/javascript/guide/text_formatting/index.html index 32e270c8d7..32e270c8d7 100644 --- a/files/fr/web/javascript/guide/formatage_du_texte/index.html +++ b/files/fr/web/javascript/guide/text_formatting/index.html diff --git a/files/fr/web/javascript/guide/utiliser_les_promesses/index.html b/files/fr/web/javascript/guide/using_promises/index.html index 2198201957..2198201957 100644 --- a/files/fr/web/javascript/guide/utiliser_les_promesses/index.html +++ b/files/fr/web/javascript/guide/using_promises/index.html diff --git a/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html b/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html deleted file mode 100644 index a70dfee208..0000000000 --- a/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Utiliser le JSON natif -slug: Web/JavaScript/Guide/Utiliser_le_JSON_natif -tags: - - Add-ons - - Advanced - - ECMAScript5 - - Extensions - - JSON - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/JSON -translation_of_original: Web/JavaScript/Guide/Using_native_JSON ---- -<p>{{jsSidebar("JavaScript Guide")}}</p> - -<p>Cet article aborde l'objet JSON natif conforme à ECMAScript 5 qui a été ajouté à Gecko 1.9.1. Pour consulter les informations de base sur l'utilisation de JSON dans les versions précédentes de Firefox, consulter la page <a class="internal" href="/fr/docs/JSON" title="En/JSON">JSON</a>.</p> - -<p>L'objet natif JSON possède deux méthodes clés. La méthode <code>JSON.parse()</code> qui analyse une chaîne de caractères JSON et qui reconstruit l'objet JavaScript original. La méthode <code>JSON.stringify()</code>, quant à elle, accepte un objet JavaScript et renvoie son équivalent JSON.</p> - -<div class="note"><strong>Note :</strong> JSON ne supporte pas les structures cycliques. Toute tentative de conversion d'une telle structure renverra une exception <code>TypeError</code>.</div> - -<h2 id="Analyser_(parser)_les_chaînes_JSON">Analyser (<em>parser</em>) les chaînes JSON</h2> - -<p>Afin de convertir une chaîne JSON en un objet JavaScript, il suffit de passer une chaîne JSON à la méthode <code>JSON.parse()</code> :</p> - -<pre>var objetJS = JSON.parse(chaineJSON);</pre> - -<div class="note"> -<p>À partir de JavaScript 1.8.5 (Firefox 4), <code>JSON.parse()</code> n'accepte pas les virgules en fin de chaîne</p> -</div> - -<pre>// ces deux instructions renverront une exception<code> SyntaxError</code> -// à partir de JavaScript 1.8.5 -var objetJS = JSON.parse("[1, 2, 3, 4, ]"); -var objetJS = JSON.parse("{ \"toto\" : 1, }"); -</pre> - -<h2 id="Convertir_les_objets_en_JSON">Convertir les objets en JSON</h2> - -<p>Afin de convertir un objet JavaScript en une chaîne JSON, il suffit de passer l'objet à la méthode <code>JSON.stringify()</code> :</p> - -<pre class="brush: js">var toto = {}; -toto.truc = "nouvelle propriété"; -toto.machin = 3; - -var chaineJSON = JSON.stringify(toto); -</pre> - -<p><code>chaineJSON</code> contient désormais <code>'{"truc":"nouvelle propriété","machin":3}'</code>.</p> - -<p>Depuis Firefox 3.5.4, <code>JSON.stringify()</code> permet d'adapter la conversion grâce à des paramètres optionnels. La syntaxe est la suivante :</p> - -<p><code>chaineJSON = JSON.stringify(<em>valeur</em> [, <em>remplacement</em> [, <em>espace</em>]])</code>remplacement</p> - -<dl> - <dt><code>valeur</code></dt> - <dd>L'objet JavaScript à convertir en une chaîne JSON.</dd> - <dt><code>remplacement</code></dt> - <dd>Une fonction qui modifie le comportement de la conversion ou bien un tableau d<code>'objets </code><a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String" title="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a> qui sera utilisé comme une liste de propriétés de l'objet <code>valeur</code> à inclure dans la chaîne JSON. Si cette valeur est nulle ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.</dd> - <dt><code>espace</code></dt> - <dd>Un objet <code><a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a></code> ou <a href="/fr/docs/JavaScript/Référence_JavaScript/Objets_globaux/Number" title="/fr/docs/JavaScript/Référence_JavaScript/Objets_globaux/Number"><code>Number</code></a> utilisé pour insérer des espaces dans la chaîne JSON afin qu'elle soit plus lisible. Si c'est un objet <code>Number</code>, il indique le nombre d'espaces à insérer. Ce nombre est limité à 10. Les valeurs inférieures à 1 indiquent qu'aucun espace ne sera utilisé, les valeurs supérieures à 10 seront ramenées à 10. Si cet objet est une <code>String</code>, la chaîne de caractères (ou les 10 premiers caractères si la chaîne est plus longue) à utiliser comme blanc. Si ce paramètre n'est pas fourni (ou vaut <code>null</code>), aucun blanc ne sera utilisé.</dd> -</dl> - -<h3 id="Le_paramètre_de_remplacement">Le paramètre de remplacement</h3> - -<p>La paramètre <code>remplacement</code> peut être une fonction ou un tableau. Si c'est une fonction, elle prendra deux paramètres : la clé et la valeur à être convertie en chaîne de caractères. L'objet pour lequel la clé a été trouvée sera fourni comme paramètre <code>this</code> de la fonction de remplacement. Initialement elle est appelée avec une clé vide représentant l'objet à transformer en chaîne et est ensuite appelé pour chacune des propriétés de l'objet ou du tableau à convertir. Elle doit renvoyer la valeur à ajouter à la chaîne de caractère JSON comme suit :</p> - -<ul> - <li>Si on renvoie un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a>, la chaîne correspondante à ce nombre est utilisée pour la valeur de la propriété de à ajouter à la chaîne JSON.</li> - <li>Si on renvoie une <a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String" title="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a>, cette chaîne est utilisée comme la valeur de la propriété à ajouter à la chaîne JSON.</li> - <li>Si on renvoie un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a>, "true" ou "false" est utilisé comme la valeur de la propriété à ajouter à la chaîne JSON.</li> - <li>Si on renvoie n'importe quel autre objet, il est alors transformé en chaîne JSON de façon récursive en appelant la même fonction de remplacement sur chacune de ses propriétés sauf si l'objet est une fonction, auquel cas on n'ajoute rien à la chaîne JSON.</li> - <li>Si la valeur de retour est <code>undefined</code>, la propriété n'est pas incluse dans la chaîne résultante.</li> -</ul> - -<div class="note"><strong>Note :</strong> Il est impossible d'utiliser la fonction de remplacement pour retirer des valeurs d'un tableau. Si la valeur <code>undefined</code> ou une fonction est renvoyée : <code>null</code> sera renvoyé.</div> - -<h4 id="Exemple">Exemple</h4> - -<pre class="brush: js">function censure(key, value) { - if (typeof value === "string") { - return undefined; - } - return value; -} - -var toto = {fondation: "Mozilla", modèle: "box", semaine: 45, transport: "voiture", mois: 7}; -var chaineJSON = JSON.stringify(toto, censure); -</pre> - -<p>La chaîne JSON produite sera <code>{"semaine":45,"mois":7}</code>.</p> - -<p>Si <code>remplacement</code> est un tableau, les valeurs du tableau indiquent les noms des propriétés de l'objet à inclure dans la chaîne JSON.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a class="internal" href="/fr/docs/Web/JavaScript/New_in_JavaScript/Support_ECMAScript_5_par_Mozilla">Support d'ECMAScript 5 par Mozilla</a></li> - <li><a class="internal" href="/fr/docs/JSON" title="/fr/docs/JSON">JSON</a></li> -</ul> diff --git a/files/fr/web/javascript/guide/utiliser_les_objets/index.html b/files/fr/web/javascript/guide/working_with_objects/index.html index 3879fd0b58..3879fd0b58 100644 --- a/files/fr/web/javascript/guide/utiliser_les_objets/index.html +++ b/files/fr/web/javascript/guide/working_with_objects/index.html diff --git a/files/fr/web/javascript/guide/égalité_en_javascript/index.html b/files/fr/web/javascript/guide/égalité_en_javascript/index.html deleted file mode 100644 index 7a6c3c3ac8..0000000000 --- a/files/fr/web/javascript/guide/égalité_en_javascript/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: L'égalité en JavaScript -slug: Web/JavaScript/Guide/Égalité_en_JavaScript -tags: - - Advanced - - Guide - - JavaScript - - Operators -translation_of: Web/JavaScript/Equality_comparisons_and_sameness -translation_of_original: Web/JavaScript/Guide/Sameness ---- -<p>{{jsSidebar("JavaScript Guide")}}</p> -<p>EcmaScript6 possède trois outils pour déterminer si deux valeurs x et y sont « égales ». Il y a l'égalité simple (deux signes égal) (<a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>==</code></a>), l'égalité stricte (trois signes égal) (<a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>===</code></a>), et la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a>. (Cette méthode a été ajoutée avec ES6. Les opérateurs d'égalité simple et stricte étaient présents en JavaScript avant ES6 et ont conservé leur comportement.)</p> -<h2 id="Un_aperçu">Un aperçu</h2> -<p>Voici comment utiliser chacun de ces outils de comparaisons :</p> -<pre class="brush:js">x == y</pre> -<pre class="brush:js">x === y</pre> -<pre class="brush:js">Object.is(x, y)</pre> -<p>En résumé : l'opérateur d'égalité simple effectuera une conversion de type entre les objets comparés, l'opérateur d'égalité stricte n'effectuera pas de conversion avant de comparer les objets (<code>false</code> est renvoyé automatiquement si les types sont différents), enfin <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> se comportera de la même façon que l'opérateur d'égalité stricte avec des règles supplémentaires pour les valeurs <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, <code>-0</code> et <code>+0</code>. <code>Object.is(-0, +0) </code>ne sera pas vérifié et <code>Object.is(NaN, NaN)</code> sera vrai. (Généralement, quand on compare <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, on obtient le résultat <code>false</code> car la norme IEEE 754 indique que ce comportement est celui attendu pour l'égalité simple ou stricte.)</p> -<p>Cette égalité ne s'applique qu'aux types de données primitifs, aucune des méthodes présentées ci-avant ne permet de comparer la structure de deux objets. Si deux objets x et y possèdent la même structure mais que ce sont des objets distincts, chacune de ces méthodes renverra le résultat <code>false</code>.</p> -<p>Ainsi :</p> -<pre class="brush:js">let x = { valeur: 17 }; -let y = { valeur: 17 }; -console.log(Object.is(x, y)); // false; -console.log(x === y); // false -console.log(x == y); // false</pre> -<h2 id="Les_égalités_simples_strictes_et_les_valeurs_identiques">Les égalités simples, strictes et les valeurs identiques</h2> -<p>Les comparaisons effectuées par les opérateurs d'égalité simple et d'égalité stricte sont décrites par EcmaScript5 : l'algorithme de l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>==</code></a> est décrit dans la <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">section 11.9.3 (en anglais)</a> et l'algorithme de l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>=== </code></a>est décrit dans la <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">section 11.9.6 (en anglais)</a>. Ces deux algorithmes sont expliqués de façon simple et concise, il est préferable de lire le deuxième algorithme avant le premier. ES5 décrit également l'algorithme utilisé en interne par le moteur JavaScript : <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">section 9.12, The SameValue Algorithm (en anglais)</a>. Ce dernier algorithme est très proche de celui utilisé pour l'égalité stricte, ils différent de par leurs gestions différentes des nombres représentés sous forme d'objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a>. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> n'est que la retranscription de cet algorithme, utilisable depuis ES6.</p> -<p>Excepté pour la conversion implicite, on peut voir que, pour les opérateurs d'égalité simple et stricte, l'algorithme d'égalité stricte est un sous-ensemble de l'égalité simple car 11.9.6.2-7 correspond à 11.9.3.1.a-f.</p> -<h2 id="Comprendre_le_sens_des_différentes_égalités">Comprendre le sens des différentes égalités</h2> -<p>Avant ES6, on pouvait penser que l'égalité stricte était une version « améliorée » de l'égalité simple, ou vice-versa. Par exemple, dans certains cas, on peut trouver que l'égalité simple est plus souple que l'égalité stricte car elle effectue une conversion des types (ce qui permet de vérifier <code>6 == "6"</code>). Au contraire, on peut trouver que l'égalité stricte est « meilleure » que l'égalité simple car il est nécessaire que les deux opérandes soient du même type. L'utilité de chaque opérateur dépend du cadre dans lequel on l'utilise.</p> -<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a>, en revanche, n'est pas plus souple ou plus stricte que ces égalités. Il n'est pas non plus un « intermédiaire » entre ces deux opérateurs. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> diffère dans sa façon de gérer la valeur numérique spéciale <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>. D'une certaine façon, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is">Object.is</a></code> se différencie en fonction de ses caractéristiques spéciales sur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN">NaN</a></code> et -0 et +0.</p> -<table class="standard-table"> - <caption> - Opérateurs d'égalité</caption> - <thead> - <tr> - <th scope="col" style="text-align: center;">x</th> - <th scope="col" style="text-align: center;">y</th> - <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th> - <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th> - <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>undefined</code></td> - <td><code>undefined</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>null</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>true</code></td> - <td><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>false</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>"toto"</code></td> - <td><code>"toto"</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>{ toto: "truc" }</code></td> - <td><code>x</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>+0</code></td> - <td><code>-0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>"0"</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>"17"</code></td> - <td><code>17</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>new String("toto")</code></td> - <td><code>"toto"</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>undefined</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>undefined</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>{ toto: "truc" }</code></td> - <td><code>{ toto: "truc" }</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>new String("toto")</code></td> - <td><code>new String("toto")</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>null</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>"toto"</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>NaN</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - </tbody> -</table> -<h2 id="Dans_quels_cas_utiliser_Object.is_ou_l'opérateur_d'égalité_stricte">Dans quels cas utiliser <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> ou l'opérateur d'égalité stricte</h2> -<p>En dehors du traîtement effectué pour <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> s'avère utile lorsqu'on manipule des valeurs très proches de 0 (parfois utilisées pour la métaprogrammation et notamment pour les descripteurs de propriétés et qu'on souhaite reproduire certaines caractéristiques de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty"><code>Object.defineProperty</code></a>). Si on n'a pas ce cas de figure à gérer, il est conseillé d'utiliser <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>===</code></a>. Même dans l'éventualité où on devrait gérer une comparaison entre deux valeurs <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a> il est souvent plus facile de traiter le cas particulier en utilisant la fonction <a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Fonctions_globales/isNaN"><code>isNaN</code></a> présente dans les anciennes versions d'ECMAScript.</p> -<p>Voici une liste (non exhaustive) des méthodes et opérateurs qui pourraient entraîner une apparition des valeurs <code>-0</code> et <code>+0</code> :</p> -<dl> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)"><code>- (négation unaire)</code></a></dt> -</dl> -<dl> - <dd> - <p>Il peut sembler évident que l'opposé de <code>0</code> est <code>-0</code> mais lorsque que cette opération est réalisée dans une expression, il est plus facile d'identifier la transformation qui s'est effectuée. Par exemple :</p> - <pre class="brush:js">let forceFrottement = obj.masse * -obj.vitesse</pre> - <p>Si <code>obj.vitesse </code>vaut <code>0</code>, on aura <code>-0</code> comme résultat du calcul, et c'est cette valeur qui sera assignée à <code>forceFrottement</code></p> - </dd> -</dl> -<dl> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/atan2"><code>Math.atan2</code></a></dt> - <dt> - <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Math/ceil"><code>Math.ceil</code></a></dt> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/pow"><code>Math.pow</code></a></dt> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/round"><code>Math.round</code></a></dt> -</dl> -<dl> - <dd> - La valeur <code>-0</code> peut être produite par ces méthodes (et donc introduite dans une expression qui les comportent), même dans le cas où <code>-0</code> n'est pas un argument. Par exemple, si on utilise <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/pow"><code>Math.pow</code></a> pour calculer <code>-<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Infinity">Infinity</a></code> à une puissance entière impaire et négative, on obtiendra <code>-0</code>. Voir les différentes pages sur ces méthodes pour plus d'informations.</dd> -</dl> -<dl> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor"><code>Math.floor</code></a></dt> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/max"><code>Math.max</code></a></dt> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/min"><code>Math.min</code></a></dt> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sin"><code>Math.sin</code></a></dt> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt"><code>Math.sqrt</code></a></dt> - <dt> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/tan"><code>Math.tan</code></a></dt> -</dl> -<dl> - <dd> - Ces méthodes peuvent produire la valeur <code>-0</code> si c'est un des paramètres de la fonction. Par exemple, <code>Math.min(-0, +0)</code> vaudra <code>-0</code>. Voir les différentes pages sur ces méthodes pour plus d'informations.</dd> -</dl> -<dl> - <dt> - <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">~</a></code></dt> - <dt> - <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires"><<</a></code></dt> - <dt> - <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">>></a></code></dt> - <dd> - Chacun de ces opérateurs utilise l'algorithme ToInt32. Or, il n'y a qu'une seule représentation possible pour 0 sous forme d'un entier sur 32 bits, c'est pourquoi <code>-0</code> ne pourra pas être « conservé » par une combinaison de ces opérations (même si cette combinaison est équivalente, logiquement, à une identité). Par exemple <code>Object.is(~~(-0), -0)</code> et <code>Object.is(-0 << 2 >> 2, -0)</code> produiront la valeur <code>false</code>.</dd> -</dl> -<p>Il peut être dangereux d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> quand on ne souhaite pas différencier les deux valeurs <code>-0</code> et <code>+0</code>. En revanche, si on souhaite distinguer ces deux valeurs, cette fonction est idéale.</p> diff --git a/files/fr/web/javascript/guide_de_demarrage/index.html b/files/fr/web/javascript/guide_de_demarrage/index.html deleted file mode 100644 index c95ba3d3a2..0000000000 --- a/files/fr/web/javascript/guide_de_demarrage/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Tutoriel pour débuter en JavaScript -slug: Web/JavaScript/guide_de_demarrage -tags: - - Beginner - - JavaScript - - NeedsBeginnerUpdate - - Tutorial -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Pourquoi JavaScript ?</h2> -<p>JavaScript est un langage de programmation puissant, complexe et trop souvent mal compris. Il permet le développement rapide d'applications avec lesquelles l'utilisateur va pouvoir intéragir pour saisir des données et observer le résultat de leur traitement.</p> -<p>L'avantage premier de JavaScript, dont le standard correspondant est connu sous l'appellation ECMAScript, est qu'il est centré sur le navigateur web, aussi il produira un résultat similaire sur toutes les plateformes supportées par le navigateur. Les exemples sur cette page, tout comme Google Maps, fonctionnent sur Linux, OS X and Windows. Avec le nombre toujours grandissant de bibliothèques JavaScript, il est de plus en plus facile de naviguer dans le document, sélectionner des éléments du DOM, créer des animations, gérer les évènements, et développer des applications AJAX. Contrairement à l'hyper médiatisation d'autres technologies promues par divers intérêts propriétaires, JavaScript est réellement le seul langage multi-plateformes côté client qui est à la fois gratuit et universellement adopté.</p> -<h2 id="What_you_should_already_know" name="What_you_should_already_know">Ce que vous devriez déjà savoir</h2> -<p>JavaScript est un langage très facile d'accès. Tout ce dont vous avez besoin pour commencer est d'un éditeur de texte et d'un navigateur web.</p> -<p>Bon nombre d'autres technologies allant au delà de la portée de ce document peuvent êtres intégrées et développées dans la continuité de JavaScript.<br> - Ne vous attendez pas à réaliser une application comme Google Maps dès vos premières lignes en JavaScript.</p> -<h2 id="Getting_Started" name="Getting_Started">Pour commencer</h2> -<p>Il est très facile de débuter en JavaScript. Vous n'avez pas besoin d'avoir des outils de développement installés. Vous n'avez pas besoin de savoir utiliser une console, Make, ou d'utiliser un compilateur. JavaScript est interprété par votre navigateur web. Tout ce dont vous avez besoin est d'enregistrer votre programme dans un fichier texte puis de l'ouvrir dans votre navigateur. C'est tout.</p> -<p>JavaScript est un excellent langage de programmation pour débuter l'apprentissage de langages informatiques. Il permet des retours instantanés pour le nouvel étudiant, et lui fera découvrir des outils dont il ne manquera pas d'apprécier l'utilité dans la vie réelle. C'est un contraste saisissant en comparaison des langages C, C++ et Java qui peuvent être utiles pour certaines applications particulières.</p> -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Les problèmes de compatibilité entre les navigateurs</h2> -<p>Il existe certaines variations concernant la disponibilité des fonctionnalités entre les différents navigateurs. Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari et Opera se comportent différement. <span style="line-height: 1.5;">Vous pouvez atténuer ces fluctuations en utilisants les diverses API JavaScript multi-plateformes disponibles. Ces API fournissent des fonctionnalités communes et masquent certaines des variations entre les navigateurs.</span></p> -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">Comment essayer les exemples</h2> -<p>Les exemples qui suivent possédent des échantillons de code. Il y a de multiples façons d'essayer ces exemples. Si vous posséder votre propre site, vous pouvez les sauvegarder comme nouvelles pages de celui-ci.</p> -<p>Si vous ne possédez pas de site personnel, vous pouvez sauvegarder ces exemples sous forme de fichiers sur votre ordinateur et les ouvrir dans le navigateur que vous utilisez en ce moment.<br> - JavaScript est un langage très simple à utiliser pour commencer la programmation pour cette raison. Vous n'avez pas besoin de compilateur, ou d'un environnement de développement ; votre navigateur est le seul outil dont vous avez besoin pour démarrer.</p> -<p>Vour pouvez également utiliser certains site comme <a href="http://jsfiddle.net/">jsfiddle.net</a> pour tester du code JavaScript.</p> -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Exemple : Capturer le clic de la souris</h2> -<p>Les spécificités de la gestion d'événements (types d'événements, enregistrement des gestionnaires, propagation, etc.) sont trop vastes pour être totalement couverte par ce simple exemple. De plus, celui-ci ne peut présenter la capture du clic souris sans approfondir un minimum le système d'événements JavaScript. Garder à l'esprit que cet exemple va seulement éfleurer l'exhaustivité des événements JavaScript et que si vous souhaitez aller au delà des fonctionnalités basiques qui y sont décrites, lisez en plus à propos du système d'<a href="/fr/docs/Web/JavaScript/Guide/Boucle%C3%89v%C3%A9nements">événements JavaScript</a>.</p> -<p>Les événements « souris » sont un sous-ensemble de la pléthore d'événements déclenchés par le navigateur Web en réponse aux actions de l'utilisateur. Ce qui suit est une liste des événements émis en réponse aux actions d'un utilisateur sur la souris <span style="line-height: 1.5;">:</span></p> -<ul> - <li><code>click</code> - transmis quand un utilisateur clic avec la souris</li> - <li><code>dblclick</code> - transmis quand un utilisateur double-clic avec la souris</li> - <li><code>mousedown</code> - transmis lorsqu'un utilisateur presse un bouton de la souris (la première moitié d'un clic)</li> - <li><code>mouseup</code> - transmis lorsqu'un utilisateur relâche un bouton de la souris (la seconde moitié d'un clic)</li> - <li><code>mouseout</code> - transmis lorsque le pointeur de la souris quitte les limites graphiques d'un objet</li> - <li><code>mouseover</code> - transmis lorsque le pointeur de la souris entre dans les limites graphiques d'un objet</li> - <li><code>mousemove</code> - transmis lorsque le pointeur de la souris bouge à l'intérieur des limites graphiques d'un objet</li> - <li><code>contextmenu</code> - transmis lorsqu'un utilisateur effectue un clic-droit.</li> -</ul> -<p>Noter que dans les versions d'HTML, les événements <em>inline</em> (ceux ajoutés en tant qu'attribut de balise), doivent être écris en minuscule et que les gestionnaires d'événements dans les scripts sont aussi en minuscule.</p> -<p>La méthode la plus simple pour capturer ces événements et enregistrer les gestionnaires - en utilisant le HTML - est de spécificer chaque événement en tant qu'attribut de l'élément désiré.</p> -<pre class="brush:js"> <span onclick="alert('Hello World!');">Cliquer ici</span></pre> -<p>Le code JavaScript que vous souhaitez exécuter peut être disposé en ligne dans l'élément ou bien être placé dans un éléménet <script> au sein de votre page HTML :</p> -<pre class="brush: js"><script> - function clickHandler() { - alert("Hello, World!"); - } -</script> -<span onclick="clickHandler();">Cliquer ici</span></pre> -<p>Il est possible de capturer et d'utiliser l'événement qui se produit. Cela permet au développeur d'accéder à plus d'informations (par exemple : l'objet qui a reçu l'événement, le type de l'événement et le bouton de la souris utilisé). Par exemple :</p> -<pre class="brush: js"><script> - function clickHandler(événement) { - var eType = événement.type; - /* l'instruction suivante est utilisée à des fins de compatibilité */ - /* Firefox renseignera la propriété target de l'événement */ - /* IE renseignera la propriété srcElement */ - var eTarget = événement.target || événement.srcElement; - - alert( "événement capturé (type = " + eType + ", cible = " + eTarget + ")" ); - } -</script> -<span onclick="clickHandler(event);">Cliquer ici</span></pre> -<p>En plus de pouvoir recevoir des événements dans le HTML, il est possible de définir de nouveaux éléments HTML en JavaScript et de définir leurs attributs. L'exemple ci-après permet d'ajouter un élément {{HTMLElement("span")}} au corps de la page et de définir les attributs nécessaires pour qu'il reçoive les événements liés à la souris.</p> -<pre class="brush: js"><body></body> -<script> - function mouseeventHandler(event) { - /* La ligne qui suit est utilisée à des fins de compatibilité */ - /* IE ne fournit pas directement l'événement */ - /* il faut obtenir une référence vers l'événement si nécessaire */ - if (!event) event = window.event; - - /* on récupère le type de l'événement et la cible */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' événement sur l'élément avec l'identifiant '+ eTarget.id); - } - - function onloadHandler() { - /* on récupère une référence à l'élément 'body' de la page */ - var body = document.body; - /* on crée un élément span sur lequel on pourra cliquer */ - var span = document.createElement('span'); - span.id = 'SpanExemple'; - span.appendChild(document.createTextNode ('Cliquer ici !')); - - /* on inscrit l'objet span aux différents événements liés à la souris - les événements sont écrits en minuscules, le nom du gestionnaire d'événement - peut avoir n'importe quelle casse. - */ - span.onmousedown = mouseeventHandler; - span.onmouseup = mouseeventHandler; - span.onmouseover = mouseeventHandler; - span.onmouseout = mouseeventHandler; - - /* on affiche l'élément span sur la page */ - body.appendChild(span); -} - -window.onload = onloadHandler; // on remplace la fonction (on ne l'appelle pas) et donc on ne met pas de parenthèses -</script></pre> -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Exemple : Intercepter un événement clavier</h2> -<p>De la même façon que pour les événements liés à la souris, il est possible d'utiliser les événements JavaScript pour capturer les interactions liées au clavier. Un événement est déclenché à chaque fois qu'une touche du clavier est utilisée.</p> -<p>La liste des événéments disponibles pour le clavier est plus restreinte que celle des événements pour la souris :</p> -<ul> - <li><code>keypress</code> : se produit quand on appuie sur une touche et qu'on la relâche</li> - <li><code>keydown</code> : se produit quand on appuie sur une touche et que celle-ci n'a toujours pas été relâchée</li> - <li><code>keyup</code> : se produit quand la touche du clavier est relâchée</li> - <li>TextInput (disponible pour les navigateurs Webkit au moment de l'écriture) : se produit quand du texte est saisi, que ce soit via un coller du presse-papier, une commande vocale ou une saisie clavier. Cet événement ne sera pas traité dans cet article.</li> -</ul> -<p>Lors d'un événement <code><a class="new " href="/fr/docs/Web/Events/keypress" rel="internal">keypress</a></code>, la valeur Unicode de la touche pressée est enregistrée grâce à la propriété <code>keyCode</code> ou <code><a href="/fr/docs/DOM/event.charCode" rel="internal">charCode</a></code> (mais jamais dans les deux). Si la touche pressée génère un caractère (par exemple 'a'), <code>charCode</code> représentera la valeur du caractère en tenant compte de la casse (<code>charCode</code> gère l'appui simultané avec la touche shift pour écrire en majuscules). Dans les autres cas, le code de la touche est enregistré dans <code>keyCode</code>.</p> -<p>La façon la plus simple d'intercepter les événements clavier est ici aussi d'enregistrer des gestionnaires d'événements (<em>handlers</em>) dans le HTML et de spécifier quels événements doivent être gérés. Par exemple :</p> -<pre class="brush: js"><input type="text" onkeypress="alert ('Coucou monde !');"></pre> -<p>De la même façon qu'avec les événements liés à la souris, le code JavaScript peut être présenté dans la définition de l'attribut ou bien au sein d'un bloc {{HTMLElement("script")}} de la page HTML utilisée :</p> -<pre class="brush: js"><script> - function keypressHandler() { - alert ("Coucou monde !"); - } -</script> - -<input onkeypress="keypressHandler();" /></pre> -<p>De la même façon que pour les événements liés à la souris, on peut enregistrer les détails de l'événement et de la cible de cet événement :</p> -<pre class="brush: js"><script type="text/javascript"> - function keypressHandler(evt) { - var eType = evt.type; // Renverra "keypress" comme type d'événement - /* ici aussi on utilise une instruction pour que le code fonctionne - sur les différents navigateurs (mozilla utilise which et les autre - navigateurs utilisent keyCode. - On peut ici utiliser l'opérateur ternaire pour obtenir le résultat */ - var keyCode = evt.which?evt.which:evt.keyCode; - var eCode = 'keyCode est ' + keyCode; - var eChar = 'charCode est ' + String.fromCharCode(keyCode); // ou evt.charCode - alert ("Événement capturé (type = " + eType + ", valeur Unicode pour la touche = " + eCode + ", valeur ASCII = " + eChar + ")"); - } -</script> -<input onkeypress="keypressHandler(event);" /></pre> -<p>Il est possible de capturer n'importe quel élément clavier en associant un gestionnaire d'événement avec ceux du document grâce à une fonction :</p> -<pre class="brush: js"><script> - document.onkeypress = keypressHandler; - document.onkeydown = keypressHandler; - document.onkeyup = keypressHandler; -</script></pre> -<p>Voici un exemple complet qui illustre comment gérer les événements du clavier :</p> -<pre class="brush: js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var toucheExemple = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; // une autre syntaxe que l'opérateur ternaire s'il n'y a pas de keyCode - var keychar = String.fromCharCode(key); - if (key == toucheExemple) { - metaChar = true; - } - if (key != toucheExemple) { - if (metaChar) { - alert("Combinaison de la touche meta et de " + keychar) - metaChar = false; - } else { - alert("Touche utilisée : " + key); - } - } - } - function metaKeyUp(event) { - var key = event.keyCode || event.which; - if (key == toucheExemple) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> - Essayez de presser une touche ! -</body> -</html></pre> -<h3 id="Bugs_et_spécificités_des_navigateurs">Bugs et spécificités des navigateurs</h3> -<p>Les deux propriétés des différents événements clavier sont <code>keyCode</code> et <code>charCode</code>. Pour faire simple, <code>keyCode</code> fait référence à la touche du clavier qui a été utilisée alors que <code>charCode</code> représente la valeur ASCII du caractère de la touche. Ces deux valeurs peuvent ne pas être les mêmes. Par exemple un 'a' (minuscule) et un 'A' (majuscule) auront le même <code>keyCode</code> car l'utilisateur appuiera sur la même touche du clavier. En revanche, la propriété<code> charCode</code> sera différente car le caractère sera différent.</p> -<p>La navigateurs interprètent <code>charCode</code> de façons différentes. Ainsi, Internet Explorer et Opera ne supportent pas <code>charCode</code>. Cependant, l'information du caractère est bien fourni avec <code>keyCode</code> , mais uniquement lors de l'événement <code>keypress</code>. Lors de <code>keydown</code> et de <code>keyup</code> <code>keyCode</code> contient les informations liées à la touche utilisée. Firefox utilise un terme différent : <code>which</code> pour distinguer le caractère.</p> -<p>Pour plus de précisions sur le fonctionnement des événements liés au clavier, voir la page sur l'API <a href="/fr/docs/Web/API/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">KeyboardEvent</a>.</p> -<p>{{ draft() }}</p> -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Exemple : Déplacer des images</h2> -<p>L'exemple qui suit permet de déplacer une image de Firefox sur la page :</p> -<pre class="brush: js"><!DOCTYPE html> -<html> -<head> -<style> -img { position: absolute; } -</style> - -<script> -window.onload = function() { - - movMeId = document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - - document.onmousedown = coordinates; - document.onmouseup = mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - - // sous IE e.srcElement définira l'élément cible alors que pour Firefox ce sera e.target - // Ces deux propriétés renvoient l'élément HTML pour lequel s'est produit l'événement. - - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove = moveImage; - return false; - } - return false; - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> - <p>Vous pouvez déplacer l'image sur cette page.</p> -</body> - -</html></pre> -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Exemple : Redimensionner des éléments</h2> -<div> - Voici un exemple de code qui permet de redimensionner une image (note : seul le rendu final est redimensionné, l'image de base ne sera pas redimensionnée).</div> -<pre class="brush: js"><!DOCTYPE html> - <html> - <head> - <style> - #resizeImage { - margin-left: 100px; - } - </style> - <script> - window.onload = function() { - - var resizeId = document.getElementById("resizeImage"); - var resizeStartCoordsX, - resizeStartCoordsY, - resizeEndCoordsX, - resizeEndCoordsY; - - var resizeEndCoords; - var resizing = false; - - document.onmousedown = coordinatesMousedown; - document.onmouseup = coordinatesMouseup; - - function coordinatesMousedown(e) { - if (e == null) { - e = window.event; - } - - var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; - - if (element.id == "resizeImage") { - resizing = true; - resizeStartCoordsX = e.clientX; - resizeStartCoordsY = e.clientY; - } - return false; - } - - function coordinatesMouseup(e) { - if (e == null) { - e = window.event; - } - - if (resizing === true) { - var currentImageWidth = parseInt(resizeId.width); - var currentImageHeight = parseInt(resizeId.height); - - resizeEndCoordsX = e.clientX; - resizeEndCoordsY = e.clientY; - - resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; - resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; - - resizing = false; - } - return false; - } - } - </script> - </head> - - <body> - <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" -width="64" height="64"> - <p>Cliquer sur l'image et étirer pour la redimensionner.</p> - </body> - - </html></pre> -<div> - </div> -<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Exemple : Tracer des lignes</h2> -<pre class="brush: js"><!DOCTYPE html> -<html> -<head> -<script> -function dessinerLigne(ax, ay, bx, by) -{ - if(ay > by) - { - bx = ax+bx; - ax = bx-ax; - bx = bx-ax; - by = ay+by; - ay = by-ay; - by = by-ay; - } - var calc = Math.atan((ay-by)/(bx-ax)); - calc = (calc*180)/Math.PI; - var length = Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); - document.body.innerHTML += "<div id='ligne' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" -} -</script> -</head> -<body onload="dessinerLigne(200,400,500,900);"> <!-- Remplacez les coordonnées que vous souhaitez utiliser --> -</body> -</html></pre> diff --git a/files/fr/web/javascript/héritage_et_chaîne_de_prototypes/index.html b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html index 255516427a..255516427a 100644 --- a/files/fr/web/javascript/héritage_et_chaîne_de_prototypes/index.html +++ b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html diff --git a/files/fr/web/javascript/introduction_à_javascript_orienté_objet/index.html b/files/fr/web/javascript/introduction_à_javascript_orienté_objet/index.html deleted file mode 100644 index c778187586..0000000000 --- a/files/fr/web/javascript/introduction_à_javascript_orienté_objet/index.html +++ /dev/null @@ -1,372 +0,0 @@ ---- -title: Introduction à JavaScript orienté objet -slug: Web/JavaScript/Introduction_à_JavaScript_orienté_objet -tags: - - Encapsulation - - Intermédiaire - - JavaScript - - OOP - - Object - - Orienté objet -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<div>{{jsSidebar("Introductory")}}</div> - -<p>JavaScript possède un grand potentiel pour la programmation orientée objet (aussi appelée {{Glossary("OOP")}}). Cet article débutera par une introduction à la programmation orientée objet puis abordera le modèle objet de JavaScript et finira par les concepts de la programmation orientée objet appliquée à JavaScript.</p> - -<div class="note"> -<p><strong>Note :</strong> Une nouvelle façon de créer des objets a été introduite avec ECMAScript 2015 (ES6) et n'est pas décrite ici. Il s'agit <a href="/fr/docs/Web/JavaScript/Reference/Classes">des classes</a>.</p> -</div> - -<h2 id="Un_aperçu_de_JavaScript">Un aperçu de JavaScript</h2> - -<p>Si vous n'êtes pas certain de connaître certains concepts comme les variables, les types, les fonctions, et les portées vous pouvez lire <a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript">Une réintroduction à JavaScript</a>. Vous pouvez également consulter le <a href="/fr/docs/Web/JavaScript/Guide">guide JavaScript</a>.</p> - -<h2 id="La_programmation_orientée_objet">La programmation orientée objet</h2> - -<p>La programmation orientée objet est un paradigme de programmation qui se base sur une abstraction du monde réel pour créer des modèles. Plusieurs techniques sont utilisées, provenant de paradigmes précédents, comme la modularité, le polymorphisme, ou l'encapsulation. Aujourd'hui, de nombreux langages de programmation (Java, JavaScript, C#, C++, Python, PHP, Ruby et Objective-C par exemple) utilisent la programmation orientée objet (OOP en anglais pour <em>Object-Oriented Programmation</em>).</p> - -<p>La programmation orientée objet peut être vue comme une façon de concevoir un ou des logiciel(s) grâce à un ensemble d'objets qui coopèrent plutôt que d'utiliser, avec une approche plus traditionnelle, un ensemble de fonctions ou encore une liste d'instructions à envoyer à un ordinateur. En programmation orientée objet, chaque objet est capable d'envoyer et de recevoir des messages provenant d'autres objets, de traiter des données. Chaque objet peut être compris comme une entité indépendante avec un rôle distinct.</p> - -<p>La programmation orientée objet a pour but de permettre une plus grande flexibilité et maintenabilité du code. Elle est populaire pour les projets logiciels de grande ampleur. Étant donné l'accent mis sur la modularité, le code orienté objet est censé être plus simple à développer, plus facile à reprendre, à analyser et permettre de répondre à des situations complexes en comparaison à d'autres méthodes de programmation moins modulaires.</p> - -<h2 id="Terminologie">Terminologie</h2> - -<dl> - <dt>{{Glossary("Namespace","Espace de noms")}}</dt> - <dd>Un conteneur qui permet aux développeurs d'empaqueter les différentes fonctionnalités d'un programme sous un même nom d'application.</dd> - <dt>{{Glossary("Class", "Classe")}}</dt> - <dd>Définit les caractéristiques de l'objet.</dd> - <dt>{{Glossary("Objet")}}</dt> - <dd>Une instance (un « exemplaire ») d'une classe.</dd> - <dt>{{Glossary("Property", "Propriété")}}</dt> - <dd>Une caractéristique d'un objet (sa couleur par exemple).</dd> - <dt>{{Glossary("Méthode")}}</dt> - <dd>Une capacité d'un objet (changer de couleur par exemple).</dd> - <dt>{{Glossary("Constructeur")}}</dt> - <dd>Une méthode appelée au moment de l'instantiation.</dd> - <dt>{{Glossary("Héritage")}}</dt> - <dd>Une classe peut hériter des caractéristiques et des fonctionnalités d'une autre classe.</dd> - <dt>{{Glossary("Encapsulation")}}</dt> - <dd>Une classe définit uniquement les caractéristiques de son objet, une méthode définit uniquement la façon dont elle s'exécute. On regroupe donc les données et les méthodes qui utilisent ces données.</dd> - <dt>{{Glossary("Abstraction")}}</dt> - <dd>La conjonction entre l'utilisation de l'héritage, de méthodes ou de propriétés d'un objet pour simuler un modèle de la réalité.</dd> - <dt>{{Glossary("Polymorphisme")}}</dt> - <dd>Poly signifie « plusieurs » et morphisme signifie « formes ». Cela signifie que différentes classes peuvent définir la même méthode ou la même propriété.</dd> -</dl> - -<p>Pour une description plus étendue, lire l'article {{interwiki("wikipedia","Programmation_orientée_objet","Programmation orientée objet")}} de Wikipédia.</p> - -<h2 id="Programmation_orientée_prototype">Programmation orientée prototype</h2> - -<p>La programmation orientée prototype est un style de programmation orientée objet qui n'utilise pas les classes. La réutilisation des propriétés d'un objet (appelée héritage pour les langages à classe) est effectuée via des objets qui seront des prototypes pour d'autres objets. Parmi les autres noms de ce modèle, on retrouve la programmation sans classe ou la programmation à base d'instances.</p> - -<p>L'exemple premier d'un langage utilisant les prototypes est le langage de programmation {{interwiki("wikipedia", "Self_(langage)", "Self")}}, développé par David Ungar et Randall Smith. Toutefois, ce modèle de programmation s'est popularisé à différents langages comme JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quand le framework Viewer est utilisé pour manipuler des composants Morphic), et d'autres encore.</p> - -<h2 id="La_programmation_orientée_objet_avec_JavaScript">La programmation orientée objet avec JavaScript</h2> - -<h3 id="Les_espaces_de_noms">Les espaces de noms</h3> - -<p>Un espace de noms est un conteneur qui permet de regrouper l'ensemble des fonctionnalités d'une application sous un un nom unique, spécifique à cette application. <strong>En JavaScript, un espace de noms est un objet comme les autres qui contient des méthodes et des propriétés.</strong></p> - -<div class="note"> -<p><strong>Note :</strong> il est important de bien faire la différence avec d'autres langages ou les espaces de noms et les objets sont des entités distinctes. En JavaScript, ce n'est pas le cas.</p> -</div> - -<p>Pourquoi créer un espace de noms en JavaScript ? La réponse est simple, on peut ainsi disposer d'un seul objet global qui contient l'ensemble des variables, méthodes et fonctions en tant que propriétés. L'utilisation d'un tel objet permet ainsi de réduire le risque de conflit (utilisation d'un même nom) au sein d'une application qui en utilise une autre.</p> - -<p>Par exemple : on peut créer un objet global MONAPPLICATION :</p> - -<pre class="brush: js">// espace de nom global -var MONAPPLICATION = MONAPPLICATION || {};</pre> - -<p>Dans l'exemple ci-dessus, on vérifie d'abord que MONAPPLICATION n'est pas déjà défini (dans ce fichier ou dans un autre). S'il est déjà défini, on l'utilise, sinon on crée un objet vide MONAPPLICATION qui recevra les différentes méthodes, fonctions et variables à encapsuler.</p> - -<p>Il est également possible de créer des espaces de noms à un niveau inférieur (une fois qu'on a bien défini le <em>namespace</em> global) :</p> - -<pre class="brush: js">// espace de noms "fils" -MONAPPLICATION.event = {};</pre> - -<p>L'exemple ci-dessous permet de créer un espace de noms et de lui ajouter des variables, des fonctions et des méthodes :</p> - -<pre class="brush: js">// On crée un conteneur MONAPPLICATION.méthodesCommunes pour regrouper certaines méthodes -MONAPPLICATION.méthodesCommunes = { - regExPourNom: "", // on définit une expression rationnelle pour un nom - regExPourTéléphone: "", // une autre pour un numéro de téléphone - validerNom: function(nom){ - // On valide le nom en utilisant - // la regexp par exemple - }, - - validerNumTéléphone: function(numTéléphone){ - // on valide le numéro de téléphone - } -} - -// On utilise un conteneur pour les événements -MONAPPLICATION.event = { - addListener: function(el, type, fn) { - // le corps de la méthode - }, - removeListener: function(el, type, fn) { - // le corps de la méthode - }, - getEvent: function(e) { - // le corps de la méthode - } - - // Il est possible d'ajouter des méthodes et des propriétés -} - -// Exemple de syntaxe pour utiliser la méthode addListener : -MONAPPLICATION.event.addListener("monÉlément", "type", callback);</pre> - -<h3 id="Objets_natifs_standard">Objets natifs standard</h3> - -<p>JavaScript dispose de plusieurs objets essentiels inclus dans le langage. On y trouve entre autres les objets <code>Math</code>, <code>Object</code>, <code>Array</code>, et <code>String</code>. L'exemple ci-après illustre comment utiliser l'objet <code>Math</code> pour obtenir un nombre aléatoire en utilisant la méthode <code>random()</code>.</p> - -<pre class="brush: js">console.log(Math.random()); -</pre> - -<div class="note"><strong>Note :</strong> Cet exemple, ainsi que les suivants, utilisent une fonction {{domxref("console.log()")}} définie globalement. La fonction <code>console.log </code>n'est pas, à proprement parler, une fonctionnalité de JavaScript en tant que telle mais est implémentée dans la plupart des navigateurs à des fins de débogage.</div> - -<p>Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">les objets globaux</a> pour une liste de ces objets essentiels.</p> - -<p>En JavaScript, chaque objet est une instance de l'objet <a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Object"><code>Object</code></a> et hérite donc des propriétés et des méthodes de ce dernier.</p> - -<h3 id="Objets_créés_sur_mesure">Objets créés sur mesure</h3> - -<h4 id="Le_constructeur">Le constructeur</h4> - -<p>JavaScript est un langage utilisant les prototypes, il ne dispose pas d'une instruction pour déclarer une classe (à la différence de C++ ou Java). Cela peut sembler déroutant pour les développeurs utilisant d'autres langages de classe. JavaScript utilise des fonctions comme constructeurs pour définir un objet. On définit les propriétés et méthodes d'un objet en définissant une fonction qui sera utilisée par la suite pour construire l'objet souhaité. Ici, on définit un constructeur <code>Personne</code>.</p> - -<pre class="brush: js">var Personne = function () { } -</pre> - -<div class="note"> -<p><strong>Note :</strong> Par convention, le nom d'un constructeur commence par une majuscule. Cela permet de différencier les fonctions classiques des constructeurs et de mieux les utiliser.</p> -</div> - -<h4 id="L'instance">L'instance</h4> - -<p>Pour créer une nouvelle instance, on utilise l'instruction <code>new <em>objet</em></code>, et on affecte le résultat de cette expression à une variable qu'on utilisera par la suite. Il est également possible d'utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create"><code>Object.create</code></a> afin de créer une instance non initialisée.</p> - -<p>Dans l'exemple qui suit, on utilise le constructeur <code>Personne</code> définit précédemment et on crée deux instances grâce à l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new"><code>new</code></a> (<code>personne1</code> et <code>personne2</code>).</p> - -<pre class="brush: js">var personne1 = new Personne(); -var personne2 = new Personne(); -</pre> - -<div class="note"><strong>Note:</strong> Voir aussi {{jsxref("Object.create()")}} pour une autre méthode d'instanciation.</div> - -<h4 id="Le_constructeur_(suite)">Le constructeur (suite)</h4> - -<p>Le constructeur est la méthode appelée au moment de l'instanciation (l'instant où l'exemplaire de l'objet est créé). En JavaScript, la déclaration vue précédemment suffit à définir un constructeur. Chaque action déclarée dans le constructeur est executée au moment de l'instanciation.</p> - -<p>Le constructeur est utilisé afin de définir les propriétés d'un objet et d'appeler les méthodes nécessaires pour préparer l'objet.</p> - -<p>Dans l'exemple ci-dessous, le constructeur de la classe <code>Personne</code> affiche un message dans la console lorsqu'un objet <code>Personne</code> est instancié.</p> - -<pre class="brush: js">function Personne() { - console.log('Nouvel objet Personne créé'); -} - -var personne1 = new Personne(); -// affiche "Nouvel objet Personne créé" dans la console -var personne2 = new Personne(); -// affiche "Nouvel objet Personne créé" dans la console -</pre> - -<h4 id="Les_propriétés_(ou_attributs)">Les propriétés (ou attributs)</h4> - -<p>Les propriétés sont des variables appartenant à un objet. Les propriétés d'un objet peuvent être définies au sein du prototype afin que tous les objets qui en héritent puissent disposer de cette propriété via la chaîne de prototypes.</p> - -<p>Dans le contexte d'un objet, l'accès à ses propriétés se fait grâce au mot-clé <code>this</code>, qui fait référence à l'objet courant. L'accès (en écriture ou lecture) à une propriété depuis un autre objet se fait grâce à la syntaxe <code>nomInstance.propriété</code>. Cette syntaxe est la même pour d'autres langages comme C++, Java, etc.</p> - -<p>Dans l'exemple qui suit, on crée la propriété <code>nom</code> pour le constructeur <code>Personne</code> et on définit sa valeur lors de l'instanciation :</p> - -<pre class="brush: js">function Personne(nom) { - this.nom = nom; - console.log('Nouvel objet Personne créé'); -} - -var personne1 = new Personne('Alice'); -var personne2 = new Personne('Bob'); - -//on affiche le nom de personne1 -console.log('personne1 est ' + personne1.nom); // personne1 est Alice -console.log('personne2 est ' + personne2.nom); // personne2 est Bob -</pre> - -<h4 id="Les_méthodes">Les méthodes</h4> - -<p>Les méthodes sont également des propriétés d'un objet : ce sont des fonctions plutôt que des objets. L'appel à une méthode se fait de la même façon que pour l'accès à une propriété, les parenthèses <code>()</code> en plus, éventuellement avec des arguments. Pour définir une méthode dont disposeront tous les objets qu'on souhaite définir, il faut l'assigner comme propriété de la propriété <code>prototype</code> de l'objet. Le nom auquel est assigné la fonction est le nom de la méthode.</p> - -<p>Dans l'exemple qui suit, on définit et utilise la méthode <code>direBonjour()</code> pour un objet <code>Personne</code>.</p> - -<pre class="brush: js">function Personne(nom) { - this.nom = nom; -} - -Personne.prototype.direBonjour = function() { - console.log("Bonjour, je suis " + this.nom); -}; - -var personne1 = new Personne('Alice'); -var personne2 = new Personne('Robert'); - -// on appelle la méthode. -personne1.direBonjour(); // Bonjour, je suis Alice -</pre> - -<p>En JavaScript, les méthodes sont des fonctions classiques simplement liées à un objet en tant que propriété. On peut donc appeler la méthode « en dehors de l'objet ». Par exemple :</p> - -<pre class="brush: js">function Personne(nom) { - this.nom = nom; -} - -Personne.prototype.afficherNom = function() { - console.log("Je suis "+this.nom); -}; - -var personne1 = new Personne('Gustave'); -var donnerUnNom = personne1.afficherNom; - -personne1.afficherNom(); // 'Je suis Gustave' -donnerUnNom(); // undefined -console.log(donnerUnNom === personne1.afficherNom); // true -console.log(donnerUnNom === Personne.prototype.afficherNom); // true -donnerUnNom.call(personne1); // 'Je suis Gustave' -</pre> - -<p>On voit ici plusieurs concepts. Tout d'abord, il n'existe pas de méthode propre à un objet car toutes les références à la méthode vont utiliser la fonction définie pour le prototype. Ensuite, JavaScript fait un lien entre le contexte de l'objet courant et la variable <strong>this</strong> quand une fonction est appelée en tant que propriété d'un objet. Ceci est équivalent à utiliser la fonction <code>call</code> :</p> - -<pre class="brush: js">donnerUnNom.call(personne1); // 'Gustave' -</pre> - -<div class="note"><strong>Note :</strong> Voir les pages <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/call">Function.call</a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/apply">Function.apply</a> pour plus d'informations. Voir également la page sur l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a> et les différents contextes.</div> - -<h4 id="L'héritage">L'héritage</h4> - -<p>L'héritage permet de créer un objet spécialisé qui découle d'un autre objet. (<em>JavaScript ne supporte que l'héritage unique : c'est-à-dire qu'un objet peut spécialiser un autre objet mais ne peut pas en spécialiser plusieurs à la fois</em>). L'objet spécialisé est appelé l'objet fils et l'objet générique appelé parent. Pour indiquer un lien d'héritage en JavaScript, on assigne une instance de l'objet parent à la propriété <code>prototype</code> de l'objet fils. Grâce aux navigateurs récents, il est également possible d'utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create#H.C3.A9ritage_avec_Object.create">Object.create</a> afin d'implémenter l'héritage.</p> - -<div class="note"> -<p><strong>Note :</strong> Il est également nécessaire de renseigner la propriété <code>prototype.constructor</code> avec le constructeur de la classe parente ! Voir la page de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/prototype">Object:prototype</a> pour plus d'informations.</p> -</div> - -<p>Dans les exemples qui suivent, on définit le constructeur <code>Étudiant</code> pour créer des objets bénéficiant des propriétés d'un objet <code>Personne</code>. Pour cet objet fils, on redéfinit la méthode <code>direBonjour()</code> et on ajoute la méthode <code>aurevoir()</code>.</p> - -<pre class="brush: js">// Le constructeur Personne -var Personne = function(nom) { - this.nom = nom; -}; - -Personne.prototype.marcher = function(){ - console.log("Je marche !"); -}; -Personne.prototype.direBonjour = function(){ - console.log("Bonjour, je suis "+this.nom); -}; - -// Le constructeur Étudiant -function Étudiant(nom, sujet) { - // On appelle le constructeur parent - // pour profiter des propriétés définies dans la fonction - Personne.call(this, nom); - this.sujet = sujet; -} - -// On déclare l'héritage pour bénéficier de la chaîne de prototypes -// Attention à ne pas utiliser "new Personne()". Ceci est incorrect -// on ne peut pas fournir l'argument "nom". C'est pourquoi on appelle -// Personne avant, dans le constructeur Étudiant. -Étudiant.prototype = Object.create(Personne.prototype); - -// on corrige le constructeur qui pointe sur celui de Personne -Étudiant.prototype.constructor = Étudiant; - -// on remplace la méthode direBonjour pour l'étudiant -Étudiant.prototype.direBonjour = function(){ - console.log("Bonjour, je suis "+ this.nom + ". J'étudie " + this.sujet + "."); -}; - -// on ajoute la méthode aurevoir -Étudiant.prototype.aurevoir = function(){ - console.log('Au revoir'); -}; - -var étudiant1 = new Étudiant("Jean", "la physique appliquée"); -étudiant1.direBonjour(); -étudiant1.marcher(); -étudiant1.aurevoir(); - -// on vérifie l'héritage -console.log(étudiant1 instanceof Personne); // true -console.log(étudiant1 instanceof Étudiant); // true -</pre> - -<p>Les anciens navigateurs peuvent ne pas disposer de la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create"><code>Object.create</code></a>. Pour résoudre ce problème, il est possible d'utiliser une prothèse d'émulation (<em>polyfill</em> ou <em>shim</em>) comme :</p> - -<pre class="brush: js">function createObject(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// Exemple d'utilisation: -Étudiant.prototype = createObject(Personne.prototype);</pre> - -<div class="note"><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create">Object.create</a> pour plus d'informations et pour une prothèse d'émulation pour les anciens navigateurs.</div> - -<p class="note">Il peut parfois être utile de vérifier la valeur de this utilisée au sein de la fonction pour appliquer les bons traitements. Par exemple, on pourra utiliser</p> - -<pre class="brush: js">var Person = function(nom) { - if (this instanceof Personne) { - this.nom = nom; - } else { - return new Personne(nom); - } -} -</pre> - -<h4 id="L'encapsulation">L'encapsulation</h4> - -<p>Dans l'exemple précédent, <code>Étudiant</code> n'a pas besoin de réimplémenter la méthode <code>marcher() </code>de <code>Personne</code> : il peut l'utiliser directement. L'encapsulation signifie qu'on a seulement besoin d'implémenter les changements (ex : <code>direBonjour</code>) par rapport à l'objet parent, le reste sera hérité naturellement et pourra être utilisé par l'objet fils. Chaque prototype regroupe les données et les méthodes dans une seule et même unitée.</p> - -<p>D'autres langages permettent de masquer des informations grâce des méthodes/propriétés privées et/ou protégées. Bien qu'il soit possible de simuler ce comportement en JavaScript, cet aspect n'est pas obligatoire en programmation orientée objet.</p> - -<h4 id="L'abstraction">L'abstraction</h4> - -<p>L'abstraction permet de modéliser le problème qu'on souhaite résoudre. On peut créer un modèle abstrait en utilisant l'héritage (autrement dit une spécialisation des objets) et la composition. Comme on l'a vu JavaScript permet de créer un héritage (simple) entre objets et la composition est obtenue car les propriétés d'un objet peuvent elles-mêmes être des objets.</p> - -<p>L'objet JavaScript <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function"><code>Function</code></a> hérite de <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">Object</a></code> (on a l'héritage) et la propriété <code>Function.prototype</code> est une instance d'<code>Object</code> (on a la composition)</p> - -<pre class="brush: js">var toto = function(){}; -console.log('toto est une Function : ' + (toto instanceof Function) ); -console.log('toto.prototype est un Object : ' + (toto.prototype instanceof Object) ); -</pre> - -<h4 id="Le_polymorphisme">Le polymorphisme</h4> - -<p>Le polymorphisme est rendu possible par l'héritage des méthodes. Les différents objets fils peuvent définir différentes méthodes avec le même nom. Ainsi si on itère sur une collection d'objets dont on sait que ces objets sont des instances du type parent, on pourra utiliser la méthode nommée qui utilisera la méthode définie pour l'objet fils.</p> - -<h2 id="Notes">Notes</h2> - -<p>Les techniques présentées ici ne sont qu'un fragment des techniques utilisables en JavaScript. JavaScript, grâce à sa nature prototypale, est très flexible et permet d'implémenter différentes façons de programmer avec des objets.</p> - -<p>Les techniques présentées ici ne tirent pas partie de l'implémentation des objets d'autres langages ni de bidouilles spécifiques au langage. Il existe d'autres techniques permettant de construire différentes architectures objet en JavaScript mais celles-ci dépassent le cadre de cet article.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a> sur MDN</li> - <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_objet">Programmation orientée objet</a></li> - <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype">Programmation orientée prototype</a></li> - <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Encapsulation_(programmation)">l'encapsulation</a></li> - <li><a href="https://davidwalsh.name/javascript-objects">Aperçu de JavaScript pour la POO</a>, une série d'articles en anglais écrite par Kyle Simpson</li> - <li>{{jsxref("Function.prototype.call()")}}</li> - <li>{{jsxref("Function.prototype.apply()")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li> -</ul> diff --git a/files/fr/web/javascript/gestion_de_la_mémoire/index.html b/files/fr/web/javascript/memory_management/index.html index b770d41ba3..b770d41ba3 100644 --- a/files/fr/web/javascript/gestion_de_la_mémoire/index.html +++ b/files/fr/web/javascript/memory_management/index.html diff --git a/files/fr/web/javascript/reference/a_propos/index.html b/files/fr/web/javascript/reference/about/index.html index 21628cac8b..21628cac8b 100644 --- a/files/fr/web/javascript/reference/a_propos/index.html +++ b/files/fr/web/javascript/reference/about/index.html diff --git a/files/fr/web/javascript/reference/classes/class_fields/index.html b/files/fr/web/javascript/reference/classes/public_class_fields/index.html index 24e654a85a..24e654a85a 100644 --- a/files/fr/web/javascript/reference/classes/class_fields/index.html +++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.html diff --git a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html new file mode 100644 index 0000000000..8d47b5dc35 --- /dev/null +++ b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html @@ -0,0 +1,292 @@ +--- +title: Fonctionnalités dépréciées +slug: JavaScript/Reference/Annexes/Fonctionnalités_dépréciées +tags: + - Deprecated + - JavaScript + - Obsolete + - Reference +translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features +--- +<div>{{JsSidebar("More")}}</div> + +<p>Cette page liste les fonctionnalités de JavaScript qui sont dépréciées (<em>deprecated</em>) (c'est-à-dire que ces fonctionnalités sont toujours disponibles mais qu'il est prévu de les retirer) et les fonctionnalités obsolètes (celles qui ne sont plus utilisables).</p> + +<h2 id="Fonctionnalités_dépréciées">Fonctionnalités dépréciées</h2> + +<p>Ces fonctionnalités dépréciées peuvent toujours être utilisées mais avec une grande attention car elles pourront être supprimées complètements à l'avenir. En règle général, il faut les retirer du code qui les utilise.</p> + +<h3 id="RegExp_Properties" name="RegExp_Properties">Propriétés de <code>RegExp</code></h3> + +<p>Les propriétés suivantes sont dépréciées. Cela n'affecte pas le comportement de {{jsxref("Objets_globaux/String/replace", "replace", "Specifying_a_string_as_a_parameter")}} lorsqu'on utilise une chaîne de caractères en paramètre de remplacement :</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("RegExp.n", "$1-$9")}}</td> + <td> + <p>Les sous-chaînes correspondantes s'il y en a.<br> + <strong>Attention : </strong>Utiliser ces propriétés peut causer certains problèmes car les extensions des navigateurs peuvent les modifier. À éviter !</p> + </td> + </tr> + <tr> + <td>{{jsxref("RegExp.input", "$_")}}</td> + <td>Voir <code>input</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.multiline", "$*")}}</td> + <td>Voir <code>multiline</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "$&")}}</td> + <td>Voir <code>lastMatch</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "$&")}}</td> + <td>Voir <code>lastParen</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.leftContext", "$`")}}</td> + <td>Voir <code>leftContext</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.rightContext", "$'")}}</td> + <td>Voir <code>rightContext</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.input", "input")}}</td> + <td>La chaîne par rapport à laquelle on recherche une correspondance grâce à l'expression rationnelle.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td> + <td>Les derniers caractères correspondants.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td> + <td>La dernière sous-chaîne (groupe entre parenthèses) correspondante si elle existe.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td> + <td>La sous-chaîne qui précède la correspondance la plus récente.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td> + <td>La sous-chaîne qui suit la correspondance la plus récente.</td> + </tr> + </tbody> +</table> + +<p>Les propriétés qui suivent sont désormais des propriétés des instances de <code>RegExp</code> et ne sont plus des propriétés de l'objet <code>RegExp</code> :</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("RegExp.global", "global")}}</td> + <td>Permet d'utiliser une expression rationnelle pour relever l'ensemble des correspondances ou uniquement la première.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td> + <td>Définit si la casse doit être ignorée ou non lors de la recherche d'une correspondance.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td> + <td>L'index à partir duquel chercher la prochaine correspondance.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.multiline", "multiline")}}</td> + <td>Définit si la recherche doit s'effectuer sur une seule ligne ou plusieurs.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.source", "source")}}</td> + <td>Le texte du motif.</td> + </tr> + </tbody> +</table> + +<h3 id="RegExp_Methods" name="RegExp_Methods">Méthodes de <code>RegExp</code></h3> + +<ul> + <li>La méthode <code>compile</code> est dépréciée.</li> + <li>La méthode <code>valueOf</code> n'est plus spécifiquement liée à <code>RegExp</code>. Utilisez {{jsxref("Object.valueOf()")}}.</li> +</ul> + +<h3 id="Propriétés_de_Function">Propriétés de <code>Function</code></h3> + +<ul> + <li>Les propriétés {{jsxref("Objets_globaux/Function/caller", "caller")}} et {{jsxref("Objets_globaux/Function/arguments", "arguments")}} sont dépréciées car elles permettaient de fuiter l'appelant de la fonction. En lieu et place de la propriété <code>arguments</code>, c'est l'objet {{jsxref("Fonctions/arguments", "arguments")}} qui doit être utilisée (notamment dans les fermetures).</li> +</ul> + +<h3 id="Générateur_historique">Générateur historique</h3> + +<ul> + <li>{{jsxref("Instructions/Legacy_generator_function", "L'instruction pour le générateur historique")}} et {{jsxref("Opérateurs/Legacy_generator_function", "l'expression de fonction du générateur historique")}} sont dépréciées. Il faut utiliser {{jsxref("Instructions/function*", "L'instruction function* ")}} et {{jsxref("Opérateurs/function*", "l'expression function*")}} à la place.</li> + <li>{{jsxref("Opérateurs/Compréhensions_de_tableau", "Les compréhensions de tableaux JS1.7/JS1.8", "#Diff.C3.A9rences_avec_les_compr.C3.A9hensions_pr.C3.A9c.C3.A9dentes_JS1.7.2FJS1.8")}} et {{jsxref("Opérateurs/Compréhensions_de_générateur", "les compréhensions de générateurs JS1.7/JS1.8", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} sont dépréciées.</li> +</ul> + +<h3 id="Itérateur">Itérateur</h3> + +<ul> + <li>{{jsxref("Objets_globaux/StopIteration", "StopIteration")}} est déprécié.</li> + <li>{{jsxref("Objets_globaux/Iterator", "Iterator")}} est déprécié.</li> +</ul> + +<h3 id="Méthode_d'Object">Méthode d'<code>Object</code></h3> + +<ul> + <li>{{jsxref("Object.watch", "watch")}} et {{jsxref("Object.unwatch", "unwatch")}} sont dépréciés. L'objet {{jsxref("Proxy")}} doit être utilisé à la place.</li> + <li><code>__iterator__</code> est déprécié.</li> + <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} est déprécié. {{jsxref("Proxy")}} doit être utilisé à la place.</li> +</ul> + +<h3 id="Méthodes_de_Date">Méthodes de <code>Date</code></h3> + +<ul> + <li>{{jsxref("Objets_globaux/Date/getYear", "getYear")}} et {{jsxref("Objets_globaux/Date/setYear", "setYear")}} sont impactés par le « bug de l'an 2000 » et ont été remplacés par {{jsxref("Objets_globaux/Date/getFullYear", "getFullYear")}} et {{jsxref("Objets_globaux/Date/setFullYear", "setFullYear")}}.</li> + <li>{{jsxref("Objets_globaux/Date/toISOString", "toISOString")}} doit être utilisé à la place de la méthode {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} qui est dépréciée.</li> + <li>{{jsxref("Objets_globaux/Date/toLocaleFormat", "toLocaleFormat")}} est dépréciée.</li> +</ul> + +<h3 id="Fonctions">Fonctions</h3> + +<ul> + <li>{{jsxref("Opérateurs/Expression_de_fermetures", "Les expressions de fermetures", "", 1)}} sont dépréciées. Il faut utiliser {{jsxref("Opérateurs/L_opérateur_function", "function")}} ou {{jsxref("Fonctions/Fonctions_fléchées", "les fonctions fléchées", "", 1)}} à la place.</li> +</ul> + +<h3 id="Proxy">Proxy</h3> + +<ul> + <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> et <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> sont dépréciées. L'API {{jsxref("Objets_globaux/Proxy", "Proxy")}} doit être utilisée à la place.</li> + <li>Les trappes de captures suivantes sont obsolètes : + <ul> + <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li> + <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li> + <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li> + <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li> + </ul> + </li> +</ul> + +<h3 id="Escape_Sequences" name="Escape_Sequences">Séquences d'échappement</h3> + +<ul> + <li>Les séquences d'échappement octales (\ suivi par un, deux ou trois chiffres octaux) sont dépréciées pour les chaînes de caractères et les littéraux d'expressions rationnelles.</li> + <li>Les fonctions {{jsxref("Objets_globaux/escape", "escape")}} et {{jsxref("Objets_globaux/unescape", "unescape")}} sont dépréciées. Ce sont les méthodes et objets {{jsxref("Objets_globaux/encodeURI", "encodeURI")}}, {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Objets_globaux/decodeURI", "decodeURI")}} ou {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent")}} qui doivent être utilisées pour encoder/décoder les séquences d'échappement des caractères spéciaux.</li> +</ul> + +<h3 id="Méthodes_de_String">Méthodes de <code>String</code></h3> + +<ul> + <li><a href="/fr/docs/tag/HTML%20wrapper%20methods">Les méthodes d'enrobage HTML</a> telles que {{jsxref("String.prototype.fontsize")}} et {{jsxref("String.prototype.big")}} sont dépréciées.</li> + <li>{{jsxref("String.prototype.quote")}} a été retiré de Firefox 37.</li> + <li>Le paramètre non-standard <code>flags</code> de {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, et {{jsxref("String.prototype.replace")}} sont dépréciés.</li> + <li>{{jsxref("String.prototype.substr")}} ne sera sans doute pas retiré prochainement mais il est défini dans l'<a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.substr">annexe B du standard ECMA-262</a> dont l'introduction précise clairement que « les développeurs ne devraient pass utiliser ou présupposer l'existence de ces fonctionnalités et de ces comportements lors de l'écriture de nouveau code ECMAScript ».</li> +</ul> + +<h2 id="Fonctionnalités_obsolètes">Fonctionnalités obsolètes</h2> + +<p>Ces fonctionnalités sont obsolètes et ont intégralement été retirées de JavaScript. Elles ne peuvent plus être utilisées.</p> + +<h3 id="Object">Object</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("Objets_globaux/Object/count", "__count__")}}</td> + <td>Renvoie le nombre de propriétés énumérables d'un objet défini par l'utillisateur.</td> + </tr> + <tr> + <td>{{jsxref("Objets_globaux/Object/Parent", "__parent__")}}</td> + <td>Pointe vers le contexte d'un objet.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td> + <td>Évalue une chaine de caractères étant du code JavaScript, dans le contexte de l'objet indiqué.</td> + </tr> + <tr> + <td>{{jsxref("Object.observe()")}}</td> + <td>Observe les modifications apportées à un objet de façon asynchrone.</td> + </tr> + <tr> + <td>{{jsxref("Object.unobserve()")}}</td> + <td>Retire les observateurs ajoutés à un objet.</td> + </tr> + <tr> + <td>{{jsxref("Object.getNotifier()")}}</td> + <td>Crée un objet qui permet de déclencher un changement de façon synthétique.</td> + </tr> + </tbody> +</table> + +<h3 id="Function"><code>Function</code></h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("Objets_globaux/Function/arity", "arity")}}</td> + <td>Nombre d'arguments déclarés pour une fonction.</td> + </tr> + </tbody> +</table> + +<h3 id="Array"><code>Array</code></h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("Array.observe()")}}</td> + <td>Observe les modifications apportées à un tableau de façon asynchrone.</td> + </tr> + <tr> + <td>{{jsxref("Array.unobserve()")}}</td> + <td>Retire les observateurs ajoutés à un tableau.</td> + </tr> + </tbody> +</table> + +<h3 id="Number"><code>Number</code></h3> + +<ul> + <li>{{jsxref("Number.toInteger()")}}</li> +</ul> + +<h3 id="ParallelArray"><code>ParallelArray</code></h3> + +<ul> + <li>{{jsxref("ParallelArray")}}</li> +</ul> + +<h3 id="Instructions">Instructions</h3> + +<ul> + <li>{{jsxref("Instructions/for_each...in", "for each...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.</li> + <li>La décomposition de variables dans {{jsxref("Instructions/for...in", "for...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.</li> + <li>Les blocs et expressions <code>let</code> sont obsolètes.</li> +</ul> + +<h3 id="E4X">E4X</h3> + +<p>Voir la page <a href="/fr/docs/E4X">E4X</a> pour plus d'informations.</p> + +<h3 id="Sharp_variables">Sharp variables</h3> + +<p>Voir la page <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">sur les variables « Sharp » en JavaScript</a> pour plus d'informations.</p> diff --git a/files/fr/web/javascript/guide/le_protocole_itérateur_historique/index.html b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html index e106851141..e106851141 100644 --- a/files/fr/web/javascript/guide/le_protocole_itérateur_historique/index.html +++ b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html diff --git a/files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html b/files/fr/web/javascript/reference/errors/already_has_pragma/index.html index 6521ccba03..6521ccba03 100644 --- a/files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html +++ b/files/fr/web/javascript/reference/errors/already_has_pragma/index.html diff --git a/files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html b/files/fr/web/javascript/reference/errors/array_sort_argument/index.html index c8aaa54b05..c8aaa54b05 100644 --- a/files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html +++ b/files/fr/web/javascript/reference/errors/array_sort_argument/index.html diff --git a/files/fr/web/javascript/reference/erreurs/bad_octal/index.html b/files/fr/web/javascript/reference/errors/bad_octal/index.html index 241f127a05..241f127a05 100644 --- a/files/fr/web/javascript/reference/erreurs/bad_octal/index.html +++ b/files/fr/web/javascript/reference/errors/bad_octal/index.html diff --git a/files/fr/web/javascript/reference/erreurs/bad_radix/index.html b/files/fr/web/javascript/reference/errors/bad_radix/index.html index 37944b3ff8..37944b3ff8 100644 --- a/files/fr/web/javascript/reference/erreurs/bad_radix/index.html +++ b/files/fr/web/javascript/reference/errors/bad_radix/index.html diff --git a/files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html index 54005c38e5..54005c38e5 100644 --- a/files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html +++ b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html diff --git a/files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html index e5e015f52d..e5e015f52d 100644 --- a/files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html +++ b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html diff --git a/files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html index 0ea10d9cb0..0ea10d9cb0 100644 --- a/files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html +++ b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html diff --git a/files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html index 928e57c475..928e57c475 100644 --- a/files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html +++ b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html diff --git a/files/fr/web/javascript/reference/erreurs/cant_access_property/index.html b/files/fr/web/javascript/reference/errors/cant_access_property/index.html index 88e96eebef..88e96eebef 100644 --- a/files/fr/web/javascript/reference/erreurs/cant_access_property/index.html +++ b/files/fr/web/javascript/reference/errors/cant_access_property/index.html diff --git a/files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html index ecaf275f20..ecaf275f20 100644 --- a/files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html +++ b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html diff --git a/files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html index 62c09c1a44..62c09c1a44 100644 --- a/files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html +++ b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html diff --git a/files/fr/web/javascript/reference/erreurs/cant_delete/index.html b/files/fr/web/javascript/reference/errors/cant_delete/index.html index ce9c8a7b0e..ce9c8a7b0e 100644 --- a/files/fr/web/javascript/reference/erreurs/cant_delete/index.html +++ b/files/fr/web/javascript/reference/errors/cant_delete/index.html diff --git a/files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.html index 408d60151a..408d60151a 100644 --- a/files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html +++ b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.html diff --git a/files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.html index 254ee63c08..254ee63c08 100644 --- a/files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html +++ b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.html diff --git a/files/fr/web/javascript/reference/erreurs/dead_object/index.html b/files/fr/web/javascript/reference/errors/dead_object/index.html index d65d10f5e0..d65d10f5e0 100644 --- a/files/fr/web/javascript/reference/erreurs/dead_object/index.html +++ b/files/fr/web/javascript/reference/errors/dead_object/index.html diff --git a/files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html index 17b92c307f..17b92c307f 100644 --- a/files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html +++ b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html index da214bc213..da214bc213 100644 --- a/files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html +++ b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html b/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html index ac1b7d53b9..ac1b7d53b9 100644 --- a/files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html +++ b/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html b/files/fr/web/javascript/reference/errors/deprecated_octal/index.html index 72f6d1f3b2..72f6d1f3b2 100644 --- a/files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html +++ b/files/fr/web/javascript/reference/errors/deprecated_octal/index.html diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html b/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html index a9e4ce66ff..a9e4ce66ff 100644 --- a/files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html +++ b/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html b/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html index 29cedde5b1..29cedde5b1 100644 --- a/files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html +++ b/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html index aa920900ad..aa920900ad 100644 --- a/files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html +++ b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html diff --git a/files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html b/files/fr/web/javascript/reference/errors/equal_as_assign/index.html index 044132307f..044132307f 100644 --- a/files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html +++ b/files/fr/web/javascript/reference/errors/equal_as_assign/index.html diff --git a/files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html index 42ad693c09..42ad693c09 100644 --- a/files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html +++ b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html diff --git a/files/fr/web/javascript/reference/erreurs/getter_only/index.html b/files/fr/web/javascript/reference/errors/getter_only/index.html index eea26eaed4..eea26eaed4 100644 --- a/files/fr/web/javascript/reference/erreurs/getter_only/index.html +++ b/files/fr/web/javascript/reference/errors/getter_only/index.html diff --git a/files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html b/files/fr/web/javascript/reference/errors/identifier_after_number/index.html index 988d7c9f67..988d7c9f67 100644 --- a/files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html +++ b/files/fr/web/javascript/reference/errors/identifier_after_number/index.html diff --git a/files/fr/web/javascript/reference/erreurs/illegal_character/index.html b/files/fr/web/javascript/reference/errors/illegal_character/index.html index 1807fd5d72..1807fd5d72 100644 --- a/files/fr/web/javascript/reference/erreurs/illegal_character/index.html +++ b/files/fr/web/javascript/reference/errors/illegal_character/index.html diff --git a/files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.html index 18aed9f10b..18aed9f10b 100644 --- a/files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html +++ b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.html diff --git a/files/fr/web/javascript/reference/erreurs/index.html b/files/fr/web/javascript/reference/errors/index.html index a6ac12300b..a6ac12300b 100644 --- a/files/fr/web/javascript/reference/erreurs/index.html +++ b/files/fr/web/javascript/reference/errors/index.html diff --git a/files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html b/files/fr/web/javascript/reference/errors/invalid_array_length/index.html index 45b4dad5a6..45b4dad5a6 100644 --- a/files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html +++ b/files/fr/web/javascript/reference/errors/invalid_array_length/index.html diff --git a/files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html index 5253b4cb3d..5253b4cb3d 100644 --- a/files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html +++ b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html diff --git a/files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html index 83d21663c9..83d21663c9 100644 --- a/files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html +++ b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html diff --git a/files/fr/web/javascript/reference/erreurs/invalid_date/index.html b/files/fr/web/javascript/reference/errors/invalid_date/index.html index cd05197ba4..cd05197ba4 100644 --- a/files/fr/web/javascript/reference/erreurs/invalid_date/index.html +++ b/files/fr/web/javascript/reference/errors/invalid_date/index.html diff --git a/files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html index d7845dc2f9..d7845dc2f9 100644 --- a/files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html +++ b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html diff --git a/files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html b/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html index a6f4d98483..a6f4d98483 100644 --- a/files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html +++ b/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html diff --git a/files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html index ef5cffa224..ef5cffa224 100644 --- a/files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html +++ b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html diff --git a/files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html b/files/fr/web/javascript/reference/errors/is_not_iterable/index.html index 1e3b4af06c..1e3b4af06c 100644 --- a/files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html +++ b/files/fr/web/javascript/reference/errors/is_not_iterable/index.html diff --git a/files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html b/files/fr/web/javascript/reference/errors/json_bad_parse/index.html index b09d02bdaf..b09d02bdaf 100644 --- a/files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html +++ b/files/fr/web/javascript/reference/errors/json_bad_parse/index.html diff --git a/files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html index cd40696f25..cd40696f25 100644 --- a/files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html +++ b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html diff --git a/files/fr/web/javascript/reference/erreurs/malformed_uri/index.html b/files/fr/web/javascript/reference/errors/malformed_uri/index.html index 7226c9467e..7226c9467e 100644 --- a/files/fr/web/javascript/reference/erreurs/malformed_uri/index.html +++ b/files/fr/web/javascript/reference/errors/malformed_uri/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html index f27872f633..f27872f633 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html +++ b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html index 8b03eb22a3..8b03eb22a3 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html +++ b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html index 1a69b9696b..1a69b9696b 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html +++ b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html index 52052eff14..52052eff14 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html +++ b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html index e194e8cbda..e194e8cbda 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html +++ b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html index 60a5c519be..60a5c519be 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html +++ b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html index 6001e9ac34..6001e9ac34 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html +++ b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html index fad9106a6b..fad9106a6b 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html index c33118256e..c33118256e 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html diff --git a/files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html index ac9f8feb15..ac9f8feb15 100644 --- a/files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html +++ b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html diff --git a/files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.html index 6c33234995..6c33234995 100644 --- a/files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html +++ b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.html diff --git a/files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.html index 9ff58b2052..9ff58b2052 100644 --- a/files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html +++ b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.html diff --git a/files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html b/files/fr/web/javascript/reference/errors/no_non-null_object/index.html index a2196fd757..a2196fd757 100644 --- a/files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html +++ b/files/fr/web/javascript/reference/errors/no_non-null_object/index.html diff --git a/files/fr/web/javascript/reference/erreurs/no_properties/index.html b/files/fr/web/javascript/reference/errors/no_properties/index.html index 0edd868cab..0edd868cab 100644 --- a/files/fr/web/javascript/reference/erreurs/no_properties/index.html +++ b/files/fr/web/javascript/reference/errors/no_properties/index.html diff --git a/files/fr/web/javascript/reference/erreurs/no_variable_name/index.html b/files/fr/web/javascript/reference/errors/no_variable_name/index.html index db4e1103b3..db4e1103b3 100644 --- a/files/fr/web/javascript/reference/erreurs/no_variable_name/index.html +++ b/files/fr/web/javascript/reference/errors/no_variable_name/index.html diff --git a/files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html index 91f387a7a9..91f387a7a9 100644 --- a/files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html +++ b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html diff --git a/files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html b/files/fr/web/javascript/reference/errors/not_a_codepoint/index.html index be95fbb594..be95fbb594 100644 --- a/files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html +++ b/files/fr/web/javascript/reference/errors/not_a_codepoint/index.html diff --git a/files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html b/files/fr/web/javascript/reference/errors/not_a_constructor/index.html index 639a2c1b41..639a2c1b41 100644 --- a/files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html +++ b/files/fr/web/javascript/reference/errors/not_a_constructor/index.html diff --git a/files/fr/web/javascript/reference/erreurs/not_a_function/index.html b/files/fr/web/javascript/reference/errors/not_a_function/index.html index 1fcd81ecfe..1fcd81ecfe 100644 --- a/files/fr/web/javascript/reference/erreurs/not_a_function/index.html +++ b/files/fr/web/javascript/reference/errors/not_a_function/index.html diff --git a/files/fr/web/javascript/reference/erreurs/not_defined/index.html b/files/fr/web/javascript/reference/errors/not_defined/index.html index 6ec4ec7dfa..6ec4ec7dfa 100644 --- a/files/fr/web/javascript/reference/erreurs/not_defined/index.html +++ b/files/fr/web/javascript/reference/errors/not_defined/index.html diff --git a/files/fr/web/javascript/reference/erreurs/precision_range/index.html b/files/fr/web/javascript/reference/errors/precision_range/index.html index 888b151408..888b151408 100644 --- a/files/fr/web/javascript/reference/erreurs/precision_range/index.html +++ b/files/fr/web/javascript/reference/errors/precision_range/index.html diff --git a/files/fr/web/javascript/reference/erreurs/property_access_denied/index.html b/files/fr/web/javascript/reference/errors/property_access_denied/index.html index 52a86be808..52a86be808 100644 --- a/files/fr/web/javascript/reference/erreurs/property_access_denied/index.html +++ b/files/fr/web/javascript/reference/errors/property_access_denied/index.html diff --git a/files/fr/web/javascript/reference/erreurs/read-only/index.html b/files/fr/web/javascript/reference/errors/read-only/index.html index b48b622e27..b48b622e27 100644 --- a/files/fr/web/javascript/reference/erreurs/read-only/index.html +++ b/files/fr/web/javascript/reference/errors/read-only/index.html diff --git a/files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html b/files/fr/web/javascript/reference/errors/redeclared_parameter/index.html index 66d52b9b2b..66d52b9b2b 100644 --- a/files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html +++ b/files/fr/web/javascript/reference/errors/redeclared_parameter/index.html diff --git a/files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html index 40bb79c083..40bb79c083 100644 --- a/files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html +++ b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html diff --git a/files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html b/files/fr/web/javascript/reference/errors/reserved_identifier/index.html index 98bb834523..98bb834523 100644 --- a/files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html +++ b/files/fr/web/javascript/reference/errors/reserved_identifier/index.html diff --git a/files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html index b42c358fb2..b42c358fb2 100644 --- a/files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html +++ b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html diff --git a/files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html b/files/fr/web/javascript/reference/errors/stmt_after_return/index.html index 5a204b96d4..5a204b96d4 100644 --- a/files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html +++ b/files/fr/web/javascript/reference/errors/stmt_after_return/index.html diff --git a/files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html index 5e931452e5..5e931452e5 100644 --- a/files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html +++ b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html diff --git a/files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html b/files/fr/web/javascript/reference/errors/too_much_recursion/index.html index 1e7bf8c0d0..1e7bf8c0d0 100644 --- a/files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html +++ b/files/fr/web/javascript/reference/errors/too_much_recursion/index.html diff --git a/files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html b/files/fr/web/javascript/reference/errors/typed_array_invalid_arguments/index.html index b467aa1c4e..b467aa1c4e 100644 --- a/files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html +++ b/files/fr/web/javascript/reference/errors/typed_array_invalid_arguments/index.html diff --git a/files/fr/web/javascript/reference/erreurs/undeclared_var/index.html b/files/fr/web/javascript/reference/errors/undeclared_var/index.html index 98ff95210a..98ff95210a 100644 --- a/files/fr/web/javascript/reference/erreurs/undeclared_var/index.html +++ b/files/fr/web/javascript/reference/errors/undeclared_var/index.html diff --git a/files/fr/web/javascript/reference/erreurs/undefined_prop/index.html b/files/fr/web/javascript/reference/errors/undefined_prop/index.html index 00ae0a348b..00ae0a348b 100644 --- a/files/fr/web/javascript/reference/erreurs/undefined_prop/index.html +++ b/files/fr/web/javascript/reference/errors/undefined_prop/index.html diff --git a/files/fr/web/javascript/reference/erreurs/unexpected_token/index.html b/files/fr/web/javascript/reference/errors/unexpected_token/index.html index 309f05e1ca..309f05e1ca 100644 --- a/files/fr/web/javascript/reference/erreurs/unexpected_token/index.html +++ b/files/fr/web/javascript/reference/errors/unexpected_token/index.html diff --git a/files/fr/web/javascript/reference/erreurs/unexpected_type/index.html b/files/fr/web/javascript/reference/errors/unexpected_type/index.html index bda5c39eb9..bda5c39eb9 100644 --- a/files/fr/web/javascript/reference/erreurs/unexpected_type/index.html +++ b/files/fr/web/javascript/reference/errors/unexpected_type/index.html diff --git a/files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html b/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html index 690e4b3f3e..690e4b3f3e 100644 --- a/files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html +++ b/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html diff --git a/files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html b/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html index db0260c915..db0260c915 100644 --- a/files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html +++ b/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html diff --git a/files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html b/files/fr/web/javascript/reference/errors/var_hides_argument/index.html index 44ba49c346..44ba49c346 100644 --- a/files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html +++ b/files/fr/web/javascript/reference/errors/var_hides_argument/index.html diff --git a/files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html index d9cd086019..d9cd086019 100644 --- a/files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html +++ b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html diff --git a/files/fr/web/javascript/reference/fonctions/arguments/callee/index.html b/files/fr/web/javascript/reference/functions/arguments/callee/index.html index 9a94838ad0..9a94838ad0 100644 --- a/files/fr/web/javascript/reference/fonctions/arguments/callee/index.html +++ b/files/fr/web/javascript/reference/functions/arguments/callee/index.html diff --git a/files/fr/web/javascript/reference/fonctions/arguments/index.html b/files/fr/web/javascript/reference/functions/arguments/index.html index 589b84cc8b..589b84cc8b 100644 --- a/files/fr/web/javascript/reference/fonctions/arguments/index.html +++ b/files/fr/web/javascript/reference/functions/arguments/index.html diff --git a/files/fr/web/javascript/reference/fonctions/arguments/length/index.html b/files/fr/web/javascript/reference/functions/arguments/length/index.html index 02de2d281c..02de2d281c 100644 --- a/files/fr/web/javascript/reference/fonctions/arguments/length/index.html +++ b/files/fr/web/javascript/reference/functions/arguments/length/index.html diff --git a/files/fr/web/javascript/reference/fonctions/fonctions_fléchées/index.html b/files/fr/web/javascript/reference/functions/arrow_functions/index.html index 912748e5e2..912748e5e2 100644 --- a/files/fr/web/javascript/reference/fonctions/fonctions_fléchées/index.html +++ b/files/fr/web/javascript/reference/functions/arrow_functions/index.html diff --git a/files/fr/web/javascript/reference/fonctions/valeurs_par_défaut_des_arguments/index.html b/files/fr/web/javascript/reference/functions/default_parameters/index.html index 99d9869f9c..99d9869f9c 100644 --- a/files/fr/web/javascript/reference/fonctions/valeurs_par_défaut_des_arguments/index.html +++ b/files/fr/web/javascript/reference/functions/default_parameters/index.html diff --git a/files/fr/web/javascript/reference/fonctions/get/index.html b/files/fr/web/javascript/reference/functions/get/index.html index baf138defa..baf138defa 100644 --- a/files/fr/web/javascript/reference/fonctions/get/index.html +++ b/files/fr/web/javascript/reference/functions/get/index.html diff --git a/files/fr/web/javascript/reference/fonctions/index.html b/files/fr/web/javascript/reference/functions/index.html index db017be99e..db017be99e 100644 --- a/files/fr/web/javascript/reference/fonctions/index.html +++ b/files/fr/web/javascript/reference/functions/index.html diff --git a/files/fr/web/javascript/reference/fonctions/définition_de_méthode/index.html b/files/fr/web/javascript/reference/functions/method_definitions/index.html index 1884e63c14..1884e63c14 100644 --- a/files/fr/web/javascript/reference/fonctions/définition_de_méthode/index.html +++ b/files/fr/web/javascript/reference/functions/method_definitions/index.html diff --git a/files/fr/web/javascript/reference/fonctions/paramètres_du_reste/index.html b/files/fr/web/javascript/reference/functions/rest_parameters/index.html index 6ac181fe51..6ac181fe51 100644 --- a/files/fr/web/javascript/reference/fonctions/paramètres_du_reste/index.html +++ b/files/fr/web/javascript/reference/functions/rest_parameters/index.html diff --git a/files/fr/web/javascript/reference/fonctions/set/index.html b/files/fr/web/javascript/reference/functions/set/index.html index 4cabb36149..4cabb36149 100644 --- a/files/fr/web/javascript/reference/fonctions/set/index.html +++ b/files/fr/web/javascript/reference/functions/set/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html b/files/fr/web/javascript/reference/global_objects/aggregateerror/index.html index 782a968074..782a968074 100644 --- a/files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/aggregateerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html index 1843ed0508..1843ed0508 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html b/files/fr/web/javascript/reference/global_objects/array/@@species/index.html index 58064e558b..58064e558b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/@@species/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html index b61ceb5279..b61ceb5279 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/array/index.html b/files/fr/web/javascript/reference/global_objects/array/array/index.html index de1394bdd9..de1394bdd9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/array/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/concat/index.html b/files/fr/web/javascript/reference/global_objects/array/concat/index.html index bd788c4e7c..bd788c4e7c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/concat/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/concat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html index 32ffdd57e3..32ffdd57e3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/entries/index.html b/files/fr/web/javascript/reference/global_objects/array/entries/index.html index 127cec9f99..127cec9f99 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/entries/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/entries/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/every/index.html b/files/fr/web/javascript/reference/global_objects/array/every/index.html index 2c3e71dca6..2c3e71dca6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/every/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/every/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/fill/index.html b/files/fr/web/javascript/reference/global_objects/array/fill/index.html index 9c5d0c1e6f..9c5d0c1e6f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/fill/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/fill/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/filter/index.html b/files/fr/web/javascript/reference/global_objects/array/filter/index.html index fdd8fa023a..fdd8fa023a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/filter/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/filter/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/find/index.html b/files/fr/web/javascript/reference/global_objects/array/find/index.html index c6675f0b1b..c6675f0b1b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/find/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/find/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html b/files/fr/web/javascript/reference/global_objects/array/findindex/index.html index 3d116dfe97..3d116dfe97 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/findindex/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/flat/index.html b/files/fr/web/javascript/reference/global_objects/array/flat/index.html index 27a0337822..27a0337822 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/flat/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/flat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html index f69e64607c..f69e64607c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html b/files/fr/web/javascript/reference/global_objects/array/foreach/index.html index d5fe37c438..d5fe37c438 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/foreach/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/from/index.html b/files/fr/web/javascript/reference/global_objects/array/from/index.html index 61e8b828cb..61e8b828cb 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/from/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/from/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/includes/index.html b/files/fr/web/javascript/reference/global_objects/array/includes/index.html index 8567f02fbf..8567f02fbf 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/includes/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/includes/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/index.html b/files/fr/web/javascript/reference/global_objects/array/index.html index b871ff6573..b871ff6573 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html b/files/fr/web/javascript/reference/global_objects/array/indexof/index.html index 5ff4981c2e..5ff4981c2e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/indexof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html b/files/fr/web/javascript/reference/global_objects/array/isarray/index.html index bc07a159b0..bc07a159b0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/isarray/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/join/index.html b/files/fr/web/javascript/reference/global_objects/array/join/index.html index e28efaae77..e28efaae77 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/join/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/join/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/keys/index.html b/files/fr/web/javascript/reference/global_objects/array/keys/index.html index b9907b9340..b9907b9340 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/keys/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/keys/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html index cc7d68a61a..cc7d68a61a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/length/index.html b/files/fr/web/javascript/reference/global_objects/array/length/index.html index b586607721..b586607721 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/length/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/length/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/map/index.html b/files/fr/web/javascript/reference/global_objects/array/map/index.html index 2cdabaddba..2cdabaddba 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/map/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/map/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/of/index.html b/files/fr/web/javascript/reference/global_objects/array/of/index.html index ffd20e3bf1..ffd20e3bf1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/of/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/of/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/pop/index.html b/files/fr/web/javascript/reference/global_objects/array/pop/index.html index 7d06b9f5f7..7d06b9f5f7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/pop/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/pop/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/push/index.html b/files/fr/web/javascript/reference/global_objects/array/push/index.html index 1ca8d57e8f..1ca8d57e8f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/push/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/push/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html index 17b90678b9..17b90678b9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html index f29060283b..f29060283b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html b/files/fr/web/javascript/reference/global_objects/array/reverse/index.html index 515b437842..515b437842 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/reverse/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/shift/index.html b/files/fr/web/javascript/reference/global_objects/array/shift/index.html index 9711ca9d25..9711ca9d25 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/shift/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/shift/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/slice/index.html b/files/fr/web/javascript/reference/global_objects/array/slice/index.html index 98dac60521..98dac60521 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/slice/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/slice/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/some/index.html b/files/fr/web/javascript/reference/global_objects/array/some/index.html index 2d3b197c16..2d3b197c16 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/some/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/some/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/sort/index.html b/files/fr/web/javascript/reference/global_objects/array/sort/index.html index a7fb7a8981..a7fb7a8981 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/sort/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/sort/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/splice/index.html b/files/fr/web/javascript/reference/global_objects/array/splice/index.html index 660bd81fb3..660bd81fb3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/splice/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/splice/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html index 5d686a85bd..5d686a85bd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html b/files/fr/web/javascript/reference/global_objects/array/tosource/index.html index e6800fd64c..e6800fd64c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html b/files/fr/web/javascript/reference/global_objects/array/tostring/index.html index b7b252c1fb..b7b252c1fb 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html b/files/fr/web/javascript/reference/global_objects/array/unshift/index.html index 04115c0986..04115c0986 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/unshift/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/array/values/index.html b/files/fr/web/javascript/reference/global_objects/array/values/index.html index 26e1c20bf8..26e1c20bf8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/array/values/index.html +++ b/files/fr/web/javascript/reference/global_objects/array/values/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html index edf4cdfdde..edf4cdfdde 100644 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html index 6cf497e790..6cf497e790 100644 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/index.html index 400f1cdf38..400f1cdf38 100644 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html index 990b6b6d62..990b6b6d62 100644 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html index c34eb843d5..c34eb843d5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.html index 831cb4a055..831cb4a055 100644 --- a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html +++ b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html b/files/fr/web/javascript/reference/global_objects/atomics/add/index.html index 2d9bc81ecc..2d9bc81ecc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/add/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html b/files/fr/web/javascript/reference/global_objects/atomics/and/index.html index 31fb9d4a53..31fb9d4a53 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/and/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html index bb470fa343..bb470fa343 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html index 6c73556862..6c73556862 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/index.html b/files/fr/web/javascript/reference/global_objects/atomics/index.html index 6ca2de61b4..6ca2de61b4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html b/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html index 90fcd68c97..90fcd68c97 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html b/files/fr/web/javascript/reference/global_objects/atomics/load/index.html index 285abde89f..285abde89f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/load/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html b/files/fr/web/javascript/reference/global_objects/atomics/notify/index.html index 6c2c3ebc47..6c2c3ebc47 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/notify/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html b/files/fr/web/javascript/reference/global_objects/atomics/or/index.html index fa53f24777..fa53f24777 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/or/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html b/files/fr/web/javascript/reference/global_objects/atomics/store/index.html index f5b85b974c..f5b85b974c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/store/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.html index 3c1dc879a0..3c1dc879a0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html b/files/fr/web/javascript/reference/global_objects/atomics/wait/index.html index 430cafd19a..430cafd19a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/wait/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.html index 7aea0aef24..7aea0aef24 100644 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html +++ b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html b/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html index 8e51d25642..8e51d25642 100644 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html +++ b/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html b/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html index 742792d5e6..742792d5e6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html +++ b/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/index.html b/files/fr/web/javascript/reference/global_objects/bigint/index.html index 1310b8c442..1310b8c442 100644 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/index.html +++ b/files/fr/web/javascript/reference/global_objects/bigint/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html index 652cd723aa..652cd723aa 100644 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html index 9718891da1..9718891da1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html b/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html index 924a9ce5e2..924a9ce5e2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html +++ b/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html b/files/fr/web/javascript/reference/global_objects/bigint64array/index.html index 0d9d92e605..0d9d92e605 100644 --- a/files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html +++ b/files/fr/web/javascript/reference/global_objects/bigint64array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html b/files/fr/web/javascript/reference/global_objects/biguint64array/index.html index 659a4d8aec..659a4d8aec 100644 --- a/files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html +++ b/files/fr/web/javascript/reference/global_objects/biguint64array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/index.html b/files/fr/web/javascript/reference/global_objects/boolean/index.html index e6c29376f2..e6c29376f2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/index.html +++ b/files/fr/web/javascript/reference/global_objects/boolean/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html b/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html index c40a6885ad..c40a6885ad 100644 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html index e1e7ab0dcc..e1e7ab0dcc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html index 5f14a8bff9..5f14a8bff9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html +++ b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html index 3b88dd7b93..3b88dd7b93 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html index d02edfb161..d02edfb161 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html index 1f26b5827b..1f26b5827b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html index b5d6e40180..b5d6e40180 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html index a7733aec6e..a7733aec6e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html index f8a07d3eff..f8a07d3eff 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html index b6f24fb7bc..b6f24fb7bc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html index 5a87490a9a..5a87490a9a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html index 74ffeb6a6b..74ffeb6a6b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html index 4096b6736b..4096b6736b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html index 9ab325e790..9ab325e790 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html index 901321e34a..901321e34a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html index 1a4545b47e..1a4545b47e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/index.html b/files/fr/web/javascript/reference/global_objects/dataview/index.html index f8887888d7..f8887888d7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html index c65978bd74..c65978bd74 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html index 21ab72e54b..21ab72e54b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html index ebea17bc04..ebea17bc04 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html index e8db496af9..e8db496af9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html index 0e39e1ddb4..0e39e1ddb4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html index 84338c5ddb..84338c5ddb 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html index cd81ef7718..cd81ef7718 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html index a6375403c4..a6375403c4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html index c4ef087803..c4ef087803 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html index 1e4abcb153..1e4abcb153 100644 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html index e3ded8eeb1..e3ded8eeb1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html b/files/fr/web/javascript/reference/global_objects/date/getdate/index.html index 571cd6f347..571cd6f347 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getdate/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getday/index.html b/files/fr/web/javascript/reference/global_objects/date/getday/index.html index 08457eaade..08457eaade 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getday/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getday/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html index a6ffdb03e6..a6ffdb03e6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html b/files/fr/web/javascript/reference/global_objects/date/gethours/index.html index e4bb2c3e21..e4bb2c3e21 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/gethours/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html index 15b30f7d9c..15b30f7d9c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.html index 42b2e04b2c..42b2e04b2c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.html index d1c96b3c48..d1c96b3c48 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.html index 1d6ed36ad0..1d6ed36ad0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html b/files/fr/web/javascript/reference/global_objects/date/gettime/index.html index 2ade1f6f16..2ade1f6f16 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/gettime/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html index 97c2ab3604..97c2ab3604 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html index 5d2059e88b..5d2059e88b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.html index d97a0bd31e..d97a0bd31e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html index 873d48d53b..873d48d53b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.html index c9139151c7..c9139151c7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html index f662f995c6..f662f995c6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html index e1a8d1a996..e1a8d1a996 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html index e79037ca0f..e79037ca0f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html index c56766bb13..c56766bb13 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getyear/index.html index a890eaeb7e..a890eaeb7e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/getyear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/index.html b/files/fr/web/javascript/reference/global_objects/date/index.html index e38ef84b9b..e38ef84b9b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/now/index.html b/files/fr/web/javascript/reference/global_objects/date/now/index.html index 008db50f65..008db50f65 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/now/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/now/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/parse/index.html b/files/fr/web/javascript/reference/global_objects/date/parse/index.html index fc7a5c3e14..fc7a5c3e14 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/parse/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/parse/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html b/files/fr/web/javascript/reference/global_objects/date/setdate/index.html index ee3c090a6d..ee3c090a6d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setdate/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html index ffc97b61d0..ffc97b61d0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html b/files/fr/web/javascript/reference/global_objects/date/sethours/index.html index fba8af3e49..fba8af3e49 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/sethours/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html index d043689b4b..d043689b4b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.html index ac856d4a5e..ac856d4a5e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.html index 7b93420bfd..7b93420bfd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.html index a9884c31d7..a9884c31d7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/settime/index.html b/files/fr/web/javascript/reference/global_objects/date/settime/index.html index fa914face8..fa914face8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/settime/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/settime/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html index cbf11c69c1..cbf11c69c1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html index 771dff1935..771dff1935 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.html index 2183e9aeff..2183e9aeff 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html index 6699e1faa8..6699e1faa8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html index 40ce14225b..40ce14225b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html index 90132c3347..90132c3347 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html index a616281d12..a616281d12 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setyear/index.html index d3f6283cab..d3f6283cab 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/setyear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html b/files/fr/web/javascript/reference/global_objects/date/todatestring/index.html index 403f48bada..403f48bada 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/todatestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html b/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html index 23b9d6d054..23b9d6d054 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.html index f398d25340..f398d25340 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html b/files/fr/web/javascript/reference/global_objects/date/tojson/index.html index 0f2b0c7bc7..0f2b0c7bc7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/tojson/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html index b56487fe29..b56487fe29 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html index 7ff28d169a..7ff28d169a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html index c0c6c93020..c0c6c93020 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html b/files/fr/web/javascript/reference/global_objects/date/tosource/index.html index 9f153778cb..9f153778cb 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html b/files/fr/web/javascript/reference/global_objects/date/tostring/index.html index 82fd8dfb5e..82fd8dfb5e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.html index fb27f7003d..fb27f7003d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html index d22f0d3346..d22f0d3346 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/utc/index.html b/files/fr/web/javascript/reference/global_objects/date/utc/index.html index 71bbe40f62..71bbe40f62 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/utc/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/utc/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html b/files/fr/web/javascript/reference/global_objects/date/valueof/index.html index 680f34b4a1..680f34b4a1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html +++ b/files/fr/web/javascript/reference/global_objects/date/valueof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html b/files/fr/web/javascript/reference/global_objects/decodeuri/index.html index a2ef94c1fe..a2ef94c1fe 100644 --- a/files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html +++ b/files/fr/web/javascript/reference/global_objects/decodeuri/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html index c659ad8573..c659ad8573 100644 --- a/files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html +++ b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html b/files/fr/web/javascript/reference/global_objects/encodeuri/index.html index 65bd21d5ef..65bd21d5ef 100644 --- a/files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html +++ b/files/fr/web/javascript/reference/global_objects/encodeuri/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html index 054b5492b9..054b5492b9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html +++ b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html b/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html index 813eb382a9..813eb382a9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/filename/index.html b/files/fr/web/javascript/reference/global_objects/error/filename/index.html index fb52011488..fb52011488 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/filename/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/filename/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/index.html b/files/fr/web/javascript/reference/global_objects/error/index.html index e267e237f4..e267e237f4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.html index 8067f9d42e..8067f9d42e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/message/index.html b/files/fr/web/javascript/reference/global_objects/error/message/index.html index e8a680a0b6..e8a680a0b6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/message/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/message/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/name/index.html b/files/fr/web/javascript/reference/global_objects/error/name/index.html index edbe9189ff..edbe9189ff 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/name/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/name/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/stack/index.html b/files/fr/web/javascript/reference/global_objects/error/stack/index.html index 06c062dae2..06c062dae2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/stack/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/stack/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html b/files/fr/web/javascript/reference/global_objects/error/tosource/index.html index 701364ed74..701364ed74 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html b/files/fr/web/javascript/reference/global_objects/error/tostring/index.html index f117af3440..f117af3440 100644 --- a/files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/error/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/escape/index.html b/files/fr/web/javascript/reference/global_objects/escape/index.html index e66c4ab923..e66c4ab923 100644 --- a/files/fr/web/javascript/reference/objets_globaux/escape/index.html +++ b/files/fr/web/javascript/reference/global_objects/escape/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/eval/index.html b/files/fr/web/javascript/reference/global_objects/eval/index.html index 06a37511f5..06a37511f5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/eval/index.html +++ b/files/fr/web/javascript/reference/global_objects/eval/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/evalerror/index.html b/files/fr/web/javascript/reference/global_objects/evalerror/index.html index f2bdb704b9..f2bdb704b9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/evalerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/evalerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/float32array/index.html b/files/fr/web/javascript/reference/global_objects/float32array/index.html index 35870c99db..35870c99db 100644 --- a/files/fr/web/javascript/reference/objets_globaux/float32array/index.html +++ b/files/fr/web/javascript/reference/global_objects/float32array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/float64array/index.html b/files/fr/web/javascript/reference/global_objects/float64array/index.html index 892222240c..892222240c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/float64array/index.html +++ b/files/fr/web/javascript/reference/global_objects/float64array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/apply/index.html b/files/fr/web/javascript/reference/global_objects/function/apply/index.html index 6c1f23d146..6c1f23d146 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/apply/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/apply/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html b/files/fr/web/javascript/reference/global_objects/function/arguments/index.html index 13bfc16dd3..13bfc16dd3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/arguments/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/bind/index.html b/files/fr/web/javascript/reference/global_objects/function/bind/index.html index dd214fe306..dd214fe306 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/bind/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/bind/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/call/index.html b/files/fr/web/javascript/reference/global_objects/function/call/index.html index b419b7eca6..b419b7eca6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/call/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/call/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/caller/index.html b/files/fr/web/javascript/reference/global_objects/function/caller/index.html index 9956ad14ee..9956ad14ee 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/caller/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/caller/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html b/files/fr/web/javascript/reference/global_objects/function/displayname/index.html index dc9f7fc870..dc9f7fc870 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/displayname/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/index.html b/files/fr/web/javascript/reference/global_objects/function/index.html index 01c2a34869..01c2a34869 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/length/index.html b/files/fr/web/javascript/reference/global_objects/function/length/index.html index 023b40a5f8..023b40a5f8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/length/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/length/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/name/index.html b/files/fr/web/javascript/reference/global_objects/function/name/index.html index b9b6f8300e..b9b6f8300e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/name/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/name/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html b/files/fr/web/javascript/reference/global_objects/function/tosource/index.html index 3eb4b0d6dc..3eb4b0d6dc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html b/files/fr/web/javascript/reference/global_objects/function/tostring/index.html index db667ff0f6..db667ff0f6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/function/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/index.html b/files/fr/web/javascript/reference/global_objects/generator/index.html index 3557fe4bb2..3557fe4bb2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/generator/index.html +++ b/files/fr/web/javascript/reference/global_objects/generator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/next/index.html b/files/fr/web/javascript/reference/global_objects/generator/next/index.html index 059ebdac04..059ebdac04 100644 --- a/files/fr/web/javascript/reference/objets_globaux/generator/next/index.html +++ b/files/fr/web/javascript/reference/global_objects/generator/next/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/return/index.html b/files/fr/web/javascript/reference/global_objects/generator/return/index.html index e67c07ad43..e67c07ad43 100644 --- a/files/fr/web/javascript/reference/objets_globaux/generator/return/index.html +++ b/files/fr/web/javascript/reference/global_objects/generator/return/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html b/files/fr/web/javascript/reference/global_objects/generator/throw/index.html index efcc057257..efcc057257 100644 --- a/files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html +++ b/files/fr/web/javascript/reference/global_objects/generator/throw/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.html index fa791f53b6..fa791f53b6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html +++ b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/globalthis/index.html b/files/fr/web/javascript/reference/global_objects/globalthis/index.html index 30338dd4a9..30338dd4a9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/globalthis/index.html +++ b/files/fr/web/javascript/reference/global_objects/globalthis/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/index.html b/files/fr/web/javascript/reference/global_objects/index.html index 6316e7f6fc..6316e7f6fc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/index.html +++ b/files/fr/web/javascript/reference/global_objects/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/infinity/index.html b/files/fr/web/javascript/reference/global_objects/infinity/index.html index 1259fea9c2..1259fea9c2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/infinity/index.html +++ b/files/fr/web/javascript/reference/global_objects/infinity/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/int16array/index.html b/files/fr/web/javascript/reference/global_objects/int16array/index.html index fc882ab1b9..fc882ab1b9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/int16array/index.html +++ b/files/fr/web/javascript/reference/global_objects/int16array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/int32array/index.html b/files/fr/web/javascript/reference/global_objects/int32array/index.html index ecdc62a803..ecdc62a803 100644 --- a/files/fr/web/javascript/reference/objets_globaux/int32array/index.html +++ b/files/fr/web/javascript/reference/global_objects/int32array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/int8array/index.html b/files/fr/web/javascript/reference/global_objects/int8array/index.html index 3226323471..3226323471 100644 --- a/files/fr/web/javascript/reference/objets_globaux/int8array/index.html +++ b/files/fr/web/javascript/reference/global_objects/int8array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/internalerror/index.html b/files/fr/web/javascript/reference/global_objects/internalerror/index.html index a743ef18ca..a743ef18ca 100644 --- a/files/fr/web/javascript/reference/objets_globaux/internalerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/internalerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html index b120729383..b120729383 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/index.html index 3130eed3b8..3130eed3b8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html index d7cd3ad5e0..d7cd3ad5e0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html index 6b5bdb5414..6b5bdb5414 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html index 06acb8065b..06acb8065b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html index 1fbca49cc2..1fbca49cc2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html index 593df591fb..593df591fb 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html index 8ec6657b12..8ec6657b12 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html index eb7c535c80..eb7c535c80 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html index b91083bb16..b91083bb16 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html index 079c20ae21..079c20ae21 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html b/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html index e0fc40a55d..e0fc40a55d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/index.html b/files/fr/web/javascript/reference/global_objects/intl/index.html index 26062d308d..26062d308d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html index 330767cb8c..330767cb8c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html index fb3abe8afd..fb3abe8afd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.html index 03dac95c7f..03dac95c7f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html index 3b0f36ea4e..3b0f36ea4e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html index 90abe4f56d..90abe4f56d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html index 6b20ebee57..6b20ebee57 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html index cbe7f8db93..cbe7f8db93 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html index 7403262d3d..7403262d3d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html index 46482bcd73..46482bcd73 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html index f88b4c5441..f88b4c5441 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/index.html index f5e22804fa..f5e22804fa 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html index 1a3f95566d..1a3f95566d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html index 678db44d6e..678db44d6e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html index 57549456bd..57549456bd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html index 076b671499..076b671499 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html index 5b3c357b09..5b3c357b09 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html index c9af9b9ac3..c9af9b9ac3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html index 3fed9f8169..3fed9f8169 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html index 723f7cd4b3..723f7cd4b3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html index 201022bd58..201022bd58 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html index 12a78a6a1d..12a78a6a1d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html index 2408df724b..2408df724b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html index 195f044176..195f044176 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html index f270e88a64..f270e88a64 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html index 0d49ec4de0..0d49ec4de0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html index 66f4062703..66f4062703 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html index 9d9b8eac11..9d9b8eac11 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html index 31faa9f6b0..31faa9f6b0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html index 8a065ae341..8a065ae341 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html index 4a107d215c..4a107d215c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html index f15c5db724..f15c5db724 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html index 1d6ddd6978..1d6ddd6978 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html index be0599106c..be0599106c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/isfinite/index.html b/files/fr/web/javascript/reference/global_objects/isfinite/index.html index 314a85183d..314a85183d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/isfinite/index.html +++ b/files/fr/web/javascript/reference/global_objects/isfinite/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/isnan/index.html b/files/fr/web/javascript/reference/global_objects/isnan/index.html index f1f8d4ea70..f1f8d4ea70 100644 --- a/files/fr/web/javascript/reference/objets_globaux/isnan/index.html +++ b/files/fr/web/javascript/reference/global_objects/isnan/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/json/index.html b/files/fr/web/javascript/reference/global_objects/json/index.html index ecc67a2d86..ecc67a2d86 100644 --- a/files/fr/web/javascript/reference/objets_globaux/json/index.html +++ b/files/fr/web/javascript/reference/global_objects/json/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/json/parse/index.html b/files/fr/web/javascript/reference/global_objects/json/parse/index.html index 9161bc2ee2..9161bc2ee2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/json/parse/index.html +++ b/files/fr/web/javascript/reference/global_objects/json/parse/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html b/files/fr/web/javascript/reference/global_objects/json/stringify/index.html index 2243d898f3..2243d898f3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html +++ b/files/fr/web/javascript/reference/global_objects/json/stringify/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html index e8e5a27315..e8e5a27315 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html b/files/fr/web/javascript/reference/global_objects/map/@@species/index.html index edeb984260..edeb984260 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/@@species/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html index f413bff206..f413bff206 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/clear/index.html b/files/fr/web/javascript/reference/global_objects/map/clear/index.html index b24da02228..b24da02228 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/clear/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/clear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/delete/index.html b/files/fr/web/javascript/reference/global_objects/map/delete/index.html index 53ff3fdb23..53ff3fdb23 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/delete/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/delete/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/entries/index.html b/files/fr/web/javascript/reference/global_objects/map/entries/index.html index 993b5d9272..993b5d9272 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/entries/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/entries/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html b/files/fr/web/javascript/reference/global_objects/map/foreach/index.html index 5690c4f53b..5690c4f53b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/foreach/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/get/index.html b/files/fr/web/javascript/reference/global_objects/map/get/index.html index 6f1e5dc37e..6f1e5dc37e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/get/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/get/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/has/index.html b/files/fr/web/javascript/reference/global_objects/map/has/index.html index aed14c0662..aed14c0662 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/has/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/has/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/index.html b/files/fr/web/javascript/reference/global_objects/map/index.html index b844416b16..b844416b16 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/keys/index.html b/files/fr/web/javascript/reference/global_objects/map/keys/index.html index 4c9eaef896..4c9eaef896 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/keys/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/keys/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/set/index.html b/files/fr/web/javascript/reference/global_objects/map/set/index.html index 6c74f2d342..6c74f2d342 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/set/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/set/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/size/index.html b/files/fr/web/javascript/reference/global_objects/map/size/index.html index 28ef0921c4..28ef0921c4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/size/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/size/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/map/values/index.html b/files/fr/web/javascript/reference/global_objects/map/values/index.html index 6db3129d2e..6db3129d2e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/map/values/index.html +++ b/files/fr/web/javascript/reference/global_objects/map/values/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/abs/index.html b/files/fr/web/javascript/reference/global_objects/math/abs/index.html index 925364b1ca..925364b1ca 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/abs/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/abs/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/acos/index.html b/files/fr/web/javascript/reference/global_objects/math/acos/index.html index b0de810d35..b0de810d35 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/acos/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/acos/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html b/files/fr/web/javascript/reference/global_objects/math/acosh/index.html index 3598039002..3598039002 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/acosh/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/asin/index.html b/files/fr/web/javascript/reference/global_objects/math/asin/index.html index c830fc7b11..c830fc7b11 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/asin/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/asin/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html b/files/fr/web/javascript/reference/global_objects/math/asinh/index.html index 3d0d55ecad..3d0d55ecad 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/asinh/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atan/index.html b/files/fr/web/javascript/reference/global_objects/math/atan/index.html index e7392525ab..e7392525ab 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/atan/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/atan/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html b/files/fr/web/javascript/reference/global_objects/math/atan2/index.html index 3c49ff6ba5..3c49ff6ba5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/atan2/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html b/files/fr/web/javascript/reference/global_objects/math/atanh/index.html index ef350947af..ef350947af 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/atanh/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.html index fe6c19aa04..fe6c19aa04 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html b/files/fr/web/javascript/reference/global_objects/math/ceil/index.html index 47e1bde9e2..47e1bde9e2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/ceil/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html b/files/fr/web/javascript/reference/global_objects/math/clz32/index.html index e7c28a3865..e7c28a3865 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/clz32/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cos/index.html b/files/fr/web/javascript/reference/global_objects/math/cos/index.html index 3c28ee7fb4..3c28ee7fb4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/cos/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/cos/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html b/files/fr/web/javascript/reference/global_objects/math/cosh/index.html index 99d12d6cf0..99d12d6cf0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/cosh/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/e/index.html b/files/fr/web/javascript/reference/global_objects/math/e/index.html index 0ffd4fff7d..0ffd4fff7d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/e/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/e/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/exp/index.html b/files/fr/web/javascript/reference/global_objects/math/exp/index.html index 62974cdddf..62974cdddf 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/exp/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/exp/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html b/files/fr/web/javascript/reference/global_objects/math/expm1/index.html index daff456379..daff456379 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/expm1/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/floor/index.html b/files/fr/web/javascript/reference/global_objects/math/floor/index.html index 0058ccfe84..0058ccfe84 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/floor/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/floor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/fround/index.html b/files/fr/web/javascript/reference/global_objects/math/fround/index.html index 59ca437b06..59ca437b06 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/fround/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/fround/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html b/files/fr/web/javascript/reference/global_objects/math/hypot/index.html index 90c6ec6690..90c6ec6690 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/hypot/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/imul/index.html b/files/fr/web/javascript/reference/global_objects/math/imul/index.html index 3eb75d949d..3eb75d949d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/imul/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/imul/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/index.html b/files/fr/web/javascript/reference/global_objects/math/index.html index 231f165879..231f165879 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html b/files/fr/web/javascript/reference/global_objects/math/ln10/index.html index e9eae9acc2..e9eae9acc2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/ln10/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html b/files/fr/web/javascript/reference/global_objects/math/ln2/index.html index 89db2712fd..89db2712fd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/ln2/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log/index.html b/files/fr/web/javascript/reference/global_objects/math/log/index.html index 177215b74b..177215b74b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/log/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/log/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log10/index.html b/files/fr/web/javascript/reference/global_objects/math/log10/index.html index 724247091b..724247091b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/log10/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/log10/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html b/files/fr/web/javascript/reference/global_objects/math/log10e/index.html index 7ea27eefbc..7ea27eefbc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/log10e/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html b/files/fr/web/javascript/reference/global_objects/math/log1p/index.html index b209a76043..b209a76043 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/log1p/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log2/index.html b/files/fr/web/javascript/reference/global_objects/math/log2/index.html index 0b11603a85..0b11603a85 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/log2/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/log2/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html b/files/fr/web/javascript/reference/global_objects/math/log2e/index.html index dffc8423da..dffc8423da 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/log2e/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/max/index.html b/files/fr/web/javascript/reference/global_objects/math/max/index.html index 1964058b9b..1964058b9b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/max/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/max/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/min/index.html b/files/fr/web/javascript/reference/global_objects/math/min/index.html index 321548364d..321548364d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/min/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/min/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/pi/index.html b/files/fr/web/javascript/reference/global_objects/math/pi/index.html index 1afe5afc3a..1afe5afc3a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/pi/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/pi/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/pow/index.html b/files/fr/web/javascript/reference/global_objects/math/pow/index.html index c7d08031b1..c7d08031b1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/pow/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/pow/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/random/index.html b/files/fr/web/javascript/reference/global_objects/math/random/index.html index 880f6ee69e..880f6ee69e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/random/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/random/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/round/index.html b/files/fr/web/javascript/reference/global_objects/math/round/index.html index 981e6cb665..981e6cb665 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/round/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/round/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sign/index.html b/files/fr/web/javascript/reference/global_objects/math/sign/index.html index 8a1c941e66..8a1c941e66 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/sign/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/sign/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sin/index.html b/files/fr/web/javascript/reference/global_objects/math/sin/index.html index c9ea4850ac..c9ea4850ac 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/sin/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/sin/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html b/files/fr/web/javascript/reference/global_objects/math/sinh/index.html index 33c5813d67..33c5813d67 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/sinh/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.html index 1a95e53caa..1a95e53caa 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html index b845ac3389..b845ac3389 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html index 7a02b16e2d..7a02b16e2d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/tan/index.html b/files/fr/web/javascript/reference/global_objects/math/tan/index.html index 948ea10a14..948ea10a14 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/tan/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/tan/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html b/files/fr/web/javascript/reference/global_objects/math/tanh/index.html index 0567a5430c..0567a5430c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/tanh/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html b/files/fr/web/javascript/reference/global_objects/math/trunc/index.html index beb1f33d0b..beb1f33d0b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html +++ b/files/fr/web/javascript/reference/global_objects/math/trunc/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/nan/index.html b/files/fr/web/javascript/reference/global_objects/nan/index.html index e8b97ac8ba..e8b97ac8ba 100644 --- a/files/fr/web/javascript/reference/objets_globaux/nan/index.html +++ b/files/fr/web/javascript/reference/global_objects/nan/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/null/index.html b/files/fr/web/javascript/reference/global_objects/null/index.html index bab3a87310..bab3a87310 100644 --- a/files/fr/web/javascript/reference/objets_globaux/null/index.html +++ b/files/fr/web/javascript/reference/global_objects/null/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.html index 75bab809e7..75bab809e7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/index.html b/files/fr/web/javascript/reference/global_objects/number/index.html index c5894cb63a..c5894cb63a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.html index 953e9d8958..953e9d8958 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html b/files/fr/web/javascript/reference/global_objects/number/isinteger/index.html index 447c80ede2..447c80ede2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/isinteger/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html b/files/fr/web/javascript/reference/global_objects/number/isnan/index.html index 5915747056..5915747056 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/isnan/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html index 3aa5accb87..3aa5accb87 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html index 7266e8d4ae..7266e8d4ae 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html b/files/fr/web/javascript/reference/global_objects/number/max_value/index.html index 405b3da898..405b3da898 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/max_value/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html b/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html index 8f19b905d2..8f19b905d2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html b/files/fr/web/javascript/reference/global_objects/number/min_value/index.html index 4a70b026d9..4a70b026d9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/min_value/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/nan/index.html b/files/fr/web/javascript/reference/global_objects/number/nan/index.html index 71f705c9cc..71f705c9cc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/nan/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/nan/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html index 5676e99d27..5676e99d27 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html index 85059f92a3..85059f92a3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html b/files/fr/web/javascript/reference/global_objects/number/parseint/index.html index 60eaae2d48..60eaae2d48 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/parseint/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html index dd0d9cc01c..dd0d9cc01c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.html index c478bb13fd..c478bb13fd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.html index d1f0cd48b2..d1f0cd48b2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html index d05294de7a..d05294de7a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.html index 236a7bb51e..236a7bb51e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html b/files/fr/web/javascript/reference/global_objects/number/tosource/index.html index da204d2ea4..da204d2ea4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html b/files/fr/web/javascript/reference/global_objects/number/tostring/index.html index d7f9af286e..d7f9af286e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html b/files/fr/web/javascript/reference/global_objects/number/valueof/index.html index ad57b1599c..ad57b1599c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html +++ b/files/fr/web/javascript/reference/global_objects/number/valueof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html b/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html index 77c16bfe51..77c16bfe51 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html b/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html index 21dce0f35e..21dce0f35e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html b/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html index fcb6bc6f0b..fcb6bc6f0b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html b/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html index 0c67d3c5f8..0c67d3c5f8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html b/files/fr/web/javascript/reference/global_objects/object/assign/index.html index 8fdbdde216..8fdbdde216 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/assign/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html b/files/fr/web/javascript/reference/global_objects/object/constructor/index.html index 4630ec0f1e..4630ec0f1e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/constructor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/create/index.html b/files/fr/web/javascript/reference/global_objects/object/create/index.html index 67a36a268a..67a36a268a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/create/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/create/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html index 01647f7dec..01647f7dec 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html index e7222df8ba..e7222df8ba 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html b/files/fr/web/javascript/reference/global_objects/object/entries/index.html index 3677bdc3f1..3677bdc3f1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/entries/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html b/files/fr/web/javascript/reference/global_objects/object/freeze/index.html index e8c8d7febe..e8c8d7febe 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/freeze/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html b/files/fr/web/javascript/reference/global_objects/object/fromentries/index.html index 0566ef1d36..0566ef1d36 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/fromentries/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html index 5186c3b2b6..5186c3b2b6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html index 718833d4c4..718833d4c4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html index 499f274e68..499f274e68 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html index c296fef13f..c296fef13f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html index c001f9e8c0..c001f9e8c0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html index 4a5a5434ce..4a5a5434ce 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/index.html b/files/fr/web/javascript/reference/global_objects/object/index.html index bc750b5652..bc750b5652 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/is/index.html b/files/fr/web/javascript/reference/global_objects/object/is/index.html index 6e909d1fdb..6e909d1fdb 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/is/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/is/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.html index ae82dd912f..ae82dd912f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html index ceb8c242ef..ceb8c242ef 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html index 2777d794c2..2777d794c2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html b/files/fr/web/javascript/reference/global_objects/object/issealed/index.html index 750efbf49f..750efbf49f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/issealed/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html b/files/fr/web/javascript/reference/global_objects/object/keys/index.html index 4cd9891d66..4cd9891d66 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/keys/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html index 8b86cba0a4..8b86cba0a4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html index d1caefe8c3..d1caefe8c3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html b/files/fr/web/javascript/reference/global_objects/object/proto/index.html index 937a9f564c..937a9f564c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/proto/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html b/files/fr/web/javascript/reference/global_objects/object/seal/index.html index 3a111936e6..3a111936e6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/seal/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html index 67ec870d90..67ec870d90 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html index 1a8069abcf..1a8069abcf 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html b/files/fr/web/javascript/reference/global_objects/object/tosource/index.html index b86197d864..b86197d864 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html b/files/fr/web/javascript/reference/global_objects/object/tostring/index.html index 4d25f9b107..4d25f9b107 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html b/files/fr/web/javascript/reference/global_objects/object/valueof/index.html index fea1e23cc0..fea1e23cc0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/valueof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/object/values/index.html b/files/fr/web/javascript/reference/global_objects/object/values/index.html index f1630341fa..f1630341fa 100644 --- a/files/fr/web/javascript/reference/objets_globaux/object/values/index.html +++ b/files/fr/web/javascript/reference/global_objects/object/values/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html b/files/fr/web/javascript/reference/global_objects/parsefloat/index.html index aea43383fb..aea43383fb 100644 --- a/files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html +++ b/files/fr/web/javascript/reference/global_objects/parsefloat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/parseint/index.html b/files/fr/web/javascript/reference/global_objects/parseint/index.html index 250e4edb78..250e4edb78 100644 --- a/files/fr/web/javascript/reference/objets_globaux/parseint/index.html +++ b/files/fr/web/javascript/reference/global_objects/parseint/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/all/index.html b/files/fr/web/javascript/reference/global_objects/promise/all/index.html index 4cc24f3cc5..4cc24f3cc5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/all/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/all/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html b/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html index 362df28f88..362df28f88 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/any/index.html b/files/fr/web/javascript/reference/global_objects/promise/any/index.html index 7ce571e20c..7ce571e20c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/any/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/any/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html b/files/fr/web/javascript/reference/global_objects/promise/catch/index.html index 6fd60b4c6d..6fd60b4c6d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/catch/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html b/files/fr/web/javascript/reference/global_objects/promise/finally/index.html index b880bc4166..b880bc4166 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/finally/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/index.html b/files/fr/web/javascript/reference/global_objects/promise/index.html index 36624cf3eb..36624cf3eb 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/race/index.html b/files/fr/web/javascript/reference/global_objects/promise/race/index.html index afb407d7db..afb407d7db 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/race/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/race/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html b/files/fr/web/javascript/reference/global_objects/promise/reject/index.html index d792a2eaa4..d792a2eaa4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/reject/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.html index abda218c20..abda218c20 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/then/index.html b/files/fr/web/javascript/reference/global_objects/promise/then/index.html index b077425e5a..b077425e5a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/promise/then/index.html +++ b/files/fr/web/javascript/reference/global_objects/promise/then/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/index.html b/files/fr/web/javascript/reference/global_objects/proxy/index.html index 095515482d..095515482d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html index 21f1d44817..21f1d44817 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html index 90eb5f0105..90eb5f0105 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html index ea23d3c8e3..ea23d3c8e3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html index 15828b99b3..15828b99b3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html index 0173263d99..0173263d99 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html index 457d906b81..457d906b81 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html index 1b5f73d3db..1b5f73d3db 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html index faded452ad..faded452ad 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html index 0611c7bcd2..0611c7bcd2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html index df26cad63d..df26cad63d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html index b60a836ded..b60a836ded 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html index e62fa36d4e..e62fa36d4e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html index 11270be519..11270be519 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html index 61c288637a..61c288637a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html index 794c7f95be..794c7f95be 100644 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html +++ b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html b/files/fr/web/javascript/reference/global_objects/rangeerror/index.html index e57f56c4dd..e57f56c4dd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/rangeerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html b/files/fr/web/javascript/reference/global_objects/referenceerror/index.html index 497cd92dd5..497cd92dd5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/referenceerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.html index b6f27bc995..b6f27bc995 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_méthodes_object/index.html b/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html index 2c8844e085..2c8844e085 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_méthodes_object/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html b/files/fr/web/javascript/reference/global_objects/reflect/construct/index.html index 9f61844a66..9f61844a66 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/construct/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html index 71d6e6b60f..71d6e6b60f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html index f5ba3abedc..f5ba3abedc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html b/files/fr/web/javascript/reference/global_objects/reflect/get/index.html index 8538b87538..8538b87538 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/get/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html index 77db7ad5e1..77db7ad5e1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html index c59fff975a..c59fff975a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html b/files/fr/web/javascript/reference/global_objects/reflect/has/index.html index 66b230f065..66b230f065 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/has/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/index.html b/files/fr/web/javascript/reference/global_objects/reflect/index.html index 8a1383c7b5..8a1383c7b5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html index bdb266575c..bdb266575c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html index 9372830b80..9372830b80 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html index c7f202f685..c7f202f685 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html b/files/fr/web/javascript/reference/global_objects/reflect/set/index.html index 8d37acc413..8d37acc413 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/set/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html index 8d267952c0..8d267952c0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html +++ b/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html index 7adea1beff..7adea1beff 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html index 82fcef5aa6..82fcef5aa6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html index 8d2f44115e..8d2f44115e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html index f01c42c1d0..f01c42c1d0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html index 00f4bbb507..00f4bbb507 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html index 0581e2a64d..0581e2a64d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.html index 4ce0f1f857..4ce0f1f857 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html index 37335fe2c0..37335fe2c0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html b/files/fr/web/javascript/reference/global_objects/regexp/exec/index.html index 6db78d71f3..6db78d71f3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/exec/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.html index c110c30d38..c110c30d38 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html b/files/fr/web/javascript/reference/global_objects/regexp/global/index.html index 3c9666e0bf..3c9666e0bf 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/global/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html index dfdf02cbad..dfdf02cbad 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/index.html b/files/fr/web/javascript/reference/global_objects/regexp/index.html index 7ac6296f1f..7ac6296f1f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html b/files/fr/web/javascript/reference/global_objects/regexp/input/index.html index 14a14258a9..14a14258a9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/input/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html index 21c024c57a..21c024c57a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html index 08669d885b..08669d885b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html index da607ed4bc..da607ed4bc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html b/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html index e886719276..e886719276 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html index 4e73d4e5a5..4e73d4e5a5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html b/files/fr/web/javascript/reference/global_objects/regexp/n/index.html index ecbda5eac8..ecbda5eac8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/n/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html b/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html index 924c4e564d..924c4e564d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html b/files/fr/web/javascript/reference/global_objects/regexp/source/index.html index 53d8e7a93f..53d8e7a93f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/source/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html index 27dc60d802..27dc60d802 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html b/files/fr/web/javascript/reference/global_objects/regexp/test/index.html index a68e3eb976..a68e3eb976 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/test/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html b/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html index 976fb23117..976fb23117 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html index a06f740075..a06f740075 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html index e4400b5f35..e4400b5f35 100644 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html +++ b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html index de86a491fa..de86a491fa 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html b/files/fr/web/javascript/reference/global_objects/set/@@species/index.html index dbf3152c4d..dbf3152c4d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/@@species/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/add/index.html b/files/fr/web/javascript/reference/global_objects/set/add/index.html index 2ccda95513..2ccda95513 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/add/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/add/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/clear/index.html b/files/fr/web/javascript/reference/global_objects/set/clear/index.html index 1c6beb30c4..1c6beb30c4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/clear/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/clear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/delete/index.html b/files/fr/web/javascript/reference/global_objects/set/delete/index.html index eff24aa6d9..eff24aa6d9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/delete/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/delete/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/entries/index.html b/files/fr/web/javascript/reference/global_objects/set/entries/index.html index 0e791e4c8d..0e791e4c8d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/entries/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/entries/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html b/files/fr/web/javascript/reference/global_objects/set/foreach/index.html index e3b14c4eb8..e3b14c4eb8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/foreach/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/has/index.html b/files/fr/web/javascript/reference/global_objects/set/has/index.html index 08f9fcb55f..08f9fcb55f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/has/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/has/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/index.html b/files/fr/web/javascript/reference/global_objects/set/index.html index 9b44936cbc..9b44936cbc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/size/index.html b/files/fr/web/javascript/reference/global_objects/set/size/index.html index 83a5b8c9b7..83a5b8c9b7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/size/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/size/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/set/values/index.html b/files/fr/web/javascript/reference/global_objects/set/values/index.html index 2e1ab4b178..2e1ab4b178 100644 --- a/files/fr/web/javascript/reference/objets_globaux/set/values/index.html +++ b/files/fr/web/javascript/reference/global_objects/set/values/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html index d05477184d..d05477184d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html +++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html index b5c3a36e27..b5c3a36e27 100644 --- a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html +++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html index 3bf6abe8af..3bf6abe8af 100644 --- a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html +++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html index ada824203d..ada824203d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html b/files/fr/web/javascript/reference/global_objects/string/anchor/index.html index b5f3fb1ea1..b5f3fb1ea1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/anchor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/big/index.html b/files/fr/web/javascript/reference/global_objects/string/big/index.html index f661ae9149..f661ae9149 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/big/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/big/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/blink/index.html b/files/fr/web/javascript/reference/global_objects/string/blink/index.html index 086a52c93b..086a52c93b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/blink/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/blink/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/bold/index.html b/files/fr/web/javascript/reference/global_objects/string/bold/index.html index 4a2970edfc..4a2970edfc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/bold/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/bold/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/charat/index.html b/files/fr/web/javascript/reference/global_objects/string/charat/index.html index 712ffd5ff3..712ffd5ff3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/charat/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/charat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html b/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html index 1295d3edc5..1295d3edc5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.html index 016b2d6aae..016b2d6aae 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/concat/index.html b/files/fr/web/javascript/reference/global_objects/string/concat/index.html index 184d38d6fc..184d38d6fc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/concat/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/concat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html b/files/fr/web/javascript/reference/global_objects/string/endswith/index.html index 32e72b6791..32e72b6791 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/endswith/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html b/files/fr/web/javascript/reference/global_objects/string/fixed/index.html index 711a2310de..711a2310de 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/fixed/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html index 19e2c9ff30..19e2c9ff30 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html b/files/fr/web/javascript/reference/global_objects/string/fontsize/index.html index 33241acfbd..33241acfbd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/fontsize/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html b/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html index 5648f25e05..5648f25e05 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html b/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html index 387ecf4878..387ecf4878 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/includes/index.html b/files/fr/web/javascript/reference/global_objects/string/includes/index.html index 7da8d0e57e..7da8d0e57e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/includes/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/includes/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/index.html b/files/fr/web/javascript/reference/global_objects/string/index.html index acb1dd450e..acb1dd450e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html b/files/fr/web/javascript/reference/global_objects/string/indexof/index.html index 370aa6d397..370aa6d397 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/indexof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/italics/index.html b/files/fr/web/javascript/reference/global_objects/string/italics/index.html index 399dfe4113..399dfe4113 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/italics/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/italics/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html index c45c3fc280..c45c3fc280 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/length/index.html b/files/fr/web/javascript/reference/global_objects/string/length/index.html index 9e1614ddcd..9e1614ddcd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/length/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/length/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/link/index.html b/files/fr/web/javascript/reference/global_objects/string/link/index.html index e36f231d3c..e36f231d3c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/link/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/link/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.html index e7e2a2cffd..e7e2a2cffd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/match/index.html b/files/fr/web/javascript/reference/global_objects/string/match/index.html index cfa8ed4e58..cfa8ed4e58 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/match/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/match/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html b/files/fr/web/javascript/reference/global_objects/string/matchall/index.html index adf4f5bac6..adf4f5bac6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/matchall/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html b/files/fr/web/javascript/reference/global_objects/string/normalize/index.html index 398c9eaefe..398c9eaefe 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/normalize/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/padend/index.html b/files/fr/web/javascript/reference/global_objects/string/padend/index.html index 4bb1897fe1..4bb1897fe1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/padend/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/padend/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html b/files/fr/web/javascript/reference/global_objects/string/padstart/index.html index d5c3500027..d5c3500027 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/padstart/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/raw/index.html b/files/fr/web/javascript/reference/global_objects/string/raw/index.html index f509b557ce..f509b557ce 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/raw/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/raw/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html b/files/fr/web/javascript/reference/global_objects/string/repeat/index.html index 3245288bd9..3245288bd9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/repeat/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/replace/index.html b/files/fr/web/javascript/reference/global_objects/string/replace/index.html index 8d4f5d44a5..8d4f5d44a5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/replace/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/replace/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html b/files/fr/web/javascript/reference/global_objects/string/replaceall/index.html index d526ea36f7..d526ea36f7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/replaceall/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/search/index.html b/files/fr/web/javascript/reference/global_objects/string/search/index.html index 76ddab1f26..76ddab1f26 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/search/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/search/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/slice/index.html b/files/fr/web/javascript/reference/global_objects/string/slice/index.html index d01c172fec..d01c172fec 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/slice/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/slice/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/small/index.html b/files/fr/web/javascript/reference/global_objects/string/small/index.html index 080d6f7993..080d6f7993 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/small/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/small/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/split/index.html b/files/fr/web/javascript/reference/global_objects/string/split/index.html index bf5822183c..bf5822183c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/split/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/split/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html b/files/fr/web/javascript/reference/global_objects/string/startswith/index.html index 060bd27d32..060bd27d32 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/startswith/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/strike/index.html b/files/fr/web/javascript/reference/global_objects/string/strike/index.html index e53530aa1f..e53530aa1f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/strike/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/strike/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/sub/index.html b/files/fr/web/javascript/reference/global_objects/string/sub/index.html index 5b68b64892..5b68b64892 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/sub/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/sub/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/substr/index.html b/files/fr/web/javascript/reference/global_objects/string/substr/index.html index b747e71c56..b747e71c56 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/substr/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/substr/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/substring/index.html b/files/fr/web/javascript/reference/global_objects/string/substring/index.html index eedcb92d58..eedcb92d58 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/substring/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/substring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/sup/index.html b/files/fr/web/javascript/reference/global_objects/string/sup/index.html index f56e0f2a9b..f56e0f2a9b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/sup/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/sup/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html index 583232b3cf..583232b3cf 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html index 41e4a41e44..41e4a41e44 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html index 22a5b3f34a..22a5b3f34a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html b/files/fr/web/javascript/reference/global_objects/string/tosource/index.html index 19b1006e1d..19b1006e1d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html b/files/fr/web/javascript/reference/global_objects/string/tostring/index.html index ef3618a8b5..ef3618a8b5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.html index 9f456170cf..9f456170cf 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trim/index.html b/files/fr/web/javascript/reference/global_objects/string/trim/index.html index 963280c9e7..963280c9e7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/trim/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/trim/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html b/files/fr/web/javascript/reference/global_objects/string/trimend/index.html index e85452758d..e85452758d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/trimend/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html b/files/fr/web/javascript/reference/global_objects/string/trimstart/index.html index 320efbdfd6..320efbdfd6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/trimstart/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html b/files/fr/web/javascript/reference/global_objects/string/valueof/index.html index 58c9fb66bf..58c9fb66bf 100644 --- a/files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/valueof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html index 0866e25fa6..0866e25fa6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html index 0d28cc276d..0d28cc276d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html b/files/fr/web/javascript/reference/global_objects/symbol/description/index.html index c3a7d2d392..c3a7d2d392 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/description/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html b/files/fr/web/javascript/reference/global_objects/symbol/for/index.html index bb60102797..bb60102797 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/for/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html index 5616d20bda..5616d20bda 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/index.html b/files/fr/web/javascript/reference/global_objects/symbol/index.html index 6a0451f87b..6a0451f87b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html index 89046c2290..89046c2290 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html b/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html index b2752e1efa..b2752e1efa 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html index ea2e095f88..ea2e095f88 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html b/files/fr/web/javascript/reference/global_objects/symbol/match/index.html index 74939e18fd..74939e18fd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/match/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html index 93b8428c10..93b8428c10 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.html index e469681898..e469681898 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html b/files/fr/web/javascript/reference/global_objects/symbol/search/index.html index 02fed384b8..02fed384b8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/search/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html b/files/fr/web/javascript/reference/global_objects/symbol/species/index.html index 771782df4a..771782df4a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/species/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html b/files/fr/web/javascript/reference/global_objects/symbol/split/index.html index 4be991bee2..4be991bee2 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/split/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html index cd3aaed1ed..cd3aaed1ed 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html index 1816fe5c24..1816fe5c24 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html index ee2778bbde..ee2778bbde 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html index ba2e53b0b7..ba2e53b0b7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html index b026e13a40..b026e13a40 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html index 20e41ab280..20e41ab280 100644 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html +++ b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.html index 2f362a9467..2f362a9467 100644 --- a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html index 1a209ec17d..1a209ec17d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html index 0cbd8761a6..0cbd8761a6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html index a38c0c8d0e..a38c0c8d0e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html index b48d71dec5..b48d71dec5 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html index 8ede8e1fff..8ede8e1fff 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html index 948b4bb412..948b4bb412 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html index 3cc0a22542..3cc0a22542 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html index 14891965ba..14891965ba 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.html index 479490d910..479490d910 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html index 23b108a69f..23b108a69f 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html index fadb8339cd..fadb8339cd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.html index 97f578b914..97f578b914 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html index d1c2c65387..d1c2c65387 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html index b6e38156ff..b6e38156ff 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/from/index.html index d1e4dff361..d1e4dff361 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/from/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html index 84ff7ecc17..84ff7ecc17 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/index.html index aa22e02160..aa22e02160 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html index 0713bfd101..0713bfd101 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.html index 59ad42335e..59ad42335e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html index d9937137ba..d9937137ba 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html index 4e219c8c1a..4e219c8c1a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.html index 7d84b3b8ec..7d84b3b8ec 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.html index 938b46fe43..938b46fe43 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.html index c94611406e..c94611406e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/of/index.html index 18bea06502..18bea06502 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/of/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html index 4c8d852d32..4c8d852d32 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html index 141b38f5b8..141b38f5b8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html index 9fa9792bf6..9fa9792bf6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.html index 32247448e1..32247448e1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html index 4be18cbecc..4be18cbecc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.html index 31fb309ab9..31fb309ab9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html index d6a83dfc5b..d6a83dfc5b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html index 78456fb4cd..78456fb4cd 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html index 605a1d14be..605a1d14be 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html index b9a4932d9a..b9a4932d9a 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.html index 08f16af8f9..08f16af8f9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html +++ b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/typeerror/index.html b/files/fr/web/javascript/reference/global_objects/typeerror/index.html index ffaab9a317..ffaab9a317 100644 --- a/files/fr/web/javascript/reference/objets_globaux/typeerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/typeerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/uint16array/index.html b/files/fr/web/javascript/reference/global_objects/uint16array/index.html index bdac3e0e10..bdac3e0e10 100644 --- a/files/fr/web/javascript/reference/objets_globaux/uint16array/index.html +++ b/files/fr/web/javascript/reference/global_objects/uint16array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/uint32array/index.html b/files/fr/web/javascript/reference/global_objects/uint32array/index.html index a678150934..a678150934 100644 --- a/files/fr/web/javascript/reference/objets_globaux/uint32array/index.html +++ b/files/fr/web/javascript/reference/global_objects/uint32array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/uint8array/index.html b/files/fr/web/javascript/reference/global_objects/uint8array/index.html index 3e9c1599e6..3e9c1599e6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/uint8array/index.html +++ b/files/fr/web/javascript/reference/global_objects/uint8array/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html index f90e9a322b..f90e9a322b 100644 --- a/files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html +++ b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/undefined/index.html b/files/fr/web/javascript/reference/global_objects/undefined/index.html index 0e9e0a1cdc..0e9e0a1cdc 100644 --- a/files/fr/web/javascript/reference/objets_globaux/undefined/index.html +++ b/files/fr/web/javascript/reference/global_objects/undefined/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/unescape/index.html b/files/fr/web/javascript/reference/global_objects/unescape/index.html index 4d2adcae0d..4d2adcae0d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/unescape/index.html +++ b/files/fr/web/javascript/reference/global_objects/unescape/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/uneval/index.html b/files/fr/web/javascript/reference/global_objects/uneval/index.html index fabc5b0cf1..fabc5b0cf1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/uneval/index.html +++ b/files/fr/web/javascript/reference/global_objects/uneval/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/urierror/index.html b/files/fr/web/javascript/reference/global_objects/urierror/index.html index 7142b5dbe4..7142b5dbe4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/urierror/index.html +++ b/files/fr/web/javascript/reference/global_objects/urierror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html index 408fd7a539..408fd7a539 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html index 56f16a93e9..56f16a93e9 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.html index 88e13f92f3..88e13f92f3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.html index 6499d58bb7..6499d58bb7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/index.html index 27589afd41..27589afd41 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakmap/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/set/index.html index 8754e8acc7..8754e8acc7 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakmap/set/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html b/files/fr/web/javascript/reference/global_objects/weakset/add/index.html index d965e5b8ac..d965e5b8ac 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakset/add/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html b/files/fr/web/javascript/reference/global_objects/weakset/clear/index.html index b1a480bef3..b1a480bef3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakset/clear/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.html index e3cc7e72ba..e3cc7e72ba 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html b/files/fr/web/javascript/reference/global_objects/weakset/has/index.html index c4cd1f5eae..c4cd1f5eae 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakset/has/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/index.html b/files/fr/web/javascript/reference/global_objects/weakset/index.html index fd72c59ba4..fd72c59ba4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/index.html +++ b/files/fr/web/javascript/reference/global_objects/weakset/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html index 9922106222..9922106222 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html index 69afe21895..69afe21895 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html index 8dfca177d4..8dfca177d4 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/global/index.html index 94ae405b8e..94ae405b8e 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/global/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/index.html index b5932b027c..b5932b027c 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html index cec4fddea3..cec4fddea3 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html index 93c6a9b324..93c6a9b324 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html index 3c5f54f844..3c5f54f844 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html index a53701dd6d..a53701dd6d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html index be70427e74..be70427e74 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html index e7c8674713..e7c8674713 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html index 89a98ecbed..89a98ecbed 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html index b6469924d1..b6469924d1 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html index 5b9185d4f6..5b9185d4f6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html index 9f30c87b7d..9f30c87b7d 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html index c486bbf8ae..c486bbf8ae 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.html index 7802ae2206..7802ae2206 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html index b35e50e466..b35e50e466 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html index 25c8ec97db..25c8ec97db 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html index 4e90a70f22..4e90a70f22 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.html index ab26074ab6..ab26074ab6 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html index d573097bc0..d573097bc0 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html index c7b57a88b8..c7b57a88b8 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html index c00eb54e12..c00eb54e12 100644 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html +++ b/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html diff --git a/files/fr/web/javascript/reference/instructions/default/index.html b/files/fr/web/javascript/reference/instructions/default/index.html deleted file mode 100644 index e2cc368115..0000000000 --- a/files/fr/web/javascript/reference/instructions/default/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Instructions/default -tags: - - JavaScript - - Keyword - - Reference -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Le mot-clé <strong><code>default</code> </strong>peut être utilisé à deux endroits en JavaScript : au sein d'une instruction {{jsxref("Instructions/switch", "switch")}} ou dans une instruction {{jsxref("Instructions/export", "export")}}.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<p>Dans une instruction {{jsxref("Instructions/switch", "switch")}} :</p> - -<pre class="syntaxbox">switch (expression) { - case valeur1: - // Les instructions exécutées quand le résultat - // de l'expression vaut valeur1 - [break;] - default: - // Les instructions exécutées quand aucune des valeurs - // ne correspond à la valeur de l'expression - [break;] -}</pre> - -<p>Dans une instruction {{jsxref("Instructions/export", "export")}} :</p> - -<pre class="syntaxbox">export default <em>nomN</em> </pre> - -<h2 id="Description">Description</h2> - -<p>Pour plus de détails, voir les pages sur :</p> - -<ul> - <li>L'instruction {{jsxref("Instructions/switch", "switch")}} et</li> - <li>L'instruction {{jsxref("Instructions/export", "export")}}.</li> -</ul> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_default_dans_une_instruction_switch">Utiliser <code>default</code> dans une instruction <code>switch</code></h3> - -<p>Dans l'exemple qui suit, si <code>expr</code> vaut "Bananes" ou "Pommes", le programme exécutera les instructions correspondantes à chacune de ces valeurs. Le mot-clé <code>default</code> permettra d'indiquer des instructions à exécuter dans les autres cas (<code>expr</code> ne correspond à aucun des cas).</p> - -<pre class="brush: js">switch (expr) { - case "Bananes": - console.log("Les bananes sont à 1.59€ le kilo."); - break; - case "Pommes": - console.log("Les pommes sont à 0.78€ le kilo."); - break; - default: - console.log("Désolé, nous n'avons plus de " + expr + "."); -}</pre> - -<h3 id="Utiliser_default_avec_export">Utiliser <code>default</code> avec <code>export</code></h3> - -<p>Si on souhaite exporter une seule valeur ou avoir une valeur par défaut dans un module, on peut utiliser un export avec <code>default</code> :</p> - -<pre class="brush: js">// module "mon-module.js" -let cube = function cube(x) { - return x * x * x; -} -export default cube;</pre> - -<p>Dans un autre script, on pourra simplement faire référence à l'export par défaut :</p> - -<pre class="brush: js">// module "autre-module.js" -import maFonction from 'mon-module'; -console.log(maFonction(3)); // 27 -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'Instruction switch')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.default")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/export", "export")}}</li> - <li>{{jsxref("Instructions/switch", "switch")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/les_protocoles_iteration/index.html b/files/fr/web/javascript/reference/iteration_protocols/index.html index 26a89a63e8..26a89a63e8 100644 --- a/files/fr/web/javascript/reference/les_protocoles_iteration/index.html +++ b/files/fr/web/javascript/reference/iteration_protocols/index.html diff --git a/files/fr/web/javascript/reference/grammaire_lexicale/index.html b/files/fr/web/javascript/reference/lexical_grammar/index.html index 62931aa6a4..62931aa6a4 100644 --- a/files/fr/web/javascript/reference/grammaire_lexicale/index.html +++ b/files/fr/web/javascript/reference/lexical_grammar/index.html diff --git a/files/fr/web/javascript/reference/mots_réservés/index.html b/files/fr/web/javascript/reference/mots_réservés/index.html deleted file mode 100644 index dae1cd3126..0000000000 --- a/files/fr/web/javascript/reference/mots_réservés/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Mots réservés -slug: Web/JavaScript/Reference/Mots_réservés -translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords -translation_of_original: Web/JavaScript/Reference/Reserved_Words ---- -<h3 id="Introduction">Introduction</h3> - -<p>Cet annexe présente les mots réservés. Les mots réservés ne doivent pas être utilisés en tant que noms de variables, de fonctions, de méthodes ou d'identifiants d'objets parce-que <a href="/fr/ECMAScript" title="fr/ECMAScript">ECMAScript</a> spécifie une utilité spéciale pour eux.</p> - -<h3 id="Mots_actuellement_réservés">Mots actuellement réservés</h3> - -<p>Voici la liste des mots réservés actuellement utilisés en JavaScript :</p> - -<ul> - <li><a href="/en/JavaScript/Reference/Statements/break" title="en/JavaScript/Reference/Statements/break">break</a></li> - <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">case</a></li> - <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">catch</a></li> - <li><a href="/en/JavaScript/Reference/Statements/continue" title="en/JavaScript/Reference/Statements/continue">continue</a></li> - <li><a href="/en/JavaScript/Reference/Statements/debugger" title="en/JavaScript/Reference/Statements/debugger">debugger</a></li> - <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">default</a></li> - <li><a href="/en/JavaScript/Reference/Operators/Special/delete" title="en/JavaScript/Reference/Operators/Special/delete">delete</a></li> - <li><a href="/en/JavaScript/Reference/Statements/do...while" title="en/JavaScript/Reference/Statements/do...while">do</a></li> - <li><a href="/en/JavaScript/Reference/Statements/if...else" title="en/JavaScript/Reference/Statements/if...else">else</a></li> - <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">finally</a></li> - <li><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></li> - <li><a href="/en/JavaScript/Reference/Statements/function" title="en/JavaScript/Reference/Statements/function">function</a></li> - <li><a href="/en/JavaScript/Reference/Statements/if...else" title="en/JavaScript/Reference/Statements/if...else">if</a></li> - <li><a href="/en/JavaScript/Reference/Statements/for...in" title="en/JavaScript/Reference/Statements/for...in">in</a></li> - <li><a href="/en/JavaScript/Reference/Operators/Special/instanceof" title="en/JavaScript/Reference/Operators/Special/instanceof">instanceof</a></li> - <li><a href="/en/JavaScript/Reference/Operators/Special/new" title="en/JavaScript/Reference/Operators/Special/new">new</a></li> - <li><a href="/en/JavaScript/Reference/Statements/return" title="en/JavaScript/Reference/Statements/return">return</a></li> - <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">switch</a></li> - <li><a href="/en/JavaScript/Reference/Operators/Special/this" title="en/JavaScript/Reference/Operators/Special/this">this</a></li> - <li><a href="/en/JavaScript/Reference/Statements/throw" title="en/JavaScript/Reference/Statements/throw">throw</a></li> - <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">try</a></li> - <li><a href="/en/JavaScript/Reference/Operators/Special/typeof" title="en/JavaScript/Reference/Operators/Special/typeof">typeof</a></li> - <li><a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var">var</a></li> - <li><a href="/en/JavaScript/Reference/Operators/Special/void" title="en/JavaScript/Reference/Operators/Special/void">void</a></li> - <li><a href="/en/JavaScript/Reference/Statements/while" title="en/JavaScript/Reference/Statements/while">while</a></li> - <li><a href="/en/JavaScript/Reference/Statements/with" title="en/JavaScript/Reference/Statements/with">with</a></li> -</ul> - -<h3 id="Mots_réservés_dans_le_futur">Mots réservés dans le futur</h3> - -<p>Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript. Bien qu'ils ne soient actuellement pas utilisés, ils ne peuvent pas servir d'identifiants d'objets car ils seront bientôt fonctionnels. (Notez que pour le moment, Mozilla réserve ces mots-clés seulement dans le code en mode strict. La plupart des autres navigateurs réservent ces mots-clés pour tout le code, qu'il soit strict ou non. Leur utilisation est souvent incompatbile entre les différents navigateurs. Mozilla réservera ces mots-clés à un code normal à l'avenir, pour correspondre aux spécifications des autres navigateurs).</p> - -<p>{{ gecko_minversion_header("2.1") }}</p> - -<div class="note"><strong>Note: </strong>En commençant avec Javascript 1.9 (Firefox 5), ces derniers seront réservés même lorsque vous n'êtes pas en mode strict.<br> -<strong>Note: La version de JavaScript ci-dessus n'est pas officielle.</strong></div> - -<ul> - <li>class</li> - <li>enum</li> - <li><a href="/en/JavaScript/Reference/Statements/export" title="en/JavaScript/Reference/Statements/export">export</a></li> - <li>extends</li> - <li><a href="/en/JavaScript/Reference/Statements/import" title="en/JavaScript/Reference/Statements/import">import</a></li> - <li>super</li> -</ul> - -<p>Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript lorsqu'ils se situent dans de code en mode strict, excepté lorsque <code>let</code> et <code>yield</code> ont leurs fonctions traditionnelles dans le code compilé comme JavaScript 1.7 ou plus:</p> - -<ul> - <li>implements</li> - <li>interface</li> - <li><a href="/JavaScript/Reference/Statements/let" title="JavaScript/Reference/Statements/let">let</a></li> - <li>package</li> - <li>private</li> - <li>protected</li> - <li>public</li> - <li>static</li> - <li><a href="/en/JavaScript/Reference/Statements/yield" title="en/JavaScript/Reference/Statements/yield">yield</a></li> -</ul> - -<p>Note that while <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const">const</a> is reserved as a future keyword by the ECMAScript specification, Mozilla and most other browsers implement it as a non-standard extension that may be standardized in a future version of ECMAScript. Further, <a href="/en/JavaScript/Reference/Statements/export" title="en/JavaScript/Reference/Statements/export">export</a> and <a href="/en/JavaScript/Reference/Statements/import" title="en/JavaScript/Reference/Statements/import">import</a> were once implemented in Mozilla but have returned to reserved status in recent releases.</p> - -<p>Additionally, the literals <code>null</code>, <code>true</code>, and <code>false</code> are reserved in ECMAScript for their normal uses.</p> - -<h2 id="Reserved_Word_Usage">Reserved Word Usage</h2> - -<p>Reserved Words actually only apply to Identifiers (vs. <span class="comment-copy">IdentifierNames) </span>. <span class="comment-copy">As described in <a href="http://es5.github.com/#A.1" rel="nofollow">es5.github.com/#A.1</a>, these are all IdentifierNames which do not exclude ReservedWords.</span></p> - -<p><span class="comment-copy"><code>a.import</code></span><br> - <span class="comment-copy"><code>a["import"]</code></span><br> - <span class="comment-copy"><code>a = { import: "test" }</code>.</span></p> - -<p><span class="comment-copy">On the other hand the following is illegal because it's an Identifier, which is an IdentifierName without the Reserved Words. Identifiers are used for FunctionDeclaration and FunctionExpression.</span></p> - -<p><span class="comment-copy"><code>function import() {}</code></span></p> - -<p> </p> - -<p>{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Palabras_Reservadas", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Mots_r\u00e9serv\u00e9s", "ja": "ja/Core_JavaScript_1.5_Reference/Reserved_Words", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/S\u0142owa_zarezerwowane" } ) }}</p> diff --git a/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html deleted file mode 100644 index cb423c22f3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Array/prototype -tags: - - Array - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>Array.prototype</code></strong> représente le prototype du constructeur {{jsxref("Array")}} et permet d'ajouter de nouvelles propriétés à l'ensemble des objets <code>Array</code>.</p> - -<h2 id="Description">Description</h2> - -<p>Les instances d'<code>Array</code> héritent de <code>Array.prototype</code>. Comme pour tous les constructeurs, vous pouvez changer l'objet prototype du constructeur afin de modifier toutes les instances d'<code>Array</code>. On peut utiliser cette méthode afin de réaliser des prothèses/<em>polyfills</em>.</p> - -<p>Toutefois, si on utilise le prototype pour ajouter des méthodes ou propriétés non-standards à <code>Array</code>, cela peut entraîner certains problèmes au sein de votre code ou lors de l'<a href="https://developers.google.com/web/updates/2018/03/smooshgate">ajout de fonctionnalités à JavaScript</a>.</p> - -<p>Fait peu connu : <code>Array.prototype</code> est lui-même un objet {{jsxref("Array")}} :</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true</pre> - -<p>{{js_property_attributes(0,0,0)}}</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>Array.prototype.constructor</dt> - <dd>Cette propriété définit la fonction qui crée le prototype d'un objet.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Cette propriété renvoie le nombre d'éléments d'un tableau.</dd> - <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> - <dd>Un symbole contenant les noms des propriétés à exclure lors d'une liaison effectuée avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<h3 id="Mutateurs">Mutateurs</h3> - -<p>Ces méthodes modifient le tableau :</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> - <dd>Cette méthode copie une série d'éléments de tableau dans le tableau.</dd> - <dt>{{jsxref("Array.prototype.fill()")}}</dt> - <dd>Cette méthode remplie tous les éléments d'un tableau avec une même valeur, éventuellement entre un indice de début et un indice de fin.</dd> -</dl> - -<dl> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Cette méthode supprime le dernier élément d'un tableau et retourne cet élément.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Cette méthode ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle longueur du tableau.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Cette méthode renverse l'ordre des éléments d'un tableau - le premier élément devient le dernier, et le dernier devient le premier. Le tableau est modifié par cette méthode.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Cette méthode supprime le premier élément d'un tableau et retourne cet élément.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Cette méthode trie en place les éléments d'un tableau et retourne le tableau.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Cette méthode permet d'ajouter ou de retirer des éléments d'un tableau.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Cette méthode permet d'ajouter un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.</dd> -</dl> - -<h3 id="Accesseurs">Accesseurs</h3> - -<p>Ces méthodes ne modifient pas l'état du tableau et en retournent une représentation.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Cette méthode renvoie un nouveau tableau constitué de ce tableau concaténé avec un ou plusieurs autre(s) tableau(x) et/ou valeur(s).</dd> - <dt>{{jsxref("Array.prototype.includes()")}}</dt> - <dd>Cette méthode détermine si le tableau contient ou non un certain élément. Elle renvoie <code>true</code> ou <code>false</code> selon le cas de figure.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Cette méthode retourne le premier (plus petit) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Cette méthode concatène tous les éléments d'un tableau en une chaîne de caractères.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Cette méthode retourne le dernier (plus grand) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Cette méthode extrait une portion d'un tableau pour retourner un nouveau tableau constitué de ces éléments.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{Non-standard_inline()}}</dt> - <dd>Cette méthode renvoie la représentation littérale du tableau spécifié ; vous pouvez utiliser cette valeur pour créer un nouveau tableau. Elle redéfinit la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Cette méthode renvoie une chaîne de caractères représentant le tableau et ses éléments. Elle redéfinit la méthode {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Cette méthode retourne une chaîne de caractères représentant le tableau et ses éléments en tenant compte de la locale. Elle redéfinit la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd> -</dl> - -<h3 id="Méthodes_itératives">Méthodes itératives</h3> - -<p>Plusieurs méthodes utilisent des fonctions comme argument. Ces fonctions sont utilisées afin de traiter, d'une façon ou d'une autre, chaque élément du tableau. Lorsque ces méthodes sont invoquées, on évalue la longueur du tableau et on traite chacun des éléments dont l'indice est inférieur à la longueur (les éléments ajoutés en cours de route ne seront pas traités). Les autres modifications apportées au tableau (affecter une valeur ou supprimer un élément) peuvent avoir un impact sur les traitements des éléments suivants. Bien que ce comportement soit bien défini pour les différentes méthodes, afin de ne pas complexifier le code outre-mesure, lorsqu'on modifiera un tableau, on en créera une copie avant d'invoquer une telle méthode.</p> - -<dl> - <dt>{{jsxref("Array.prototype.entries()")}}</dt> - <dd>Cette méthode renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clef/valeur pour chaque index du tableau.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Cette méthode renvoie <code>true</code> si chaque élément du tableau satisfait la fonction de test passée en paramètre.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Cette méthode crée un nouveau tableau contenant tous les éléments du tableau pour lesquels la fonction de filtrage passée en argument retourne <code>true</code>.</dd> - <dt>{{jsxref("Array.prototype.find()")}}</dt> - <dd>Cette méthode renvoie la valeur d'un élément trouvé dans le tableau et qui satisfait la fonction de test passée en paramètre, <code>undefined</code> sinon.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> - <dd>Cette méthode renvoie l'index d'un élément trouvé dans le tableau qui satisfait la fonction de test passée en paramètre ou -1 si aucun ne la satisfait.</dd> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Cette méthode appelle une fonction sur chacun des éléments du tableau.</dd> - <dt>{{jsxref("Array.prototype.keys()")}}</dt> - <dd>Cette méthode retourne un nouvel <code>Array Iterator</code> qui contient les indices pour chaque élément dans le tableau.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Cette méthode crée un nouveau tableau contenant les images de chaque élément du tableau de départ par la fonction passée en paramètre.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de gauche à droite) de façon à obtenir une unique valeur à la fin.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de droite à gauche) de façon à obtenir une unique valeur à la fin.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Cette méthode renvoie <code>true</code> si au moins un élément du le tableau satisfait la fonction de test passée en paramètre.</dd> - <dt>{{jsxref("Array.prototype.values()")}}</dt> - <dd>Cette méthode renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs de chaque indice du tableau.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>Cette méthode renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs de chaque indice du tableau.</dd> -</dl> - -<h3 id="Méthodes_génériques_(non-standard)">Méthodes génériques (non-standard)</h3> - -<p>De nombreuses méthodes des objets JavaScript de type <code>Array</code> sont conçues pour être appliquées de façon générale à tous les objets qui « ressemblent » à des tableaux. C'est à dire qu'elles peuvent être appliquées à n'importe quel objet qui possède une propriété <code>length</code>, et qui contint des propriétés indexées numériquement (comme lorsque l'on écrit <code>array[5]</code>). Certaines méthodes, comme {{jsxref("Array.join", "join")}}, se contentent de lire la propriété <code>length</code> et d'accéder à ces propriétés numériques de l'objet sur lesquelles on les appelle. D'autres, comme {{jsxref("Array.reverse", "reverse")}}, ont besoin de modifier les propriétés numériques et la longueur d'un objet ; ces méthodes ne peuvent dès lors pas être appelées sur des objets tels que des {{jsxref("String", "String")}}, qui ne permettent pas la modification de leur propriété <code>length</code> ni de leurs propriétés numériques.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Ajout des méthodes <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES7')}}</td> - <td>Ajout de la méthode <code>includes()</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.Array.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array", "Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html deleted file mode 100644 index a0c018f6ed..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: ArrayBuffer.prototype -slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype -tags: - - ArrayBuffer - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>ArrayBuffer.prototype</code></strong> représente le prototype de l'objet {{jsxref("ArrayBuffer")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de <code>ArrayBuffer</code> héritent toutes de <code>ArrayBuffer.prototype</code>. Il est donc possible de modifier le protoype du constructeur pour apporter des changements à chacune des instances <code>ArrayBuffer</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>ArrayBuffer.prototype.constructor</dt> - <dd>Définit la fonction qui crée le prototype d'un objet. La valeur initiale correspond au constructeur natif <code>ArrayBuffer</code>.</dd> - <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>La taille du tableau en octets. Cette propriété est déterminée lors de la construction du tableau et ne peut pas être changée. <code>Propriété en lecture seule</code>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> - <dd>Renvoie un nouvel <code>ArrayBuffer</code> dont le contenu est une copie des octets contenus dans l'objet <code>ArrayBuffer</code> depuis <code>begin</code> (compris), jusqu'à <code>end</code> (non-compris). Si <code>begin</code> ou <code>end</code> est négatif, cela fait référence à l'indice à partir de la fin du tableau et non à l'indice à partir du début du tableau.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("ArrayBuffer")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html deleted file mode 100644 index 7343f73357..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype -tags: - - Experimental - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>AsyncFunction.prototype</strong></code> représente le prototype de l'objet {{jsxref("AsyncFunction")}}.</p> - -<h2 id="Description">Description</h2> - -<p>Les objets {{jsxref("AsyncFunction")}} héritent de <code>AsyncFunction.prototype</code>. <code>AsyncFunction.prototype</code> ne peut pas être modifiée.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code><strong>AsyncFunction.constructor</strong></code></dt> - <dd>La valeur initiale est {{jsxref("AsyncFunction")}}.</dd> - <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> - <dd>Renvoie <code>"AsyncFunction"</code>.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Définition initiale dans ES2017.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("AsyncFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html deleted file mode 100644 index e746754e5e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: BigInt.prototype -slug: Web/JavaScript/Reference/Objets_globaux/BigInt/prototype -tags: - - BigInt - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>BigInt.prototype</code></strong> représente le prototype du constructeur {{jsxref("BigInt")}}.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Description">Description</h2> - -<p>L'ensemble des instances de {{jsxref("BigInt")}} héritent de <code>BigInt.prototype</code>. Le prototype du constructeur {{jsxref("BigInt")}} peut être modifié afin de modifier l'ensemble des instances de {{jsxref( "BigInt")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>BigInt.prototype.constructor</code></dt> - <dd>Cette propriété renvoie la fonction qui a crée cette instance. Par défaut, c'est l'objet {{jsxref("BigInt")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("BigInt.prototype.toLocaleString()")}}</dt> - <dd>Cette méthode renvoie une chaîne de caractères représentant le nombre et adaptée à la locale choisie. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("BigInt.prototype.toString()")}}</dt> - <dd>Cette méthode renvoie une chaîne de caractères représentant l'objet selon la base indiquée. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("BigInt.prototype.valueOf()")}}</dt> - <dd>Cette méthode renvoie la valeur primitive de l'objet indiqué. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Etat</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype">BigInt.prototype</a></td> - <td>Brouillon de niveau 3</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p> diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html deleted file mode 100644 index 8aebedeab9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Boolean/prototype -tags: - - Boolean - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>Boolean.prototype</code></strong> représente le prototype pour le constructeur {{jsxref("Boolean")}}.</p> - -<p>{{js_property_attributes(0,0,0)}}</p> - -<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("Boolean")}} hérite de {{jsxref("Boolean.prototype")}}. Vous pouvez utiliser l'objet prototype du constructeur pour ajouter des propriétés ou des méthodes de toutes les instances <code>Boolean</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Boolean.prototype.constructor</code></dt> - <dd>Renvoie la fonction de création d'un prototype d'instance. Il s'agit de la fonction {{jsxref("Boolean")}} par défaut.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Boolean.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> - <dd>Renvoie une chaine de caractères contenant le code source de l'objet {{jsxref("Boolean")}} ; celle-ci peut être utilisée pour créer un objet équivalent. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> -</dl> - -<dl> - <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> - <dd>Renvoie une chaine de caractères contenant soit « <code>true</code> » soit « <code>false</code> » selon la valeur de l'objet. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd> -</dl> - -<dl> - <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> - <dd>Renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html deleted file mode 100644 index fd20057af1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: DataView.prototype -slug: Web/JavaScript/Reference/Objets_globaux/DataView/prototype -tags: - - DataView - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/DataView -translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>DataView</strong></code><strong><code>.prototype</code></strong> représente le prototype de l'objet {{jsxref("DataView")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Chacune des instances de <code>DataView</code> hérite de <code>DataView.prototype</code>. Comme pour chacun des constructeurs, il est possible de changer le prototype du constructeur afin d'apporter des modifications pour toutes les instances de <code>DataView</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{jsxref("DataView.prototype.constructor")}}</dt> - <dd>Définit la fonction qui permet de créer le prototype d'un objet. La valeur initiale correspond au constructeur natif standard <code>DataView</code>.</dd> - <dt>{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}</dt> - <dd>L'{{jsxref("ArrayBuffer")}} référencé par cette vue. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd> - <dt>{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>La longueur, exprimée en octets, de la vue à partir du début de son {{jsxref("ArrayBuffer")}}. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd> - <dt>{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>Le décalage, exprimé en octets, entre le début de la vue et du {{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<h3 id="Lecture">Lecture</h3> - -<dl> - <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt> - <dd>Obtient un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.</dd> - <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt> - <dd>Obtient un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt> - <dd>Obtient un entier signé codé sur 16 bits (<em>short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt> - <dd>Obtient un entier non-signé codé sur 16 bits (<em>unsigned short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt> - <dd>Obtient un entier signé codé sur 32 bits (<em>long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt> - <dd>Obtient un entier non-signé codé sur 32 bits (<em>unsigned long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt> - <dd>Obtient un flottant codé sur 32 bits (<em>float</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt> - <dd>Obtient un flottant codé sur 64 bits (<em>double</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.getBigInt64()")}}</dt> - <dd>Obtient un entier signé sur 64 bits (<em>long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.getBigUint64()")}}</dt> - <dd>Obtient un entier non-signé sur 64 bits (<em>unsigned long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> -</dl> - -<h3 id="Écriture">Écriture</h3> - -<dl> - <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt> - <dd>Enregistre un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.</dd> - <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt> - <dd>Enregistre un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt> - <dd>Enregistre un entier signé codé sur 16 bits (<em>short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt> - <dd>Enregistre un entier non-signé codé sur 16 bits (<em>unsigned short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt> - <dd>Enregistre un entier signé codé sur 32 bits (<em>long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt> - <dd>Enregistre un entier non-signé codé sur 32 bits (<em>unsigned long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt> - <dd>Enregistre un flottant codé sur 32 bits (<em>float</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt> - <dd>Enregistre un flottant codé sur 64 bits (<em>double</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.setBigInt64()")}}</dt> - <dd>Enregistre un entier signé sur 64 bits (<em>long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> - <dt>{{jsxref("DataView.prototype.setBigUint64()")}}</dt> - <dd>Enregistre un entier non-signé sur 64 bits (<em>unsigned long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-dataview.prototype', 'DataView.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.DataView.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html deleted file mode 100644 index 5d65e47b12..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Date.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Date/prototype -tags: - - Date - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Date.prototype</strong></code> représente le prototype du constructeur {{jsxref("Date")}}.</p> - -<div>{{js_property_attributes(0,0,1)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("Date")}} JavaScript héritent de <code>Date.prototype</code>. Le prototype du constructeur peut être modifié afin d'altérer l'ensemble des instances de <code>Date</code> pour y ajouter des propriétés et/ou des méthodes.</p> - -<p>Pour des questions de compatibilité avec le calcul des millénaires (en d'autres termes, pour prendre en compte l'année 2000), il faut toujours renseigner l'année entière ; par exemple, utilisez 1998, et non 98. Afin d'obtenir ces valeurs JavaScript possède les méthodes {{jsxref("Date/getFullYear", "getFullYear()")}}, {{jsxref("Date/setFullYear", "setFullYear()")}}, {{jsxref("Date/getUTCFullYear", "getUTCFullYear()")}} et {{jsxref("Date/setUTCFullYear", "setUTCFullYear()")}}.</p> - -<p>Avec ECMAScript 6, l'objet <code>Date.prototype</code> n'est plus une instance de {{jsxref("Date")}}, c'est un objet « ordinaire ».</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>Date.prototype.constructor</dt> - <dd>Renvoie la fonction qui crée une instance de <code>Date</code>. Par défaut, ce sera le constructeur {{jsxref("Date", "Date")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<h3 id="Lecture_(getters)">Lecture (<em>getters</em>)</h3> - -<dl> - <dt>{{jsxref("Date.prototype.getDate()")}}</dt> - <dd>Renvoie le jour du mois (1-31) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.getDay()")}}</dt> - <dd>Renvoie le jour de la semaine (0-6) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> - <dd>Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.getHours()")}}</dt> - <dd>Renvoie l'heure (0-23) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> - <dd>Renvoie les millièmes de secondes (0-999) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> - <dd>Renvoie les minutes (0-59) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> - <dd>Renvoie le mois (0-11) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> - <dd>Renvoie les secondes (0-59) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.getTime()")}}</dt> - <dd>Renvoie la valeur numérique de la date spécifiée sous la forme du nombre de millisecondes depuis le 1<sup>er</sup> janvier 1970, 00:00:00 UTC (les valeurs renvoyées pour les dates antérieures seront négatives).</dd> - <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> - <dd>Renvoie le décalage de fuseau horaire en minutes pour l'heure locale courante.</dd> - <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> - <dd>Renvoie le jour (date) du mois (1-31) pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> - <dd>Renvoie le jour de la semaine (0-6) pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> - <dd>Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> - <dd>Renvoie les heures (0-23) pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> - <dd>Renvoie les millièmes de seconde (0-999) pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> - <dd>Renvoie les minutes (0-59) pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> - <dd>Renvoie le mois (0-11) pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> - <dd>Renvoie les secondes (0-59) pour la date spécifiée selon le temps universel</dd> - <dt>{{jsxref("Date.prototype.getYear()")}} {{ Deprecated_inline() }}</dt> - <dd>Renvoie l'année (habituellement avec 2 ou 3 chiffres) pour la date spécifiée selon l'heure locale. Utilisez plutôt {{jsxref("Date/getFullYear", "getFullYear()")}}.</dd> -</dl> - -<h3 id="Écriture_(setters)">Écriture (<em>setters</em>)</h3> - -<dl> - <dt>{{jsxref("Date.prototype.setDate()")}}</dt> - <dd>Définit le jour du mois pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> - <dd>Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.setHours()")}}</dt> - <dd>Définit les heures pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> - <dd>Définit les millièmes de seconde pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> - <dd>Définit les minutes pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> - <dd>Définit le mois pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> - <dd>Définit les secondes pour la date spécifiée selon l'heure locale.</dd> - <dt>{{jsxref("Date.prototype.setTime()")}}</dt> - <dd>Règle l'objet <code>Date</code> sur le temps représenté par un nombre de millisecondes depuis le 1<sup>er</sup> janvier 1970, 00:00:00 UTC.</dd> - <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> - <dd>Définit le jour du mois pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> - <dd>Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> - <dd>Définit les heures pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> - <dd>Définit les millièmes de seconde pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> - <dd>Définit les minutes pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> - <dd>Définit le mois pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> - <dd>Définit les secondes pour la date spécifiée selon le temps universel.</dd> - <dt>{{jsxref("Date.prototype.setYear()")}} {{ Deprecated_inline() }}</dt> - <dd>Définit l'année (habituellement avec 2 ou 3 chiffres) pour une date spécifiée selon le temps universel. Utilisez plutôt {{jsxref("Date/setFullYear", "setFullYear()")}}.</dd> -</dl> - -<h3 id="Lecture_avec_conversion">Lecture avec conversion</h3> - -<dl> - <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> - <dd>Renvoie la partie « date » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères lisible par un humain (autrement dit quelque chose comme "Thu Apr 12 2018").</dd> - <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> - <dd>Convertit une date en chaîne de caractère respectant la norme ISO 8601 Format Étendu.</dd> - <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> - <dd>Renvoie une chaîne de caractère représentant la date en utilisant {{jsxref("Date/toISOString", "toISOString()")}}. Pour une utilisation avec {{jsxref("JSON.stringify()")}}.</dd> - <dt>{{jsxref("Date.prototype.toGMTString()")}} {{ Deprecated_inline() }}</dt> - <dd>Convertit une date en une chaîne de caractères, en utilisant les conventions GMT. Utilisez plutôt {{jsxref("Date/toUTCString", "toUTCString()")}}.</dd> - <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> - <dd>Renvoie la partie « date » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères adaptée selon la locale en utilisant les réglages du système pour déterminer la locale à utiliser.</dd> - <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{ Non-standard_inline() }}</dt> - <dd>Convertit une date en une chaîne de caractères, en utilisant une chaîne de formatage.</dd> - <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> - <dd>Convertit une date en une chaîne de caractères, en utilisant les conventions locales courantes. Remplace la méthode {{jsxref("Object/toLocaleString", "Object.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> - <dd>Renvoie la partie « heure » de l'objet <code>Date</code> sous la forme d'une chaîne, en utilisant les conventions locales courantes.</dd> - <dt>{{jsxref("Date.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> - <dd>Renvoie une chaîne de caractères représentant le code source pour un objet <code>Date</code> équivalent ; cette valeur peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Date.prototype.toString()")}}</dt> - <dd>Renvoie une chaîne de caractères représentant l'objet <code>Date</code> spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> - <dd>Renvoie la partie « heure » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères lisible par humain.</dd> - <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> - <dd>Convertit une date en une chaîne de caractères, en utilisant le fuseau horaire UTC.</dd> - <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> - <dd>Renvoie la valeur primitive d'un objet <code>Date</code>. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> - -<p>{{Compat("javascript.builtins.Date.prototype")}}</p> diff --git a/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html deleted file mode 100644 index 014afc9ce2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Error.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Error/prototype -tags: - - Error - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Error.prototype</strong></code> représente le prototype du constructeur {{jsxref("Error")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances d'{{jsxref("Error")}} et les instances des {{jsxref("Error", "erreurs non-génériques", "#Types_d'erreur_personnalis.C3.A9s", 1)}} héritent de {{jsxref("Error.prototype")}}. Comme pour tous les constructeurs, on pouvez utiliser le prototype du constructeur pour ajouter des propriétés ou méthodes à l'ensemble des instances créées avec ce constructeur.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<h3 id="Propriétés_standard">Propriétés standard</h3> - -<dl> - <dt>Error.prototype.constructor</dt> - <dd>La fonction créeant une instance du prototype.</dd> - <dt>{{jsxref("Error.prototype.message")}}</dt> - <dd>Le message de l'erreur.</dd> - <dt>{{jsxref("Error.prototype.name")}}</dt> - <dd>Le nom de l'erreur.</dd> -</dl> - -<h3 id="Extensions_spécifiques_à_une_implémentation">Extensions spécifiques à une implémentation</h3> - -<div>{{Non-standard_header}}</div> - -<h4 id="Microsoft">Microsoft</h4> - -<dl> - <dt>{{jsxref("Error.prototype.description")}}</dt> - <dd>Description de l'erreur. Similaire à {{jsxref("Error.message", "message")}}.</dd> - <dt>{{jsxref("Error.prototype.number")}}</dt> - <dd>Numéro de l'erreur.</dd> -</dl> - -<h4 id="Mozilla">Mozilla</h4> - -<dl> - <dt>{{jsxref("Error.prototype.fileName")}}</dt> - <dd>Chemin vers le fichier qui a déclenché l'erreur.</dd> - <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> - <dd>Numéro de la ligne qui a déclenché l'erreur dans le fichier.</dd> - <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> - <dd>Numéro de la colonne qui a déclenché l'erreur dans le fichier.</dd> - <dt>{{jsxref("Error.prototype.stack")}}</dt> - <dd>Pile d'appels.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Error.prototype.toSource()")}} {{Non-standard_inline}}</dt> - <dd>Renvoie une chaine de caractères contenant le code source de l'objet <code>Error</code> ; cette valeur peut être utilisée pour créer un nouvel objet. Elle remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Error.prototype.toString()")}}</dt> - <dd>Renvoie une chaine de caractères représentant l'objet. Elle remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.Error.prototype")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("Object.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html deleted file mode 100644 index 1123259c3d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: EvalError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/EvalError/prototype -tags: - - Error - - EvalError - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/EvalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>EvalError.prototype</strong></code> représente le prototype du constructeur {{jsxref("EvalError")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Chacune des instances de {{jsxref("EvalError")}} hérite de {{jsxref("EvalError.prototype")}}. On peut utiliser le prototype pour ajouter des propriétés ou des méthodes à toutes les instances.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>EvalError.prototype.constructor</code></dt> - <dd>Définit la fonction qui crée une instance basée sur le prototype.</dd> - <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt> - <dd>Un message décrivant l'erreur. Bien que la spécification ECMA-262 définit que <code>EvalError</code> doit fournir une propriété <code>message</code> propre à l'objet, l'implémentation de <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> fait qu'il hérite de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt> - <dd>Un nom d'erreur. Propriété héritée de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt> - <dd>Un chemin vers le fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt> - <dd>Le numéro de la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt> - <dd>Le numéro de la colonne dans la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt> - <dd>Pile d'appels. Propriété héritée de {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Bien que l'objet prototype <code>EvalError</code> ne possède pas de propriété propre, les instances de {{jsxref("EvalError")}} héritent de certaines méthodes via la chaîne de prototypes.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.EvalError")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html deleted file mode 100644 index ff4a70e10f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Function.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Function/prototype -tags: - - Function - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Function.prototype</strong></code> représente le prototype de l'objet {{jsxref("Function")}}.</p> - -<h2 id="Description">Description</h2> - -<p>Les objets {{jsxref("Function")}} héritent de <code>Function.prototype</code>. <code>Function.prototype</code> ne peut pas être modifié.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> - <dd>Un tableau correspondant aux arguments passés à la fonction. Cette propriété est dépréciée et il est préférable d'utiliser l'objet {{jsxref("Fonctions/arguments", "arguments")}} à la place.</dd> - <dt>{{jsxref("Function.arity")}} {{obsolete_inline}}</dt> - <dd>Cette propriété était utilisée pour indiquer le nombre d'arguments attendus par la fonction. Cette propriété a été supprimée. La propriété {{jsxref("Function.length", "length")}} doit être utilisée à la place.</dd> - <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> - <dd>Indique la fonction qui a appelée la fonction courante.</dd> - <dt>{{jsxref("Function.length")}}</dt> - <dd>Indique le nombre d'arguments attendus par la fonction.</dd> - <dt>{{jsxref("Function.name")}}</dt> - <dd>Le nom de la fonction.</dd> - <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> - <dd>Le nom de la fonction à utiliser pour l'affichage.</dd> - <dt><code>Function.prototype.constructor</code></dt> - <dd>Définit la fonction qui crée le prototype de l'objet. Voir la page {{jsxref("Object.prototype.constructor")}} pour plus de détails.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Function.prototype.apply()")}}</dt> - <dd>Cette méthode applique la fonction et pour cette fonction, <code>this</code> sera la valeur passée en argument (l'objet manipulé peut ainsi être différent de l'objet courant). Les arguments peuvent être passés grâce à un objet {{jsxref("Array")}}.</dd> - <dt>{{jsxref("Function.prototype.bind()")}}</dt> - <dd>Cette méthode crée un nouvelle fonction qui, lorsqu'elle est appelée, appelle cette fonction dans le contexte de la valeur fournie avec une suite d'arguments à utiliser avant ceux fournis à la nouvelle fonction.</dd> - <dt>{{jsxref("Function.prototype.call()")}}</dt> - <dd>Cette méthode applique la fonction, et pour cette fonction, <code>this</code> sera la valeur passée en premier arguments. Les arguments peuvent être passés tels quels dans les arguments suivants.</dd> - <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> - <dd>Cette méthode renvoie <code>true</code> si la fonction est un <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">générateur</a> ; sinon elle renvoie <code>false</code>.</dd> - <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toSource")}}.</dd> - <dt>{{jsxref("Function.prototype.toString()")}}</dt> - <dd>Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toString")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-instances-prototype','Function.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.Function.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html deleted file mode 100644 index 1a23ca8eb5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: GeneratorFunction.prototype -slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype -tags: - - ECMAScript 2015 - - GeneratorFunction - - Iterator - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction -translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>GeneratorFunction.prototype</strong></code> représente le prototype de l'objet {{jsxref("GeneratorFunction")}}.</p> - -<h2 id="Description">Description</h2> - -<p>Les objets {{jsxref("GeneratorFunction")}} héritent de <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> ne peut pas être modifié.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code><strong>GeneratorFunction.constructor</strong></code></dt> - <dd>La valeur initiale correspond à {{jsxref("GeneratorFunction")}}.</dd> - <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt> - <dd>La valeur est <code>%GeneratorPrototype%</code>.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html deleted file mode 100644 index 7d44d99002..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: InternalError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/InternalError/prototype -tags: - - Error - - InternalError - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---- -<div>{{JSRef}} {{non-standard_header}}</div> - -<p>La propriété <code><strong>InternalError.prototype</strong></code> représente le prototype du constructeur {{jsxref("InternalError")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("InternalError")}} héritent de {{jsxref("InternalError.prototype")}}. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>InternalError.prototype.constructor</code></dt> - <dd>Définit la fonction qui permet de créer une instance du prototype.</dd> - <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> - <dd>Un nom d'erreur. Bien que ECMA-262 spécifie que <code>InternalError</code> devrait fournir une propriété propre pour <code>message</code>. L'implémentation de<a href="/fr/docs/SpiderMonkey"> SpiderMonkey</a> fait que cette propriété est héritée via {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> - <dd>Un nom d'erreur. Hérité via {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> - <dd>Le chemin du fichier à l'origine de l'erreur. Héritée via {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> - <dd>Le numéro de la ligne dans le fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> - <dd>Le numéro de la colonne dans la ligne du fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> - <dd>Pile d'appels (stack trace). Héritée via {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Bien que l'objet prototype <code>InternalError</code> ne contienne aucune méthode qui lui soit propre, les instances de {{jsxref("InternalError")}} héritent de méthodes grâce à la chaîne de prototypes.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Cette propriété ne fait partie d'aucune spécification.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.InternalError")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html deleted file mode 100644 index b523b88842..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Intl.Collator.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/prototype -tags: - - Collator - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Intl.Collator.prototype</strong></code> représente l'objet prototype du constructeur {{jsxref("Collator", "Intl.Collator")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Voir la page {{jsxref("Collator")}} pour une description appliquée aux instances de <code>Intl.Collator</code>.</p> - -<p>Les instances de <code>Intl.Collator</code> héritent de <code>Intl.Collator.prototype</code>. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de <code>Intl.Collator</code> via l'héritage (chaîne de prototypes).</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Intl.Collator.protoype.constructor</code></dt> - <dd>Une référence vers {{jsxref("Collator")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}</dt> - <dd>Un accesseur qui renvoie une fonction comparant deux chaînes de caractères, basée sur l'ordre de tri de l'objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}.</dd> - <dt>{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}</dt> - <dd>Renvoie un nouvel objet dont les propriétés correspondent aux options de collation et de locales calculées lors de l'initialisation de l'objet.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype', 'Intl.Collator.prototype')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.Intl.Collator.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Collator", "Intl.Collator")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html deleted file mode 100644 index 39e6679295..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Intl.DateTimeFormat.prototype</strong></code> représente le prototype du constructeur {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Voir la page {{jsxref("DateTimeFormat")}} qui décrit les instances de <code>Intl.DateTimeFormat</code>.</p> - -<p>Les instances de {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} héritent de <code>Intl.DateTimeFormat.prototype</code>. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de <code>Intl.DateTimeFormat</code> par héritage.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> - <dd>Une référence à <code>Intl.DateTimeFormat</code>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</dt> - <dd>Un accesseur qui renvoie une fonction formattant une date selon les options de format et de locale spécifiées pour l'objet <code>DateTimeFormat</code>.</dd> - <dt>{{jsxref("DateTimeFormat.formatToParts","Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> - <dd>Renvoie un tableau d'objets qui représentent les composants de la date sous forme de chaînes de caractères afin que celles-ci puissent être utilisée dans une mise en forme adaptée à la locale.</dd> - <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> - <dd>Renvoie un nouvel objet dont les propriétés indiquent les options de format et de locale calculées lors de l'initialisation de l'objet.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html deleted file mode 100644 index 1aab6a459d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Intl.ListFormat.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/prototype -tags: - - Experimental - - Intl - - Intl.ListFormat - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>Intl.ListFormat.prototype</code></strong> représente l'objet prototype utilisé par le constructeur {{jsxref("ListFormat", "Intl.ListFormat")}}.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Description">Description</h2> - -<p>Voir la page {{jsxref("ListFormat")}} pour une description des instances de <code>Intl.ListFormat</code>.</p> - -<p>Les instances {{jsxref("ListFormat", "Intl.ListFormat")}} héritent de <code>Intl.ListFormat.prototype</code>. Les modifications apportées au prototypes seront héritées par les instances {{jsxref("ListFormat", "Intl.ListFormat")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Intl.<font face="consolas, Liberation Mono, courier, monospace">ListFormat</font>.prototype.constructor</code></dt> - <dd>Une référence à {{jsxref("ListFormat", "Intl.ListFormat()")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype">Proposition pour <code>Intl.ListFormat.prototype</code></a></td> - <td>Proposition de niveau 3</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.Intl.ListFormat.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html deleted file mode 100644 index cc22f45a17..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Intl.Locale.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Locale/prototype ---- -<p>{{JSRef}}</p> - -<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype</code></strong> représente le prototype pour le constructeur {{jsxref("Locale", "Intl.Locale")}}.</span></p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Description">Description</h2> - -<p>Voir la page {{jsxref("Locale")}} pour en savoir plus sur les instances <code>Intl.Locale</code>.</p> - -<p>Les instances de {{jsxref("Locale", "Intl.Locale")}} héritent de <code>Intl.Locale.prototype</code>. Les modifications apportées au prototype sont héritées par l'ensemble des instances {{jsxref("Locale", "Intl.Locale")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>{{jsxref("Locale/baseName", "Intl.Locale.prototype.baseName")}}</code></dt> - <dd>Renvoie un extrait de la chaîne de caractères représentant l'objet <code>Locale</code>. Cet extrait contient les informations essentielles à propos de l'objet <code>Locale</code>.</dd> - <dt><code>{{jsxref("Locale/calendar", "Intl.Locale.prototype.calendar")}}</code></dt> - <dd>Renvoie le type de calendrier utilisé par l'instance de <code>Locale</code>.</dd> - <dt><code>{{jsxref("Locale/collation", "Intl.Locale.prototype.collation")}}</code></dt> - <dd>Renvoie le <a href="https://www.unicode.org/reports/tr35/tr35-collation.html#CLDR_Collation">type de collation</a> pour l'instance de <code>Locale</code> courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.</dd> - <dt><code>{{jsxref("Locale/hourCycle", "Intl.Locale.prototype.hourCycle")}}</code></dt> - <dd>Renvoie la convention pour le format des heures utilisée par la locale courante.</dd> - <dt><code>{{jsxref("Locale/caseFirst", "Intl.Locale.prototype.caseFirst")}}</code></dt> - <dd>Renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).</dd> - <dt><code>{{jsxref("Locale/numeric", "Intl.Locale.prototype.numeric")}}</code></dt> - <dd>Indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).</dd> - <dt><code>{{jsxref("Locale/numberingSystem", "Intl.Locale.prototype.numberingSystem")}}</code></dt> - <dd>Renvoie le <a href="https://en.wikipedia.org/wiki/Numeral_system">système de numération</a> utilisée par la locale.</dd> - <dt><code>{{jsxref("Locale/language", "Intl.Locale.prototype.language")}}</code></dt> - <dd>Renvoie la langue associée à la locale.</dd> - <dt><code>{{jsxref("Locale/script", "Intl.Locale.prototype.script")}}</code></dt> - <dd>Renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.</dd> - <dt><code>{{jsxref("Locale/region", "Intl.Locale.prototype.region")}}</code></dt> - <dd>Renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt><code>{{jsxref("Locale/minimize", "Intl.Locale.prototype.minimize()")}}</code></dt> - <dd>Cette méthode tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}.</dd> - <dt><code>{{jsxref("Locale/maximize", "Intl.Locale.prototype.maximize()")}}</code></dt> - <dd>Cette méthode permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.</dd> - <dt><code>{{jsxref("Locale/toString", "Intl.Locale.prototype.toString()")}}</code></dt> - <dd>Cette méthode renvoie <a href="https://www.unicode.org/reports/tr35/#Unicode_locale_identifier">l'identifiant de locale complet</a> pour la locale courante.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype">Proposition pour <code>Intl.Locale.prototype</code></a></td> - <td>Proposition de niveau 3</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.Intl.Locale.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Locale", "Intl.Locale")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html deleted file mode 100644 index 7627a01670..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - NumberFormat - - Propriété - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Intl.NumberFormat.prototype</strong></code> représente l'objet prototype pour le constructeur {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Voir la page {{jsxref("NumberFormat", "Intl.NumberFormat")}} pour une description des instances de <code>Intl.NumberFormat</code>.</p> - -<p>Les instances de <code>Intl.NumberFormat</code> héritent de <code>Intl.NumberFormat.prototype</code>. Les modifications apportées à l'objet prototype seront propagées par héritage aux instances <code>Intl.NumberFormat</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Intl.NumberFormat.prototype.constructor</code></dt> - <dd>Une référence à <code>Intl.NumberFormat</code>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt> - <dd>Un accesseur qui renvoie une fonction permettant de formater un nombre en fonction des options de locale et de format définies dans un objet <code>NumberFormat</code>.</dd> - <dt>{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}</dt> - <dd>Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui représentent les fragments de la chaîne de caractères correspondant au nombre afin de l'utiliser pour des mises en formes prenant en compte la locale de l'utilisateur.</dd> - <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt> - <dd>Cette méthode renvoie un nouvel objet dont les propriétés correspondent aux options de locale et de collation calculées lors de l'initialisation de l'objet.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html deleted file mode 100644 index 6674890eb1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Intl.PluralRules.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>Intl.PluralRules.prototype</code></strong> représente le prototype du constructeur {{jsxref("PluralRules", "Intl.PluralRules")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Voir {{jsxref("PluralRules")}} pour la description des instances <code>Intl.PluralRules</code>.</p> - -<p>Les instances de {{jsxref("PluralRules", "Intl.PluralRules")}} héritent de <code>Intl.PluralRules.prototype</code>. Les modifications apportées au prototype seront héritées par l'ensemble des instances de {{jsxref("PluralRules", "Intl.PluralRules")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Intl.PluralRules.prototype.constructor</code></dt> - <dd>Une référence à <code>Intl.PluralRules</code>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("PluralRules.resolvedOptions", "Intl.PluralRules.prototype.resolvedOptions()")}}</dt> - <dd>Cette méthode renvoie un nouvelle objet dont les propriétés reflètent la locale et les options de collations calculées lors de l'initialisation de l'objet.</dd> - <dt>{{jsxref("PluralRules.select", "Intl.PluralRules.prototype.select()")}}</dt> - <dd>Cette méthode renvoie une chaîne de caractères ({{jsxref("String")}}) qui indique quelle forme de règle de nombre est utilisée pour le formatage.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec <code>Intl</code></a></td> - <td>Brouillon</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.Intl.PluralRules.prototype")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html deleted file mode 100644 index 9e212403c3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Intl.RelativeTimeFormat.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>Intl.RelativeTimeFormat.prototype</code></strong> représente l'objet prototype utilisé par le constructeur {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Description">Description</h2> - -<p>Voir {{jsxref("RelativeTimeFormat")}} pour une description des instances <code>Intl.RelativeTimeFormat</code>.</p> - -<p>Les instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} héritent de <code>Intl.RelativeTimeFormat.prototype</code>. Les modifications apportées au prototype seront héritées par l'ensemble des instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Intl.<font face="consolas, Liberation Mono, courier, monospace">RelativeTimeFormat</font>.prototype.constructor</code></dt> - <dd>Une référence à <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl.RelativeTimeFormat" title="The Intl.DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting."><code>Intl.RelativeTimeFormat</code></a>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("RelativeTimeFormat.format", "Intl.RelativeTimeFormat.prototype.format()")}}</dt> - <dd>Une méthode qui formate une valeur, accompagnée d'une unité selon des options de locales et de formatage stockées dans l'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl.RelativeTimeFormat" title="The Intl.DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting."><code>Intl.RelativeTimeFormat</code></a>.</dd> - <dt>{{jsxref("RelativeTimeFormat.formatToParts", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}</dt> - <dd>Une méthode qui formate une valeur comme la méthode <code>format()</code> mais qui renvoie un tableau ({{jsxref("Array")}}) contenant les différentes parties de la valeur formatée.</dd> - <dt>{{jsxref("RelativeTimeFormat.resolvedOptions", "Intl.RelativeTimeFormat.prototype.resolvedOptions()")}}</dt> - <dd>Une méthode qui renvoie un objet dont les propriétés indique les options de locale et de formatage calculées lors de l'initialisation du formateur.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype">Proposition pour <code>Intl.RelativeTime</code></a></td> - <td>Proposition de niveau 3</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html deleted file mode 100644 index 48a00f9135..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Map/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>Map.prototype</code></strong> représente le prototype du constructeur {{jsxref("Map")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("Map")}} héritent de {{jsxref("Map.prototype")}}. Le prototype du constructeur permet d'ajouter des propriétés ou des méthodes à toutes les instances de <code>Map</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera la fonction {{jsxref("Map")}}.</dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd>Renvoie le nombre de paires de clé-valeur contenues dans l'objet <code>Map</code>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd>Supprime toutes les paires de clé-valeur de l'objet <code>Map</code>.</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(clé)")}}</dt> - <dd>Renvoie <code>true</code> si un élément contenu dans l'objet <code>Map</code> existait avec cette clé et a été retiré. Si aucun élément n'existe dans l'objet <code>Map</code> avec cette clé, c'est <code>false</code> qui est renvoyé. <code>Map.prototype.has(clé)</code> renverra <code>false</code> après l'exécution de cette méthode.</dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd>Renvoie un nouvel objet <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Iterator</a> qui contient un tableau de<strong> <code>[clé, valeur]</code></strong> pour chacun des éléments de l'objet <code>Map</code>, dans leur ordre d'insertion.</dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>Appelle la fonction <code>callbackFn</code> pour chaque paire clé-valeur de l'objet <code>Map</code> dans leur ordre d'insertion. Si un paramètre <code>thisArg</code> est fourni, il sera utilisé comme valeur pour <code>this</code> pour chaque appel de la fonction de retour (callback).</dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(clé)")}}</dt> - <dd>Renvoie la valeur associée à la clé et <code>undefined</code> s'il n'y en a pas.</dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(clé)")}}</dt> - <dd>Renvoie un booléen indiquant si une valeur associée à cette clé a été trouvée dans l'objet <code>Map</code>.</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd>Renvoie un nouvel objet <code>Iterator</code> contenant les <strong>clés</strong> de chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(clé, valeur)")}}</dt> - <dd>Définit la valeur d'un clé pour l'objet <code>Map</code>. Renvoie <code>undefined</code>.</dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd>Renvoie un nouvel objet <code>Iterator</code> contenant les <strong>valeurs</strong> de chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd>Renvoie une nouvel objet <code>Iterator</code> qui contient <strong>un tableau de <code>[clé, valeur]</code></strong> pour chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.Map.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html deleted file mode 100644 index 0cb02e939e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Number/prototype -tags: - - JavaScript - - Number - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>Number.prototype</code></strong> représente le prototype du constructeur {{jsxref("Number")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("Number")}} héritent de <code>Number.prototype</code>. On peut modifier l'objet prototype du constructeur {{jsxref("Number")}} afin que la modification affecte chacune des instances de <code>Number</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Number.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui a créé l'instance de cette objet. Par défaut, ce sera l'objet {{jsxref("Number")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> - <dd>Renvoie une chaîne de caractères qui représente le nombre en notation exponentielle.</dd> - <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> - <dd>Renvoie une chaîne de caractères qui représente le nombre en représentation à point fixe.</dd> - <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> - <dd>Renvoie une chaîne de caractères qui représente le nombre en tenant compte de la locale. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> - <dd>Renvoie une chaîne de caractères représentant le nombre en représentation à point fixe, selon une précision donnée ou en notation exponentielle.</dd> - <dt>{{jsxref("Number.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> - <dd>Renvoie un litéral objet représentant l'objet <code>Number</code> fourni. On peut utiliser cette valeur afin de créer un nouvel objet. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Number.prototype.toString()")}}</dt> - <dd>Renvoie une chaîne de caractères qui représente l'objet fourni selon une base donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> - <dd>Renvoie une valeur primitive de l'objet fourni. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> - -<p>{{Compat("javascript.builtins.Number.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Number")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html deleted file mode 100644 index 6eb405ace4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Object/prototype -tags: - - JavaScript - - Object - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Object.prototype</strong></code> représente le prototype de {{jsxref("Object")}}.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Description">Description</h2> - -<p>La quasi-totalité des objets JavaScript descendent de {{jsxref("Object")}} ; un objet classique héritera donc des méthodes et propriétés de <code>Object.prototype</code>. Comme pour toutes les propriétés héritées, il est possible de surcharger ces propriétés. Par exemple, d'autres prototypes de constructeurs surchargent la propriété <code>constructor</code> et fournissent leur propre méthode {{jsxref("Object.prototype.toString()", "toString()")}}.</p> - -<p>Cependant, on peut volontairement créer des objets qui ne descendent pas de {{jsxref("Object")}} (par exemple avec {{jsxref("Object.create", "Object.create(null)")}}) ou les modifier afin que ce ne soit plus le cas (par exemple avec la méthode {{jsxref("Object.setPrototypeOf()")}}).</p> - -<p>Les modifications apportées aux propriétés du prototype d'<code>Object</code> impactent donc tous ces objets via la chaîne de prototypes, sauf si ces propriétés sont surchargées. Ce puissant mécanisme permet ainsi de modifier le comportement des objets ou d'y ajouter des fonctionnalités.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{jsxref("Object.prototype.constructor")}}</dt> - <dd>Définit la fonction qui a créé le prototype d'un objet.</dd> - <dt>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}} {{non-standard_inline}}</dt> - <dd>Pointe vers l'objet qui a été utilisé comme prototype lors de l'instanciation de l'objet.</dd> - <dt>{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> - <dd>Permet de définir une fonction qui sera exécutée lors d'une tentative d'accès à une méthode non-définie pour l'objet.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">UTilisée pour renvoyer le nombre de propriétés énumérables sur un objet défini par l'utilisateur. Cette propriété a été retirée.</s></dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Utilisée pour faire référence au contexte de l'objet. Cette propriété a été retirée.</s></dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Associe une fonction à une propriété qui, lorsqu'on y accède, exécute la fonction et renvoie la valeur de retour.</dd> - <dt>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Associe une fonction à une propriété qui, lorsqu'on la définit, exécute la fonction qui modifie la propriété.</dd> - <dt>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Renvoie la fonction associée à la propriété définie par la méthode {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd> - <dt>{{jsxref("Object.prototype.lookupSetter()","Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Renvoie la fonction associée avec la propriété définie par la méthode {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd> - <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> - <dd>Renvoie un booléen qui indique si l'objet contient la propriété donnée comme une propriété propre (non héritée via la chaîne de prototypes).</dd> - <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> - <dd>Renvoie un booléen qui indique si l'objet courant fait partie de la chaîne de prototype de l'objet passé en argument.</dd> - <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> - <dd>Renvoie un booléen qui indique si l'<a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">attribut ECMAScript interne [[Enumerable]]</a> est défini.</dd> - <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Renvoie une chaîne de caractères qui est un littéral objet représentant l'objet pour lequel la méthode a été appelée. La valeur de retour peut être utilisée pour créer un nouvel objet.</dd> - <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> - <dd>Appelle la méthode {{jsxref("Object.toString", "toString()")}}.</dd> - <dt>{{jsxref("Object.prototype.toString()")}}</dt> - <dd>Renvoie une chaîne de caractères représentant l'objet.</dd> - <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> - <dd>Supprime un point d'arrêt conditionnel placé sur une propriété de l'objet.</dd> - <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> - <dd>Renvoie la valeur primitive de l'objet.</dd> - <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> - <dd>Ajoute un point d'arrêt conditionnel sur une propriété de l'objet.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Utilisée pour évaluer une chaîne de caractères étant du code JavaScript dans le contexte de l'objet. Cette méthode a été retirée.</s></dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<p>Javascript se base sur un modèle prototypal et non pas classique (au sens « modèle à base de classes »). Le prototype d'un objet est utilisé pour fournir de façon dynamique des propriétés aux objets qui héritent du prototype.</p> - -<p>Par exemple :</p> - -<pre class="brush: js">var Personne = function(nom) { - this.name = nom; - this.peutParler = true; - this.salutation = function() { - if (this.peutParler) { - console.log('Bonjour, je suis ' + this.nom); - } - }; -}; - -var Employe = function(nom, titre) { - this.nom = nom; - this.titre = titre; - this.salutation = function() { - if (this.peutParler) { - console.log("Bonjour, je suis " + this.nom + ", le " + this.titre); - } - }; -}; -Employe.prototype = new Personne(); - -var Client = function(nom) { - this.nom = nom; -}; -Client.prototype = new Personne(); - -var Mime = function(nom) { - this.nom = nom; - this.peutParler = false; -}; -Mime.prototype = new Personne(); - -var bob = new Employe('Bob', 'bricoleur'); -var joe = new Client('Joe'); -var rg = new Employe('Red Green', 'réparateur'); -var mike = new Client('Mike'); -var mime = new Mime('Mime'); -bob.salutation(); -// Bonjour, je suis Bob, le bricoleur - -joe.salutation(); -// Bonjour, je suis Joe - -rg.salutation(); -// Bonjour, je suis Red Green, le réparateur - -mike.salutation(); -// Bonjour, je suis Mike - -mime.salutation(); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.Object.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html deleted file mode 100644 index 9a6146375f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Promise/prototype -tags: - - JavaScript - - Promise - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Promise.prototype</strong></code> représente le prototype pour le constructeur {{jsxref("Promise")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("Promise")}} héritent de {{jsxref("Promise.prototype")}}. On peut utiliser le prototype du constructeur afin d'ajouter des propriétés et/ou des méthodes à chacune des instances de <code>Promise</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Promise.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui a créé le prototype d'une instance. Ce sera la fonction {{jsxref("Promise")}} par défaut.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Promise.prototype.catch()")}}</dt> - <dd>Ajoute une fonction <em>callback</em> à utiliser en cas de rejet de la promesse. Elle renvoie une nouvelle promesse qui est résolue avec la valeur de retour du callback s'il est appelé ou avec la valeur de résolution initiale si la promesse est tenue (et non rejetée).</dd> - <dt>{{jsxref("Promise.prototype.then()")}}</dt> - <dd>Ajoute des fonctions à utiliser en cas de résolution ou de rejet de la promesse et renvoie une nouvelle promesse qui est résolue avec la valeur de retour de la fonction utilisée en fonction de la résolution ou non.</dd> - <dt>{{jsxref("Promise.prototype.finally()")}}</dt> - <dd>Ajoute une fonction à la promesse et renvoie une nouvelle promesse qui est résolue lorsque la promesse originale est résolue. La fonction ajoutée est appelée lorsque la promesse est résolue, qu'elle soit tenue ou rejetée.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> - -<p>{{Compat("javascript.builtins.Promise.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html deleted file mode 100644 index 1af96393bc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: RangeError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/RangeError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - RangeError - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>RangeError.prototype</strong></code> représente le prototype du constructeur {{jsxref("RangeError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Chacune des instances de {{jsxref("RangeError")}} hérite de <code>RangeError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés et/ou des méthodes à toutes les instances.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>RangeError.prototype.constructor</code></dt> - <dd>Définit la fonction qui a créé le prototype de l'instance.</dd> - <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> - <dd>Le nom de l'erreur. Bien que ECMA-262 spécifie que {{jsxref("RangeError")}} devrait fournir sa propre propriété <code>message</code>, dans <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a>, il l'hérite depuis {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> - <dd>Le nom de l'erreur, hérité depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> - <dd>Le chemin vers le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> - <dd>Le numéro de la ligne de code dans le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> - <dd>La position du code (colonne) dans la ligne de code qui a causé l'erreur, héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> - <dd>Pile d'appels, héritée depuis {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Bien que l'objet prototype {{jsxref("RangeError")}} ne possède pas de méthodes propres, les instances de <code>RangeError</code> hériteront de certaines méthodes via la chaîne de prototypes.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.RangeError")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html deleted file mode 100644 index bdbf50f34c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: ReferenceError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference - - ReferenceError -translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError -translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>ReferenceError.prototype</strong></code> représente le prototype du constructeur {{jsxref("ReferenceError")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("ReferenceError")}} héritent de <code>ReferenceError.prototype</code>. Le prototype peut être utilisé pour ajouter des propriétés ou des méthodes à chacune des instances.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>ReferenceError.prototype.constructor</code></dt> - <dd>Définit la fonction utilisée pour créer une instance du prototype.</dd> - <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt> - <dd>Le message de l'erreur. Bien que ECMA-262 spécifie que <code>ReferenceError</code> devrait posséder une propriété <code>message</code> en propre, <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> lui fait hériter de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt> - <dd>Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt> - <dd>Le chemin du fichier à l'origine de cette erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt> - <dd>Le numéro de la ligne dans le fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt> - <dd>Le numéro de la colonne parmi la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt> - <dd>La pile d'appels, héritée de {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Bien que l'objet prototype pour {{jsxref("ReferenceError")}} ne contienne aucune méthode propre, les instances de <code>ReferenceError</code> héritent de certaines méthodes via la chaîne de prototypes.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.ReferenceError")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html deleted file mode 100644 index 7a507e9699..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: RegExp.prototype -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp -translation_of_original: Web/JavaScript/Reference/Global_Objects/RegExp/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>RegExp.prototype</strong></code> représente l'objet prototype pour le constructeur {{jsxref("RegExp")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Voir la page {{jsxref("RegExp")}} qui décrit les instances de <code>RegExp</code>. Chaque instance de <code>RegExp</code> hérite de <code>RegExp.prototype</code>. Toute modification à l'objet prototype est propagée aux instances de <code>RegExp</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<p>Voir également la page sur <a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">les propriétés dépréciées de <code>RegExp</code>.</a></p> - -<p>On notera que plusieurs des propriétés de {{jsxref("RegExp")}} ont un nom court et un nom long (semblable aux noms Perl). Le nom court et le nom long font référence à la même propriété. La modélisation des expressions rationnelles JavaScript est basée sur celle de Perl, un autre langage de programmation.</p> - -<dl> - <dt><code>RegExp.prototype.</code><code>constructor</code></dt> - <dd>Définit la fonction qui crée le prototype d'un objet.</dd> - <dt>{{jsxref("RegExp.prototype.flags")}}</dt> - <dd>Une chaîne qui contient les drapeaux (<em>flags</em>) utilisés pour l'objet <code>RegExp</code>.</dd> - <dt>{{jsxref("RegExp.prototype.dotAll")}}</dt> - <dd>Indique si <code>.</code> peut correspondre à des sauts de ligne.</dd> - <dt>{{jsxref("RegExp.prototype.global")}}</dt> - <dd>Définit si l'expression rationnelle doit relever la première correspondance d'une chaîne ou toutes les correspondances.</dd> - <dt>{{jsxref("RegExp.prototype.ignoreCase")}}</dt> - <dd>Définit si l'expression rationnelle doit ignorer la casse ou non pour détecter une correspondance.</dd> - <dt>{{jsxref("RegExp.prototype.multiline")}}</dt> - <dd>Définit si la recherche de la correspondance s'effectue sur plusieurs lignes ou sur une seule.</dd> - <dt>{{jsxref("RegExp.prototype.source")}}</dt> - <dd>Le texte du motif (<em>pattern</em>) à rechercher.</dd> - <dt>{{jsxref("RegExp.prototype.sticky")}}</dt> - <dd>Définit si la recherche s'effectue uniquement à partir de <code>lastIndex</code> ou non.</dd> - <dt>{{jsxref("RegExp.prototype.unicode")}}</dt> - <dd>Cette propriété indique si les fonctionnalités Unicode sont activées ou non.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Regexp.prototype.compile()")}}{{deprecated_inline}}</dt> - <dd>(Re)compile une expression rationnelle lors de l'exécution d'un script.</dd> - <dt>{{jsxref("RegExp.prototype.exec()")}}</dt> - <dd>Exécute une recherche de correspondance sur la chaîne de caractères fournie en paramètre.</dd> - <dt>{{jsxref("RegExp.prototype.test()")}}</dt> - <dd>Teste s'il y a une correspondance dans la chaîne de caractères fournie en paramètre.</dd> - <dt>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</dt> - <dd>Teste une correspondance sur une chaîne de caractères donnée et renvoie le résultat du test.</dd> - <dt>{{jsxref("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}</dt> - <dd>Renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne.</dd> - <dt>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</dt> - <dd>Remplace les correspondances d'une chaîne de caractères avec une nouvelle sous-chaînes.</dd> - <dt>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</dt> - <dd>Recherche la correspondance dans une chaîne de caractères donnée et renvoie la position où est trouvé le motif.</dd> - <dt>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</dt> - <dd>Découpe une chaîne de caractères en un tableau de sous-chaînes.</dd> - <dt>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Renvoie un littéral objet représentant l'objet spécifié. Cette méthode peut être utilisée pour créer un nouvel objet. Elle surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("RegExp.prototype.toString()")}}</dt> - <dd>Renvoie une chaîne de caractères représentant l'objet spécifié. Cette méthode surcharge {{jsxref("Object.prototype.toString()")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-regexp.prototype', 'RegExp.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.RegExp.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Le chapitre concernant les expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide" title="JavaScript/Guide">Guide JavaScript</a></li> - <li>{{jsxref("RegExp")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html deleted file mode 100644 index 485be156ee..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Set.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Set/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Set.prototype</strong></code> représente le prototype pour le constructeur {{jsxref("Set")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("Set")}} héritent de {{jsxref("Set.prototype")}}. Le prototype peut être utilisé afin d'ajouter des propriétés (valeurs ou méthodes) à toutes les instances de <code>Set</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Set.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui crée le prototype d'une instance. Par défaut, ce sera la fonction {{jsxref("Set")}}.</dd> - <dt>{{jsxref("Set.prototype.size")}}</dt> - <dd>Renvoie le nombre de valeurs contenues dans l'objet <code>Set</code>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Set.add", "Set.prototype.add(valeur)")}}</dt> - <dd>Ajoute un nouvel élément à l'objet <code>Set</code> avec la valeur donnée. La valeur de retour est l'objet <code>Set</code>.</dd> - <dt>{{jsxref("Set.prototype.clear()")}}</dt> - <dd>Retire tous les éléments de l'objet <code>Set</code>.</dd> - <dt>{{jsxref("Set.delete", "Set.prototype.delete(valeur)")}}</dt> - <dd>Retire l'élément associé à la <code>valeur</code> et renvoie la valeur que <code>Set.prototype.has(valeur)</code> aurait renvoyé. <code>Set.prototype.has(valeur)</code> renverra <code>false</code> après la suppression.</dd> - <dt>{{jsxref("Set.prototype.entries()")}}</dt> - <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient un tableau de<strong> <code>[valeur, valeur]</code></strong> pour chaque élément de l'objet <code>Set</code>, dans l'ordre dans lequel les valeurs ont été insérées. On aura donc une structure semblable à un objet <code>Map</code>. Ici, chaque entrée aura la même valeur pour la <em>clé</em> et la <em>valeur</em>.</dd> - <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(fnCallback[, thisArg])")}}</dt> - <dd>Appelle la fonction <code>fnCallback</code> pour chaque valeur présente dans l'objet <code>Set</code>, dans l'ordre dans lequel elles ont été insérées. Si un paramètre <code>thisArg</code> est fourni à <code>forEach</code>, il sera utilisé comme valeur de <code>this</code> pour chaque appel de la fonction de callback.</dd> - <dt>{{jsxref("Set.has", "Set.prototype.has(valeur)")}}</dt> - <dd>Renvoie un booléen qui indique si un des éléments de l'ensemble possède cette valeur.</dd> - <dt>{{jsxref("Set.prototype.values()","Set.prototype.keys()")}}</dt> - <dd>Cette fonction correspond à la fonction <strong><code>values()</code></strong> et renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs correspondant à chaque élément de <code>Set</code> dans l'ordre dans lequel ils ont été insérés.</dd> - <dt>{{jsxref("Set.prototype.values()")}}</dt> - <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs pour chacun des éléments de l'objet <code>Set</code>, dans l'ordre dans lequel ils ont été insérés.</dd> - <dt>{{jsxref("Set.prototype.@@iterator()","Set.prototype[@@iterator]()")}}</dt> - <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs pour chaque élément de l'objet <code>Set</code> dans leur ordre d'insertion.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.Set.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html deleted file mode 100644 index 58e0f921fd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: SharedArrayBuffer.prototype -slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype -tags: - - JavaScript - - Mémoire partagée - - Propriété - - Reference - - SharedArrayBuffer - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>SharedArrayBuffer.prototype</code></strong> représente le prototype de l'objet {{jsxref("SharedArrayBuffer")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de <code>SharedArrayBuffer</code> héritent de <code>SharedArrayBuffer.prototype</code>. Comme avec les autres constructeurs, il est possible de changer le constructeur de l'objet prototype afin de modifier l'ensemble des instancees de <code>SharedArrayBuffer</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>SharedArrayBuffer.prototype.constructor</dt> - <dd>Cette méthode définit la fonction qui crée le prototype d'un objet. La valeur initiale de cette méthode est le constructeur natif <code>SharedArrayBuffer</code>.</dd> - <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>La taille, exprimée en octets, du tableau. Elle est définie lorsque le tableau est construit et elle ne peut pas être modifiée par la suite. <strong>Propriété en lecture seule</strong><strong>.</strong></dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(début, fin)")}}</dt> - <dd>Cette méthode renvoie un nouvel <code>SharedArrayBuffer</code> dont le contenu est une copie des octets de cet <code>SharedArrayBuffer</code>'s entre un indice de début et un indice de fin. Si cet indice de début ou de fin est négatif, cela représentera l'indice à partir de la fin du tableau.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Définition initiale avec ES2017.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("SharedArrayBuffer")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html deleted file mode 100644 index f7fc1c80a6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Objets_globaux/String/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <strong><code>String.prototype</code></strong> représente l'objet prototype de {{jsxref("String")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("String")}} héritent de <code>String.prototype</code>. Les modifications de l'objet prototype <code>String</code> sont répercutées sur toutes les instances de <code>String</code>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>String.prototype.constructor</code></dt> - <dd>Définit la fonction créant le prototype d'un objet.</dd> - <dt>{{jsxref("String.prototype.length")}}</dt> - <dd>Reflète la longueur de la chaîne</dd> - <dt><code><em>N</em></code></dt> - <dd>Utilisée pour accéder au caractère en <em>N</em><sup>ème</sup> position où <em>N</em> est un entier entre 0 et la valeur de {{jsxref("String.length")}} moins un. Ces propriétés sont en lecture seule.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<h3 id="Méthodes_non_liées_à_HTML">Méthodes non liées à HTML</h3> - -<dl> - <dt>{{jsxref("String.prototype.charAt()")}}</dt> - <dd>Renvoie le caractère (ou plus précisement, le point de code UTF-16) à la position spécifiée.</dd> - <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> - <dd>Renvoie un nombre indiquant la valeur du point de code UTF-16 du caractère à la position spécifiée.</dd> - <dt>{{jsxref("String.prototype.codePointAt()")}}</dt> - <dd>Renvoie un entier positif qui est la valeur du codet UTF-16 à la position donnée.</dd> - <dt>{{jsxref("String.prototype.concat()")}}</dt> - <dd>Combine le texte de deux chaînes et renvoie une nouvelle chaîne.</dd> - <dt>{{jsxref("String.prototype.includes()")}}</dt> - <dd>Défini si une chaîne de caractères est contenue dans une autre chaîne de caractères.</dd> - <dt>{{jsxref("String.prototype.endsWith()")}}</dt> - <dd>Défini si une chaîne de caractère se termine par une chaîne de caractères spécifique.</dd> - <dt>{{jsxref("String.prototype.indexOf()")}}</dt> - <dd>Renvoie la position, au sein de l'objet <code>String</code> appelant, de la première occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.</dd> - <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> - <dd>Renvoie la position, au sein de l'objet String appelant, de la dernière occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.</dd> - <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> - <dd>Renvoie un nombre indiquant si une chaîne de référence vient avant, après ou est en position identique à la chaîne donnée selon un ordre de tri.</dd> - <dt>{{jsxref("String.prototype.match()")}}</dt> - <dd>Utilisée pour faire correspondre une expression rationnelle avec une chaîne.</dd> - <dt>{{jsxref("String.prototype.matchAll()")}}</dt> - <dd>Renvoie un itérateur listant l'ensemble des correspondances d'une expression rationnelle avec la chaîne.</dd> - <dt>{{jsxref("String.prototype.normalize()")}}</dt> - <dd>Retourne la forme Unicode normalisée de la chaîne de caractères appelée.</dd> - <dt>{{jsxref("String.prototype.padEnd()")}}</dt> - <dd>Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée à la fin.</dd> - <dt>{{jsxref("String.prototype.padStart()")}}</dt> - <dd>Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée au début.</dd> -</dl> - -<dl> - <dt>{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</dt> - <dd>Entoure la chaîne de guillemets doubles anglais ("<code>"</code>").</dd> - <dt>{{jsxref("String.prototype.repeat()")}}</dt> - <dd>Renvoie une chaîne dont le contenu est la chaîne courante répétée un certain nombre de fois.</dd> - <dt>{{jsxref("String.prototype.replace()")}}</dt> - <dd>Utilisée pour rechercher une correspondance entre une expression rationnelle et une chaîne, et pour remplacer la sous-chaîne correspondante par une nouvelle chaîne.</dd> - <dt>{{jsxref("String.prototype.search()")}}</dt> - <dd>Exécute la recherche d'une correspondance entre une expression régulière et une chaîne spécifiée.</dd> - <dt>{{jsxref("String.prototype.slice()")}}</dt> - <dd>Extrait une section d'une chaîne et renvoie une nouvelle chaîne.</dd> - <dt>{{jsxref("String.prototype.split()")}}</dt> - <dd>Sépare un objet String en un tableau de chaînes en séparant la chaîne en plusieurs sous-chaînes.</dd> - <dt>{{jsxref("String.prototype.startsWith()")}}</dt> - <dd>Détermine si une chaîne commence avec les caractères d'une autre chaîne.</dd> - <dt>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</dt> - <dd>Renvoie les caractères d'une chaîne à partir de la position spécifiée et pour la longueur spécifiée.</dd> - <dt>{{jsxref("String.prototype.substring()")}}</dt> - <dd>Renvoie les caractères d'une chaîne entre deux positions dans celle-ci.</dd> - <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> - <dd>Les caractères de la chaîne seront convertis en minuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> - <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> - <dd>Les caractères de la chaîne seront convertis en majuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.toUpperCase()", "toUpperCase()")}}.</dd> - <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> - <dd>Renvoie la valeur de la chaîne appelante convertie en minuscules.</dd> - <dt>{{jsxref("String.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> - <dd>Renvoie une représentation littérale de l'objet; celle-ci peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("String.prototype.toString()")}}</dt> - <dd>Renvoie une chaîne représentant l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> - <dd>Renvoie la valeur de la chaîne appelante convertie en majuscules.</dd> - <dt>{{jsxref("String.prototype.trim()")}}</dt> - <dd>Retire les blancs en début et en fin de chaîne. Cette méthode a été définie avec ECMAScript 5.</dd> - <dt>{{jsxref("String.prototype.trimStart()")}}<br> - {{jsxref("String.prototype.trimLeft()")}}</dt> - <dd>Retire les blancs situés au début de la chaîne.</dd> - <dt>{{jsxref("String.prototype.trimEnd()")}}<br> - {{jsxref("String.prototype.trimRight()")}}</dt> - <dd>Retire les blancs situés à la fin de la chaîne.</dd> - <dt>{{jsxref("String.prototype.valueOf()")}}</dt> - <dd>Renvoie la valeur primitive de l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> - <dt>{{jsxref("String.prototype.@@iterator()","String.prototype[@@iterator]()")}}</dt> - <dd>Renvoie un nouvel objet <code>Iterator</code> qui permet d'itérer sur les codets de la chaîne, chaque codet étant renvoyé comme une chaîne.</dd> -</dl> - -<h3 id="Méthodes_de_transformation_HTML">Méthodes de transformation HTML</h3> - -<p>Ces méthodes ont une utilisation limitée, étant donné qu'elles ne fournissent qu'un petit sous-ensemble des balises et attributs HTML existants.</p> - -<dl> - <dt>{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}</dt> - <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (cible hypertexte)</dd> - <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("big")}}</dd> - <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("blink")}}</dd> - <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("b")}}</dd> - <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("tt")}}</dd> - <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> - <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> - <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> - <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> - <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("i")}}</dd> - <dt>{{jsxref("String.prototype.link()")}} {{deprecated_inline}}</dt> - <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (lien vers une URL)</dd> - <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("small")}}</dd> - <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("strike")}}</dd> - <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sub")}}</dd> - <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sup")}}</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> - -<p>{{Compat("javascript.builtins.String.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html deleted file mode 100644 index 9f3c6f0703..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Symbol.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/prototype -tags: - - ECMAScript6 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol -translation_of_original: Web/JavaScript/Reference/Global_Objects/Symbol/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>Symbol</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("Symbol")}}.</p> - -<div>{{EmbedInteractiveExample("pages/js/symbol-prototype.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("Symbol")}} héritent toutes de {{jsxref("Symbol.prototype")}}. Ce prototype du constructeur peut être utilisé afin d'ajouter des propriétés et/ou des méthodes pour chaque instance de <code>Symbol</code> via la chaîne de prototypes.</p> - -<p>{{js_property_attributes(0,0,0)}}</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Symbol.prototype.constructor</code></dt> - <dd>Cette propriété correspond à la fonction qui a crée l'instance du prototype. Par défaut, c'est la fonction {{jsxref("Symbol")}} qui est renvoyée.</dd> - <dt>{{jsxref("Symbol.prototype.description")}}</dt> - <dd>Une chaîne de caractères en lecture seule qui contient la description du symbole.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}</dt> - <dd>Cette méthode renvoie une chaîne de caractères contenant la source de l'objet {{jsxref("Objets_globaux/Symbol", "Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Symbol.prototype.toString()")}}</dt> - <dd>Cette méthode renvoie une chaîne de caractères contenant la description du symbole. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt> - <dd>Cette méthode renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> - <dt>{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}</dt> - <dd>Renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.Symbol.prototype")}}</p> diff --git a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html deleted file mode 100644 index 7407f68670..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>SyntaxError.prototype</strong></code> représente le prototype du constructeur {{jsxref("SyntaxError")}}.</p> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("SyntaxError")}} héritent de <code>SyntaxError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à toutes les instances.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>SyntaxError.prototype.constructor</code></dt> - <dd>Définit la fonction qui a créé le prototype d'une instance.</dd> - <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> - <dd>Un message d'erreur. Bien que ECMA-262 définisse que {{jsxref("SyntaxError")}} doit avoir une propriété <code>message</code> en propre, dans <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, elle est héritée depuis {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> - <dd>Un nom d'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> - <dd>Le chemin du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> - <dd>Le numéro de la ligne du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> - <dd>Le numéro de la colonne dans la ligne qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> - <dd>La pile d'appels (<em>stack trace</em>). Propriété héritée depuis {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Bien que le prototype de {{jsxref("SyntaxError")}} ne possède pas de méthodes directes, les instances de {{jsxref("SyntaxError")}} héritent de certaines méthodes via la chaîne de prototypes.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.SyntaxError")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html deleted file mode 100644 index 85c7f14222..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: TypedArray.prototype -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong> représente le prototype des constructeurs {{jsxref("TypedArray")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("TypedArray")}} héritent de {{jsxref("TypedArray.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances de <em>TypedArray</em> (où <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>).</p> - -<p>Pour plus de détails sur le fonctionnement de l'héritage, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Description"><em>TypedArray</em></a>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>TypedArray.prototype.constructor</code></dt> - <dd>Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Elle correspondra à l'une des fonctions par défaut pour le <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">type du tableau typé</a> utilisé.</dd> - <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt> - <dd>Cette propriété renvoie l'{{jsxref("ArrayBuffer")}} qui est référencé par le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement.</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>Cette propriété renvoie la longueur (exprimée en octets) du tableau typé, à partir du début de l'{{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>Cette propriété renvoie le décalage utilisé (exprimé en octets) entre le début du tableau typé et le début du {{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd> - <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt> - <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> - <dd>Copie une suite d'éléments au sein du tableau typé. Voir aussi {{jsxref("Array.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> - <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés/valeurs pour chaque indice du tableau. Voir aussi {{jsxref("Array.prototype.entries()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> - <dd>Teste si tous les éléments du tableau typé respectent une condition donnée sous la forme d'une fonction. Voir aussi {{jsxref("Array.prototype.every()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> - <dd>Affecte une même valeur statique aux éléments du tableau typé entre un indice de début et un indice de fin. Voir aussi {{jsxref("Array.prototype.fill()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> - <dd>Crée un nouveau tableau typé dont les éléments proviennent d'un tableau typé qu'on a filtré avec une fonction. Voir aussi {{jsxref("Array.prototype.filter()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> - <dd>Renvoie la valeur trouvée dans le tableau typé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, {{jsxref("undefined")}} sera renvoyé. Voir aussi {{jsxref("Array.prototype.find()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> - <dd>Renvoie l'indice de l'élément trouvé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.findIndex()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> - <dd>Appelle une fonction pour chaque élément du tableau typé. Voir aussi {{jsxref("Array.prototype.forEach()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.includes()")}}</dt> - <dd>Détermine si un élément est contenu dans un tableau typé et renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir aussi {{jsxref("Array.prototype.includes()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> - <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, la valeur -1 sera renvoyée. Voir aussi {{jsxref("Array.prototype.indexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> - <dd>Fusionne l'ensemble des éléments du tableau typé en une chaîne de caractères. Voir aussi {{jsxref("Array.prototype.join()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> - <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés pour chaque élément du tableau. Voir aussi {{jsxref("Array.prototype.keys()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> - <dd>Renvoie le dernier indice (le plus grand) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> - <dd>Crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Voir aussi {{jsxref("Array.prototype.map()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> - <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> - <dd>Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de gauche à droite) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduce()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> - <dd>Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de droite à gauche) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduceRight()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> - <dd>Inverse l'ordre des éléments du tableau typé (le premier devient le dernier, le dernier devient le premier et ainsi de suite). Voir aussi {{jsxref("Array.prototype.reverse()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> - <dd>Cette méthode permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.</dd> - <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> - <dd>Extrait un fragment du tableau typé et renvoie ce fragment sous forme d'un tableau typé. Voir aussi {{jsxref("Array.prototype.slice()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> - <dd>Renvoie <code>true</code> si au moins un élément du tableau typé respecte une condition définie par une fonction passée en argument. Voir aussi {{jsxref("Array.prototype.some()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> - <dd>Trie les éléments du tableau typé sur place et renvoie le tableau typé. Voir aussi {{jsxref("Array.prototype.sort()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> - <dd>Cette méthode renvoie un nouvel objet <code>TypedArray</code> en fonction d'un indice de début et de fin.</dd> - <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> - <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs pour chaque indice du tableau typé. Voir aussi {{jsxref("Array.prototype.values()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> - <dd>Renvoie une chaîne de caractères localisée qui représente le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> - <dd>Renvoie une chaîne de caractères représentant le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toString()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> - <dd>Renvoie un nouvel objet <code>Array Iterator</code> contenant les valeurs pour chaque indice du tableau typé.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.TypedArray.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li> - <li>{{jsxref("TypedArray")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html deleted file mode 100644 index 041451e11c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: TypeError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/TypeError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Global_Objects/TypeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>TypeError.prototype</strong></code> représente le prototype du constructeur {{jsxref("TypeError")}}.</p> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("TypeError")}} héritent de <code>TypeError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à l'ensemble des instances.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>TypeError.prototype.constructor</code></dt> - <dd>Définit la fonction qui crée le prototype d'une instance.</dd> - <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt> - <dd>Un message d'erreur. Bien que la spécification ECMA-262 définisse que {{jsxref("TypeError")}} doive fournir une propriété directe pour <code>message</code>, <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> la fait hériter de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt> - <dd>Nom pour l'erreur, hérité depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt> - <dd>Le chemin vers le fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt> - <dd>La ligne du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt> - <dd>La colonne (la position dans la ligne) du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt> - <dd>La pile d'appels (<em>stack trace</em>). Héritée depuis {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Bien que l'objet prototype pour {{jsxref("TypeError")}} ne contienne aucune méthode propre (qui lui soit directement rattachée), {{jsxref("TypeError")}} hérite de certaines méthodes grâce à la chaîne de prototypes.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.TypeError")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html deleted file mode 100644 index 4c45a4af6b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: URIError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/URIError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference - - URIError -translation_of: Web/JavaScript/Reference/Global_Objects/URIError -translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>URIError.prototype</strong></code> représente le prototype du constructeur {{jsxref("URIError")}}.</p> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("URIError")}} héritent de <code>URIError.prototype</code>. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à l'ensemble des instances.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>URIError.prototype.constructor</code></dt> - <dd>Cette propriété définit la fonction qui a créé le prototype de l'instance.</dd> - <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt> - <dd>Un message décrivant l'erreur. Bien qu'ECMA-262 spécifie qu'{{jsxref("URIError")}} devrait avoir une propriété <code>message</code> en propre, <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> lui fait hériter de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt> - <dd>Un nom d'erreur. Héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt> - <dd>Le chemin vers le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt> - <dd>Le numéro de la ligne dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt> - <dd>Le numéro de colonne (la position dans la ligne) dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt> - <dd>La pile d'appels ayant mené à l'erreur (<em>stack trace</em>). Héritée de {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Bien que l'objet prototype pour {{jsxref("URIError")}} ne contienne pas de méthode qui lui soit directement rattachée, les instances d'{{jsxref("URIError")}} héritent de certaines méthodes grâce à la chaîne de prototypes.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.URIError")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html deleted file mode 100644 index 7ca2bf02d1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: WeakMap.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WeakMap")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Les instances de {{jsxref("WeakMap")}} héritent de {{jsxref("WeakMap.prototype")}}. L'objet prototype du constructeur peut donc être utilisé pour ajouter des propriétés et/ou des méthodes pour toutes les instances de <code>WeakMap</code>.</p> - -<p>WeakMap.prototype est un objet ordinaire :</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]" -</pre> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>WeakMap.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction {{jsxref("WeakMap")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(clé)")}}</dt> - <dd>Retire la valeur associée à la clé <code>clé.</code> <code>WeakMap.prototype.has(clé)</code> renverra <code>false</code> une fois la valeur supprimée.</dd> - <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(clé)")}}</dt> - <dd>Renvoie la valeur associée à la <code>clé</code>, ou <code>undefined</code> s'il n'y en a pas.</dd> - <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(clé)")}}</dt> - <dd>Renvoie un booléen qui indique s'il existe ou non une valeur associée à une <code>clé</code> donnée pour l'objet <code>WeakMap</code>.</dd> - <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(clé, valeur)")}}</dt> - <dd>Définit la valeur associée à la <code>clé</code> dans l'objet <code>WeakMap</code>. La méthode renvoie l'objet<code> WeakMap</code>.</dd> - <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}}</s> {{obsolete_inline}}</dt> - <dd><s class="obsoleteElement">Retire toutes les paires de clés/valeurs contenues dans l'objet <code>WeakMap</code>. Il est possible de construire un objet semblable à <code>WeakMap</code> qui possède une méthode <code>clear()</code> en encapsulant (cf. l'exemple sur la page {{jsxref("WeakMap")}}).</s></dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.WeakMap.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html deleted file mode 100644 index 092f97b6c3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: WeakSet.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>WeakSet</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WeakSet")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("WeakSet")}} héritent de {{jsxref("WeakSet.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des méthodes et/ou des propriétés à toutes les instances de <code>WeakSet</code>.</p> - -<p>WeakSet.prototype est un objet ordinaire :</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>WeakSet.prototype.constructor</code></dt> - <dd>Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction native {{jsxref("WeakSet")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(valeur)")}}</dt> - <dd>Cette méthode permet d'ajouter une nouvel objet avec une valeur donnée à l'objet <code>WeakSet</code>.</dd> - <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(valeur)")}}</dt> - <dd>Cette méthode retire l'élément associé à <code>valeur</code>. <code>WeakSet.prototype.has(valeur)</code> renverra <code>false</code> une fois l'opération effectuée.</dd> - <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(valeur)")}}</dt> - <dd>Cette méthode renvoie un booléen indiquant si oui ou non un élément est présent avec cette valeur au sein de l'objet <code>WeakSet</code>.</dd> - <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}}{{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Cette méthode retire tous les éléments de l'ensemble <code>WeakSet</code>.</s></dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.WeakSet.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> - <li>{{jsxref("WeakMap.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html deleted file mode 100644 index fabce82ac1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: WebAssembly.Global.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global/prototype -tags: - - JavaScript - - Propriété - - Prototype - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>WebAssembly.Global</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Global()")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("WebAssembly.Global")}} héritent de <code>Global.prototype</code>. L'objet prototype du constructeur {{jsxref("WebAssembly.Global()")}} peut être modifié afin d'avoir un impact sur l'ensemble des instances {{jsxref( "WebAssembly.Global")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Global.prototype.constructor</code></dt> - <dd>Cette propriété renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Global()")}}.</dd> - <dt><code>Global.prototype[@@toStringTag]</code></dt> - <dd>La valeur initiale de la propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag">@@toStringTag</a></code> est la chaîne de caractères <code>"WebAssembly.Global"</code>.</dd> - <dt><code>Global.prototype.value</code></dt> - <dd>La valeur contenue à l'intérieur de la variable globale. Cette propriété peut être utilisée afin de modifier et d'accéder à la valeur globale.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt><code>Global.prototype.valueOf()</code></dt> - <dd>Une méthode qui renvoie la valeur contenue dans la variable globale.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Brouillon pour la définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("WebAssembly.Global()")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html deleted file mode 100644 index 504c57504a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: WebAssembly.Instance.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - WebAssembly - - instance -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p>La propriété <code><strong>WebAssembly.Instance</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Instance()")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("WebAssembly.Instance")}} héritent de <code>Instance.prototype</code>. L'objet qui est le prototype du constructeur {{jsxref("WebAssembly.Instance()")}} permet de modifier l'ensemble des instances {{jsxref( "WebAssembly.Instance")}} à travers la chaîne des prototypes.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Instance.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Instance()")}}.</dd> - <dt><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/exports">Instance.prototype.exports</a></code> {{readonlyinline}}</dt> - <dd>Renvoie un objet dont les propriétés sont l'ensemble des fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler depuis du code JavaScript.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Aucune.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Brouillon de définition initiale pour WebAssembly.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("WebAssembly.Instance()")}}</li> - <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li> - <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li> - <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html deleted file mode 100644 index 32b16d8969..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: WebAssembly.Memory.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - WebAssembly - - memory -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p>La propriété <code><strong>WebAssembly.Memory</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Memory()")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("WebAssembly.Memory")}} héritent de <code>Memory.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Memory()")}} peut être modifié afin de modifier le comportement de l'ensemble des instances de {{jsxref( "WebAssembly.Memory")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Memory.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.</dd> - <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> - <dd>Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.</dd> - <dt> - <h2 id="Méthodes">Méthodes</h2> - </dt> - <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt> - <dd>Cette méthode permet d'accroître la taille de l'espace mémoire en ajoutant un nombre de pages WebAssembly (dont chacune mesure 64 Ko).</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Brouillon de définition initiale pour WebAssembly.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.WebAssembly.Memory.prototype")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("WebAssembly.Memory()")}}</li> - <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li> - <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li> - <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html deleted file mode 100644 index 3ac694ae07..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: WebAssembly.Module.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype -tags: - - Experimental - - JavaScript - - Module - - Propriété - - Prototype - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype ---- -<div>{{JSRef}}</div> - -<p>La propriété <code><strong>WebAssembly.Module</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Module()")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("WebAssembly.Module")}} héritent de <code>Module.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Module()")}} peut être modifié afin de modifier le comportement de toutes les instances de {{jsxref( "WebAssembly.Module")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Module.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Module()")}}.</dd> - <dt><code>Module.prototype[@@toStringTag]</code></dt> - <dd>La valeur initiale de la propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag">@@toStringTag</a></code> est la chaîne de caractères <code>"WebAssembly.Module"</code>.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Aucune.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Brouillon de définition initiale pour WebAssembly.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.WebAssembly.Module.prototype")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("WebAssembly.Module()")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html deleted file mode 100644 index b9f2be5e36..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: WebAssembly.Table.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/prototype -tags: - - Experimental - - JavaScript - - Propriété - - Prototype - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p>La propriété <code><strong>WebAssembly.Table</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Table()")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>Toutes les instances de {{jsxref("WebAssembly.Table")}} héritent de <code>Table.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Table()")}} peut être modifié afin de modifier le comportement de toutes les instances {{jsxref( "WebAssembly.Table")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt><code>Table.prototype.constructor</code></dt> - <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.</dd> - <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt> - <dd>Renvoie la taille du tableau, c'est-à-dire le nombre de références enregistrées dans le tableau.</dd> - <dt> - <h2 id="Méthodes">Méthodes</h2> - </dt> - <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt> - <dd>Une fonction accesseur qui permet d'obtenir une référence à partir d'une position dans le tableau.</dd> - <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt> - <dd>Cette méthode permet d'augmenter la taille de l'instance de <code>Table</code> d'un nombre donné de référence.</dd> - <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt> - <dd>Cette méthode permet de changer une référence située à une position donnée dans le tableau.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Brouillon de définition initiale pour WebAssembly.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("WebAssembly.Table")}}</li> - <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li> - <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li> - <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/addition/index.html b/files/fr/web/javascript/reference/operators/addition/index.html index 39f76c434d..39f76c434d 100644 --- a/files/fr/web/javascript/reference/opérateurs/addition/index.html +++ b/files/fr/web/javascript/reference/operators/addition/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html b/files/fr/web/javascript/reference/operators/addition_assignment/index.html index 5377d00b35..5377d00b35 100644 --- a/files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html +++ b/files/fr/web/javascript/reference/operators/addition_assignment/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/assignement/index.html b/files/fr/web/javascript/reference/operators/assignment/index.html index 5011c20000..5011c20000 100644 --- a/files/fr/web/javascript/reference/opérateurs/assignement/index.html +++ b/files/fr/web/javascript/reference/operators/assignment/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/async_function/index.html b/files/fr/web/javascript/reference/operators/async_function/index.html index 0dd3cf0def..0dd3cf0def 100644 --- a/files/fr/web/javascript/reference/opérateurs/async_function/index.html +++ b/files/fr/web/javascript/reference/operators/async_function/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/await/index.html b/files/fr/web/javascript/reference/operators/await/index.html index 87423b32a0..87423b32a0 100644 --- a/files/fr/web/javascript/reference/opérateurs/await/index.html +++ b/files/fr/web/javascript/reference/operators/await/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/class/index.html b/files/fr/web/javascript/reference/operators/class/index.html index b41f9fc832..b41f9fc832 100644 --- a/files/fr/web/javascript/reference/opérateurs/class/index.html +++ b/files/fr/web/javascript/reference/operators/class/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html b/files/fr/web/javascript/reference/operators/comma_operator/index.html index d3ccf9c8f4..d3ccf9c8f4 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html +++ b/files/fr/web/javascript/reference/operators/comma_operator/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html b/files/fr/web/javascript/reference/operators/conditional_operator/index.html index c2357f8e93..c2357f8e93 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html +++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html b/files/fr/web/javascript/reference/operators/delete/index.html index 19a48f8649..19a48f8649 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html +++ b/files/fr/web/javascript/reference/operators/delete/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html index cdce16f559..cdce16f559 100644 --- a/files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html +++ b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html b/files/fr/web/javascript/reference/operators/function/index.html index bff2848ad7..bff2848ad7 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html +++ b/files/fr/web/javascript/reference/operators/function/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/function_star_/index.html b/files/fr/web/javascript/reference/operators/function_star_/index.html index 8fa8fa1a4e..8fa8fa1a4e 100644 --- a/files/fr/web/javascript/reference/opérateurs/function_star_/index.html +++ b/files/fr/web/javascript/reference/operators/function_star_/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/groupement/index.html b/files/fr/web/javascript/reference/operators/grouping/index.html index 07292088cd..07292088cd 100644 --- a/files/fr/web/javascript/reference/opérateurs/groupement/index.html +++ b/files/fr/web/javascript/reference/operators/grouping/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html b/files/fr/web/javascript/reference/operators/in/index.html index 53c02fb41c..53c02fb41c 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html +++ b/files/fr/web/javascript/reference/operators/in/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/index.html b/files/fr/web/javascript/reference/operators/index.html index 531baa29cc..531baa29cc 100644 --- a/files/fr/web/javascript/reference/opérateurs/index.html +++ b/files/fr/web/javascript/reference/operators/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/instanceof/index.html b/files/fr/web/javascript/reference/operators/instanceof/index.html index 1db76a5bbd..1db76a5bbd 100644 --- a/files/fr/web/javascript/reference/opérateurs/instanceof/index.html +++ b/files/fr/web/javascript/reference/operators/instanceof/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/new.target/index.html b/files/fr/web/javascript/reference/operators/new.target/index.html index 63be303c4c..63be303c4c 100644 --- a/files/fr/web/javascript/reference/opérateurs/new.target/index.html +++ b/files/fr/web/javascript/reference/operators/new.target/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html b/files/fr/web/javascript/reference/operators/new/index.html index b82a898dc9..b82a898dc9 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html +++ b/files/fr/web/javascript/reference/operators/new/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html index 06de88d2b1..06de88d2b1 100644 --- a/files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html +++ b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html b/files/fr/web/javascript/reference/operators/object_initializer/index.html index 6aa4d3121f..6aa4d3121f 100644 --- a/files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html +++ b/files/fr/web/javascript/reference/operators/object_initializer/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html b/files/fr/web/javascript/reference/operators/operator_precedence/index.html index 1aac441b77..1aac441b77 100644 --- a/files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html +++ b/files/fr/web/javascript/reference/operators/operator_precedence/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html b/files/fr/web/javascript/reference/operators/optional_chaining/index.html index 9885b6d8ca..9885b6d8ca 100644 --- a/files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html +++ b/files/fr/web/javascript/reference/operators/optional_chaining/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/tube/index.html b/files/fr/web/javascript/reference/operators/pipeline_operator/index.html index 2763987971..2763987971 100644 --- a/files/fr/web/javascript/reference/opérateurs/tube/index.html +++ b/files/fr/web/javascript/reference/operators/pipeline_operator/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html b/files/fr/web/javascript/reference/operators/property_accessors/index.html index e78aae110d..e78aae110d 100644 --- a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html +++ b/files/fr/web/javascript/reference/operators/property_accessors/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html b/files/fr/web/javascript/reference/operators/spread_syntax/index.html index 75f97a972f..75f97a972f 100644 --- a/files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html +++ b/files/fr/web/javascript/reference/operators/spread_syntax/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/super/index.html b/files/fr/web/javascript/reference/operators/super/index.html index 05a40df1fc..05a40df1fc 100644 --- a/files/fr/web/javascript/reference/opérateurs/super/index.html +++ b/files/fr/web/javascript/reference/operators/super/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html b/files/fr/web/javascript/reference/operators/this/index.html index a5b23ca81d..a5b23ca81d 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html +++ b/files/fr/web/javascript/reference/operators/this/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html b/files/fr/web/javascript/reference/operators/typeof/index.html index e65d9a6db2..e65d9a6db2 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html +++ b/files/fr/web/javascript/reference/operators/typeof/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html b/files/fr/web/javascript/reference/operators/void/index.html index e15eb1ed76..e15eb1ed76 100644 --- a/files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html +++ b/files/fr/web/javascript/reference/operators/void/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/yield/index.html b/files/fr/web/javascript/reference/operators/yield/index.html index f6a5de53e6..f6a5de53e6 100644 --- a/files/fr/web/javascript/reference/opérateurs/yield/index.html +++ b/files/fr/web/javascript/reference/operators/yield/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/yield_star_/index.html b/files/fr/web/javascript/reference/operators/yield_star_/index.html index 3235d87dc1..3235d87dc1 100644 --- a/files/fr/web/javascript/reference/opérateurs/yield_star_/index.html +++ b/files/fr/web/javascript/reference/operators/yield_star_/index.html diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html deleted file mode 100644 index d11d106a96..0000000000 --- a/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: Opérateurs arithmétiques -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Les opérateurs arithmétiques </strong>utilisent des valeurs numériques (variables ou littéraux) comme opérandes et renvoient une valeur numérique. Les opérateurs arithmétiques standard sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Addition_2"><a name="Addition">Addition (+)</a></h2> - -<p>L'opérateur d'addition permet d'obtenir la somme des opérandes numériques ou bien la concaténation de chaînes de caractères.</p> - -<h3 id="Syntaxe">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : x + y</pre> - -<h3 id="Exemples">Exemples</h3> - -<pre class="brush: js">// nombre + nombre -> addition -1 + 2 // 3 - -// booléen + nombre -> addition -true + 1 // 2 - -// booléen + booléen -> addition -false + false // 0 - -// nombre + chaîne de caractères -> concaténation -5 + " - - concaténation -"toto" + false // "totofalse" - -// chaîne de caractères + chaîne de caractères -> concaténation -"toto" + "truc" // "tototruc" -</pre> - -<h2 id="Soustraction_-"><a name="Subtraction">Soustraction (-)</a></h2> - -<p>L'opérateur de soustraction soustrait les deux opérandes pour obtenir leur différence.</p> - -<h3 id="Syntaxe_2">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : x - y</pre> - -<h3 id="Exemples_2">Exemples</h3> - -<pre class="brush:js">5 - 3 // 2 -3 - 5 // -2 -"toto" - 3 // NaN -</pre> - -<h2 id="Division_2"><a name="Division">Division (/)</a></h2> - -<p>L'opérateur de division produit le quotient de ces opérandes avec l'opérande gauche comme numérateur et l'opérande droit comme dénominateur.</p> - -<h3 id="Syntaxe_3">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : x / y</pre> - -<h3 id="Exemples_3">Exemples</h3> - -<pre class="brush: js">1 / 2 // renvoie 0.5 en JavaScript -1 / 2 // renvoie 0 en Java -// (aucun des deux opérandes n'est un nombre flottant de façon explicite) - -1.0 / 2.0 // renvoie 0.5 en JavaScript et Java - -2.0 / 0 // renvoie Infinity (pour l'infini) en JavaScript -2.0 / 0.0 // renvoie Infinity également -2.0 / -0.0 // renvoie -Infinity en JavaScript</pre> - -<h2 id="Multiplication_*"><a name="Multiplication">Multiplication (*)</a></h2> - -<p>L'opérateur de multiplication permet d'obtenir le produit des opérandes.</p> - -<h3 id="Syntaxe_4">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : x * y</pre> - -<h3 id="Exemples_4">Exemples</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN -Infinity * Infinity // Infinity -"toto" * 2 // NaN -</pre> - -<h2 id="Reste"><a name="Remainder">Reste (%)</a></h2> - -<p>L'opérateur « reste » renvoie le reste de la division du premier opérande par le second. Le résultat obtenu a toujours le signe du numérateur (la quantité divisée).</p> - -<h3 id="Syntaxe_5">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : var1 % var2</pre> - -<h3 id="Exemples_5">Exemples</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -1 % -2 // 1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5</pre> - -<h2 id="Exponentiation_**"><a id="Exponentiation" name="Exponentiation">Exponentiation (**)</a></h2> - -<p>L'opérateur d'exponentiation (aussi appelé opérateur de puissance) renvoie le résultat de l'élévation d'un nombre (premier opérande) à une puissance donnée (deuxième opérande). Par exemple : <code>var1 ** var2</code> sera équivalent à <code>var1<sup>var2</sup></code> en notation mathématique. Cet opérateur est associatif à droite, autrement dit <code>a ** b ** c</code> est égal à <code>a ** (b ** c)</code>.</p> - -<h3 id="Syntaxe_6">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : var1 ** var2</pre> - -<h3 id="Notes">Notes</h3> - -<p>Dans la plupart des langages (par exemple PHP, Python, etc.), l'opérateur d'exponentiation est défini avec une précédence supérieure à celle des opérateurs unaires tels que le plus unaire et le moins unaire. Des exceptions existent comme Bash où l'opérateur ** a une précédence inférieure à celle des opérateurs unaires. En JavaScript, il est impossible d'écrire une expression ambigüe avec l'exponentiation : il est impossible de placer un opérateur unaire juste avant le nombre.</p> - -<pre class="brush: js">-2 ** 2; -// vaut 4 en Bash ou -4 avec d'autres langages -// C'est invalide en JavaScript car il y -// une ambiguïté liée à l'expression - -- (2 ** 2); -// -4 en JavaScript car les parenthèses lèvent -// l'ambiguïté -</pre> - -<h3 id="Exemples_6">Exemples</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64</pre> - -<div class="note"> -<p><strong>Note :</strong> JavaScript possède également <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(XOR_binaire)">un opérateur binaire ^ (XOR logique)</a>. <code>**</code> et <code>^</code> sont deux opérateurs bien différents. Par exemple <code>2 ** 3 === 8</code> et <code>2 ^ 3 === 1</code>.</p> -</div> - -<h2 id="Incrément"><a name="Increment">Incrément (++)</a></h2> - -<p>L'opérateur d'incrément ajoute une unité à son opérande et renvoie une valeur.</p> - -<ul> - <li>Si l'opérateur est utilisé en suffixe (par exemple : x++), il renvoie la valeur avant l'incrémentation.</li> - <li>Si l'opérateur est utilisé en préfixe (par exemple : ++x), il renvoie la valeur après l'incrémentation.</li> -</ul> - -<h3 id="Syntaxe_7">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : x++ ou ++x</pre> - -<h3 id="Exemples_7">Exemples</h3> - -<pre class="brush: js">// Suffixe -var x = 3; -y = x++; // y = 3, x = 4 - -// Préfixe -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="Décrément_--"><a name="Decrement">Décrément (--)</a></h2> - -<p>L'opérateur de décrément soustrait une unité à son opérande et renvoie une valeur.</p> - -<ul> - <li>Si l'opérateur est utilisé en suffixe (par exemple : x--), il renvoie la valeur avant la décrémentation.</li> - <li>Si l'opérateur est utilisé en préfixe (par exemple : --x), il renvoie la valeur après la décrémentation.</li> -</ul> - -<h3 id="Syntaxe_8">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : x-- ou --x</pre> - -<h3 id="Exemples_8">Exemples</h3> - -<pre class="brush: js">// Suffixe -var x = 3; -y = x--; // y = 3, x = 2 - -// Préfixe -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="Négation_unaire_-"><a name="Unary_negation">Négation unaire (-)</a></h2> - -<p>L'opérateur de négation unaire précède son opérande et prend l'opposé de celui-ci (après l'avoir converti en nombre si besoin).</p> - -<h3 id="Syntaxe_9">Syntaxe</h3> - -<pre class="syntaxbox">Opérateur : -x</pre> - -<h3 id="Exemples_9">Exemples</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 - -// La négation unaire permet de convertir -// un opérande en nombre -var y = "4"; -var z = -y; // z = -4 -</pre> - -<h2 id="Plus_unaire"><a name="Unary_plus">Plus unaire</a> (+)</h2> - -<p>L'opérateur unaire plus (+) précède son opérande, l'évaluation correspond à son opérande, converti en nombre si possible et si ce n'est pas déjà un nombre. Bien que l'opérateur de négation unaire (-) puisse également convertir les expressions qui ne sont pas des nombres, le plus unaire est la méthode la plus efficace et celle la plus utilisée pour convertir quelque chose en un nombre car la conversion est la seule opération effectuée. Cet opérateur permet de convertir les chaînes de caractères représentant des nombres entiers, des nombres flottants ainsi que les valeurs <code>true</code>, <code>false</code>, et <code>null</code>. Les entiers, représentés sous forme décimale ou hexadécimale (préfixés par "0x"), sont supportés. Les nombres négatifs sont également supportés (mais pas au format hexadécimal). Si l'opérateur ne peut pas analyser l'opérande fourni, il sera évalué à <a href="/fr/docs/JavaScript/Reference/Propriétés_globales/NaN">NaN</a>.</p> - -<h3 id="Syntaxe_10">Syntaxe</h3> - -<pre class="syntaxbox">Opérator : +x</pre> - -<h3 id="Exemples_10">Exemples</h3> - -<pre class="brush: js">+3 // 3 -+"3" // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val; } // NaN -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td><a href="https://github.com/rwaldron/exponentiation-operator">Ajout de l'opérateur d'exponentiation.</a></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définis au sein de plusieurs sections de cette spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Opérateurs additifs</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">opérateurs multiplicatifs</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">expressions postfixes</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">opérateurs unaires</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définis au sein de plusieurs sections de cette spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Opérateurs additifs</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.5">opérateurs multiplicatifs</a>,<a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.3"> expressions postfixes</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4">opérateurs unaires</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html deleted file mode 100644 index af76410f01..0000000000 --- a/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html +++ /dev/null @@ -1,554 +0,0 @@ ---- -title: Opérateurs binaires -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires -tags: - - JavaScript - - Operator - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Les opérateurs binaires traitent leurs opérandes comme des séquences de 32 bits (des zéros et des uns), plutôt que comme des nombres décimaux, hexadécimaux ou octaux. Par exemple, le nombre décimal neuf a une représentation binaire de 1001. Les opérateurs binaires traitent de telles représentations binaires, mais renvoient des valeurs numériques JavaScript standards.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Le tableau qui suit résume les opérateurs binaires de JavaScript :</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Opérateur</th> - <th>Utilisation</th> - <th>Description</th> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(ET_binaire)">ET binaire</a></td> - <td><code>a & b</code></td> - <td> - <p>Renvoie un <code>1</code> pour chaque position de bit pour laquelle les bits correspondants des deux opérandes sont des <code>1</code>.</p> - </td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)">OU binaire</a></td> - <td><code>a | b</code></td> - <td>Renvoie un <code>1</code> pour chaque position de bit pour laquelle le bit correspondant d'au moins un des deux opérandes est un <code>1</code> .</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(XOR_binaire)">OU exclusif binaire (<em>XOR</em>)</a></td> - <td><code>a ^ b</code></td> - <td>Renvoie un <code>1</code> pour chaque position de bit pour laquelle le bit correspondant d'un seul des deux opérandes est un <code>1</code>.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(NON_binaire)">NON binaire</a></td> - <td><code>~ a</code></td> - <td>Inverse les bits de son opérande.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#<<_(décalage_à_gauche)">Décalage à gauche</a></td> - <td><code>a << b</code></td> - <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la gauche, en introduisant des zéros par la droite.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)">Décalage à droite avec propagation du signe</a></td> - <td><code>a >> b</code></td> - <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la droite, en rejetant les bits à droite.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)">Décalage à droite avec introduction de zéros</a></td> - <td><code>a >>> b</code></td> - <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la droite, en rejetant les bits à droite et en introduisant des zéros par la gauche.</td> - </tr> - </tbody> -</table> - -<h2 id="Entiers_sur_32_bits_signés">Entiers sur 32 bits signés</h2> - -<p>Les opérandes de tous les opérateurs binaires sont convertis en entiers signés sur 32 bits en ordre big-endian et en format de <a href="https://fr.wikipedia.org/wiki/Compl%C3%A9ment_%C3%A0_deux">complément à deux</a> (à l'exception de l'opération de décalage à droite avec remplissage des zéros qui renvoie un non-signé). L'ordre big-endian signifie que le bit le plus significatif (la position du bit qui a la plus grande valeur) est le bit le plus à gauche si les 32 bits sont disposés sur une ligne horizontale. Le format de complément à deux signifie que la contrepartie négative d'un nombre (par exemple 5 pour -5) est l'inversion de tous les bits du nombre (NON binaire du nombre, c'est-à-dire son complément à un) plus un. Par exemple, la représentation suivante encode l'entier 314 (base 10) :</p> - -<pre class="eval">00000000000000000000000100111010 -</pre> - -<p>La représentation suivante encode ~314, c'est-à-dire le complément à un de 314 :</p> - -<pre class="eval">11111111111111111111111011000101 -</pre> - -<p>Finalement, la représentation suivante encode -314, c'est-à-dire le complément à deux de 314 :</p> - -<pre class="eval">11111111111111111111111011000110 -</pre> - -<p>Le complément à deux garantit que le bit le plus à gauche soit 0 lorsque le nombre est positif, et <code>1</code> lorsque le nombre est négatif. C'est pourquoi on l'appelle le <em>bit de signe</em> .</p> - -<p>Le nombre 0 est l'entier constitué intégralement de bits à <code>0</code> .</p> - -<pre>0 (base 10) = 00000000000000000000000000000000 (base 2)</pre> - -<p>Le nombre -1 est l'entier constitué intégralement de bits à <code>1</code> .</p> - -<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2)</pre> - -<p>Le nombre <code>-2147483648</code> (qui correspond à <code>-0x80000000</code> en notation hexadécimale) est l'entier uniquement composé de 0, à l'exception du premier bit (le plus à gauche) qui vaut 1.</p> - -<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)</pre> - -<p>Le nombre <code>2147483647</code> (qui correspond à <code>0x7fffffff</code> en notation hexadécimale) est l'entier uniquement composé de 1, à l'exception du premier bit (le plus à gauche) qui vaut 0.</p> - -<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2)</pre> - -<p>Les nombres <code>-2147483648</code> et <code>2147483647</code> sont respectivement le nombre le plus petit et le plus grand qu'on peut représenter sur 32 bits (signés).</p> - -<h2 id="Opérateurs_logiques_binaires">Opérateurs logiques binaires</h2> - -<p>Conceptuellement, les opérateurs logiques binaires fonctionnent de la manière suivante :</p> - -<ul> - <li>Les opérandes sont convertis en entiers sur 32 bits et exprimés sous la forme d'une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : - <pre class="brush: js">Avant : 11100110111110100000000000000110000000000001 -Après : 10100000000000000110000000000001</pre> - </li> - <li>Chaque bit du premier opérande est combiné avec le bit correspondant du second opérande : le premier bit avec le premier bit, le second bit avec le second bit, et ainsi de suite.</li> - <li>L'opérateur est appliqué à chaque paire de bits, et le résultat est construit bit après bit.</li> -</ul> - -<h3 id="(ET_binaire)"><a name="ET">& (ET binaire)</a></h3> - -<p>Effectue l'opération ET (<em>AND</em>) sur chaque paire de bits. <code>a</code> ET <code>b</code> donne 1 uniquement si à la fois <code>a</code> et <code>b</code> sont <code>1</code> . La table de vérité pour l'opération ET est :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a ET b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>Utiliser le ET binaire avec n'importe quel nombre x et zéro donne zéro. Utiliser le ET binaire avec n'importe quel nombre x et -1 donne x.</p> - -<h3 id="(OU_binaire)"><a name="OU">| (OU binaire)</a></h3> - -<p>Effectue l'opération OU (<em>OR</em>) sur chaque paire de bits. <code>a</code> OU <code>b</code> donne <code>1</code> si <code>a</code> ou <code>b</code> vaut 1. La table de vérité pour l'opération OU est :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OU b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Utiliser le OU binaire avec n'importe quel nombre x et 0 donne x. Utiliser le OU binaire avec n'importe quel nombre x et -1 donne -1.</p> - -<h3 id="(XOR_binaire)"><a name="XOR">^ (XOR binaire)</a></h3> - -<p>Effectue l'opération XOR (OU exclusif) sur chaque paire de bits. <code>a</code> XOR <code>b</code> donne <code>1</code> si <code>a</code> et <code>b</code> sont différents. La table de vérité pour l'opération XOR est :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Utiliser le XOR binaire avec n'importe quel nombre x et 0 donne x. Utiliser le XOR binaire avec n'importe quel nombre x et -1 donne ~x.</p> - -<h3 id="(NON_binaire)"><a name="NON">~ (NON binaire)</a></h3> - -<p>Effectue l'opération NON (<em>NOT</em>) sur chaque bit. NON <code>a</code> donne la valeur inversée (c'est-à-dire le complément à un) de <code>a</code>. La table de vérité de l'opération NON est :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NON a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p>Utiliser le NON binaire avec n'importe quel nombre <code>x</code> donne <code>-(x + 1)</code>. Par exemple, <code>~-5</code> donne <code>4</code>.</p> - -<p>Étant donnée la représentation sur 32 bits des nombres en JavaScript, on a <code>~-1</code> et <code>~4294967295</code> (2<sup>32</sup>-1) qui valent tous les deux <code>0</code>.</p> - -<h2 id="Opérateurs_de_décalage_binaire">Opérateurs de décalage binaire</h2> - -<p>Les opérateurs de décalage binaire (<em>shift</em>) prennent deux opérandes : le premier est une valeur à décaler et le second spécifie le nombre de positions de bits duquel le premier opérande doit glisser. La direction de l'opération de décalage est contrôlée par l'opérateur utilisé.</p> - -<p>Les opérateurs de décalage convertissent leurs opérandes en entiers 32 bits en ordre big-endian et renvoient un résultat du même type que l'opérande de gauche. L'opérande droit doit être inférieur à 32, sinon les cinq bits les plus faibles seront utilisés.</p> - -<h3 id="<<_(décalage_à_gauche)"><a name="Gauche"><< (décalage à gauche)</a></h3> - -<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la gauche. Les bits surnuméraires éjectés à gauche sont perdus. Des bits à zéro sont insérés par la droite.</p> - -<p>Par exemple, <code>9 << 2</code> donne 36 :</p> - -<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10) : 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Décaler un nombre <strong>x</strong> de <strong>y</strong> bits vers la gauche renverra <math><semantics><mrow><mi>x</mi><mo>*</mo><msup><mn>2</mn><mi>y</mi></msup></mrow><annotation encoding="TeX">x*2^y</annotation></semantics></math>. Par exemple, <code>9 << 3</code> correspondra à <code>9 * (2 ** 3) = 9 * 8 = 72</code>.</p> - -<h3 id=">>_(décalage_à_droite_avec_propagation_du_signe)"><a name="Droite">>> (décalage à droite avec propagation du signe)</a></h3> - -<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des copies du bit le plus à gauche sont insérés par la gauche. Comme le bit le plus a gauche a la même valeur qu'avant l'opération, le bit de signe (celui qui est le plus à gauche) ne change pas. D'où ce qu'on appelle la « propagation du signe ».</p> - -<p>Par exemple, <code>9 >> 2</code> donne 2 :</p> - -<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10) : 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>De même, <code>-9 >> 2</code> donne -3, parce que le signe est préservé :</p> - -<pre class="eval"> -9 (base 10) : 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10) : 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_(décalage_à_droite_avec_insertion_de_zéros)"><a name="Droite_zero">>>> (décalage à droite avec insertion de zéros)</a></h3> - -<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des bits à zéro sont insérés par la gauche. Le bit de signe devient 0, donc le résultat est toujours positif. À la différence des autres opérateurs binaires, cette opération renvoie un entier non-signé sur 32 bits.</p> - -<p>Pour les nombres non négatifs, le décalage à droite avec insertion de zéros et le décalage à droite avec propagation du signe donnent le même résultat. Par exemple, <code>9 >>> 2</code> donne 2, tout comme <code>9 >> 2</code> :</p> - -<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10) : 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Cependant, ce n'est pas le cas des nombres négatifs. Par exemple, <code>-9 >>> 2</code> donne 1073741821, ce qui est différent de <code>-9 >> 2</code> (qui donne -3) :</p> - -<pre class="eval"> -9 (base 10) : 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10) : 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Exemple_flags_et_bitmasks">Exemple : <em>flags</em> et <em>bitmasks</em></h3> - -<p>Les opérateurs logiques binaires sont souvent utilisés pour créer, manipuler et lire des séquences de<em>flags</em> , qui sont comme des variables binaires. On pourrait très bien utiliser des variables à la place de ces séquences binaires, mais des flags binaires prennent nettement moins de mémoire (par un facteur de 32).</p> - -<p>Supposons que l'on ait 4 flags :</p> - -<ul> - <li>flag A : nous avons une araignée</li> - <li>flag B : nous avons une belette</li> - <li>flag C : nous avons un chat</li> - <li>flag D : nous avons un dinosaure</li> -</ul> - -<p>Ces flags sont représentés par une séquence de bits : DCBA. Lorsqu'un flag est <em>positionné</em>, il a une valeur de 1. Sinon, il a une valeur de 0. Supposons qu'une variable <code>flags</code> a la valeur binaire de 0101 :</p> - -<pre class="eval">var flags = 0x5; // 0101 en binaire -</pre> - -<p>Cette valeur indique :</p> - -<ul> - <li>le flag A est vrai (nous avons une araignée) ;</li> - <li>le flag B est faux (nous n'avons pas de belette) ;</li> - <li>le flag C est vrai (nous avons un chat) ;</li> - <li>le flag D est faux (nous n'avons pas de dinosaure).</li> -</ul> - -<p>Comme les opérateurs binaires sont sur 32 bits, <code>0101</code> est en fait <code>00000000000000000000000000000101</code>, mais les zéros qui précèdent peuvent être négligés étant donné qu'ils ne contiennent aucune information significative.</p> - -<p>Un <em>bitmask</em> est une séquence de bits qui peuvent manipuler et/ou lire des flags. Typiquement, un masque « primitif » pour chaque flag est défini :</p> - -<pre class="eval">var FLAG_A = 0x1; // 0001 -var FLAG_B = 0x2; // 0010 -var FLAG_C = 0x4; // 0100 -var FLAG_D = 0x8; // 1000 -</pre> - -<p>De nouveaux masques peuvent être créés à l'aide des opérateurs logiques binaires sur ces masques primitifs. Par exemple, le masque <code>1011</code> peut être créé avec une opération OU sur <code>FLAG_A</code>, <code>FLAG_B</code> et <code>FLAG_D</code> :</p> - -<pre class="eval">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Des valeurs de flag particulières peuvent être extraites à l'aide d'une opération ET avec un bitmask, où chaque bit avec la valeur 1 va « extraire » le flag qui correspond. Le bitmask <em>masque</em> les flags dont on n'a pas besoin en effectuant l'opération ET avec des zéros (d'où le terme « bitmask »). Par exemple, le masque 0100 peut être utilisé pour voir si le flag C est positionné :</p> - -<pre class="eval">// si l'on a un chat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // faire quelque chose -} -</pre> - -<p>Un masque avec plusieurs flags positionnés agit comme un « et/ou ». Par exemple, les deux instructions suivantes sont équivalentes :</p> - -<pre class="eval">// si on a une belette ou si on a un chat -if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true - // faire quelque chose -} -</pre> - -<pre class="eval">// si on a une belette ou si on a un chat -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // faire quelque chose -} -</pre> - -<p>Les flags peuvent être positionnés en utilisant l'opération OU avec un masque, où chaque bit de la valeur 1 définira le flag correspondant, si celui-ci n'est pas déjà positionné. Par exemple, le masque 1100 peut être utilisé pour positionner les flags C et D :</p> - -<pre class="eval">// oui, on a un chat et un dinosaure -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Les flags peuvent être remis à zéro en utilisant l'opération ET avec un masque, où chaque bit avec la valeur 0 remettra à zéro le flag correspondant s'il ne l'est pas déjà. Ce masque peut être créé avec l'opération NOT sur les masques primitifs. Par exemple, le masque 1010 peut être utilisé pour remettre à zéro les flags A et C :</p> - -<pre class="eval">// non, nous n'avons pas d'araignée ou de chat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Le masque aurait également pu être créé avec <code>~FLAG_A & ~FLAG_C</code> (Loi de De Morgan) :</p> - -<pre class="eval">// non, nous n'avons pas d'araignée ou de chat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Les flags peuvent être inversés en utilisant l'opération XOR avec un masque, où chaque bit avec la valeur 1 inversera le flag correspondant. Par exemple, le masque 0110 peut être utilisé pour inverser les flags B et C :</p> - -<pre class="eval">// si on n'avait pas de belette, on en a maintenant une. -// si on en avait une, on ne l'a plus. Même chose pour les chats. -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Finalement, les flags peuvent être tous inversés avec l'opérateur NON :</p> - -<pre class="eval">// entrée dans un univers parallèle... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Codes_de_conversion">Codes de conversion</h3> - -<p>Pour convertir une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></code> binaire en un <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number</a></code> (en base 10):</p> - -<pre class="brush: js">var chaîneBinaire = "1011"; -var monNombre = parseInt(chaîneBinaire, 2); -console.log(monNombre); // affiche 11 (1011 en base 2) -</pre> - -<p>Pour convertir un <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number</a></code> (en base 10) en une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></code> binaire :</p> - -<pre class="brush: js">var monNombre = 11; -var chaîneBinaire = monNombre.toString(2); -console.log(chaîneBinaire); // affiche 1011 (11 en base 10) -</pre> - -<h3 id="Automatiser_la_création_d'un_masque">Automatiser la création d'un masque</h3> - -<p>Si vous devez créer plusieurs masques à partir de booléens, il est possible d'automatiser ce processus :</p> - -<pre class="brush: js">function créerMasque () { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var masque1 = créerMasque(true, true, false, true); // 11, i.e.: 1011 -var masque2 = créerMasque(false, false, true); // 4, i.e.: 0100 -var masque3 = créerMasque(true); // 1, i.e.: 0001 -// etc. - -console.log(masque1); // affiche 11, i.e.: 1011 -</pre> - -<h3 id="Algorithme_réciproque_obtenir_un_tableau_de_booléen_à_partir_d'un_masque">Algorithme réciproque : obtenir un tableau de booléen à partir d'un masque</h3> - -<p>Si on souhaite créer un tableau de booléens à partir d'un masque, on pourra utiliser le code suivant :</p> - -<pre class="brush: js">function tableauMasque (nMask) { - // nMask doit être compris entre -2147483648 et 2147483647 - if (nMask > 0x7fffffff || nMask < -0x80000000) { - throw new TypeError("tableauMasque - intervalle de valeur dépassé"); - } - for (var nShifted = nMask, aFromMask = []; nShifted; - aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var tableau1 = tableauMasque(11); -var tableau2 = tableauMasque(4); -var tableau3 = tableauMasque(1); - -console.log("[" + tableau1.join(", ") + "]"); -// affiche "[true, true, false, true]", i.e.: 11, i.e.: 1011 -</pre> - -<p>On peut ainsi utiliser les deux algorithmes :</p> - -<pre class="brush: js">var test = 19; // un masque quelconque -var résultat = créerMasque.apply(this, tableauMasque(test)); - -console.log(résultat); // 19 -</pre> - -<p>Pour l'exemple (car il existe la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toString">Number.toString(2)</a></code>), on peut également modifier l'algorithme précédent pour créer une chaîne à partir de la représentation binaire d'un nombre :</p> - -<pre class="brush: js">function créerChaîneBinaire(nMask) { - // nMask doit être compris entre -2147483648 et 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; - nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = créerChaîneBinaire(11); -var string2 = créerChaîneBinaire(4); -var string3 = créerChaîneBinaire(1); - -console.log(string1); -// affiche 00000000000000000000000000001011, i.e. 11 -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définis au sein de plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Opérateur NON binaire</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Opérateurs binaires de décalage</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Opérateurs binaires</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définis au sein de plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Opérateur NON binaire</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Opérateurs binaires de décalage</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Opérateurs binaires</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">opérateur NON binaire</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">opérateurs binaires de décalage</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">opérateurs binaires</a></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.operators.bitwise")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques">Les opérateurs logiques</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html deleted file mode 100644 index d019cb8637..0000000000 --- a/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html +++ /dev/null @@ -1,414 +0,0 @@ ---- -title: Opérateurs d'affectation -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Un <strong>opérateur d'affectation</strong> permet d'assigner une valeur à son opérande gauche en se basant sur la valeur de son opérande droit.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Description">Description</h2> - -<p>L'opérateur utilisé pour l'affectation est le symbole égal (<code>=</code>), il permet d'affecter la valeur de l'opérande droit à son opérande gauche. Ainsi, quand on écrit <code>x = y</code>, on affecte la valeur de <code>y</code> à <code>x</code>. Les autres opérateurs d'affectation sont généralement des raccourcis pour des opérations standards. Ils sont décrits ci-après avec définitions et exemples.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Nom</th> - <th>Opérateur (raccourci)</th> - <th>Signification</th> - </tr> - <tr> - <td><a href="#Assignment">Affectation</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="#Addition_assignment">Affectation après addition</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Affectation après soustraction</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="#Multiplication_assignment">Affectation après multiplication</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="#Division_assignment">Affectation après division</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="#Remainder_assignment">Affectation du reste</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="#Exponentiation">Affectation après exponentiation</a></td> - <td><code>x **= y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">Affectation après décalage à gauche</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Right_shift_assignment">Affectation après décalage à droite</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_AND_assignment">Affectation après ET binaire</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">Affectation après OU exclusif binaire</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_OR_assignment">Affectation après OU binaire</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h2 id="Affectation"><a name="Assignment">Affectation</a></h2> - -<p>L'opérateur d'affectation simple permet d'assigner une valeur à une variable. Le résultat de l'affectation est la valeur affectée. Il est possible de chaîner plusieurs opérateurs d'affectation afin d'assigner une même valeur à plusieurs variables. Voir l'exemple ci-après.</p> - -<h4 id="Syntaxe">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x = y -</pre> - -<h4 id="Exemples">Exemples</h4> - -<pre class="brush: js">// Si on dispose des variables suivantes : -// x = 5; -// y = 10; -// z = 25; - -x = y; // x vaudra désormais 10 -x = y = z; // x, y et z valent désormais tous 25 -</pre> - -<h3 id="Affectation_après_addition"><a name="Addition_assignment">Affectation après addition</a></h3> - -<p>Cet opérateur permet d'ajouter la valeur de l'opérande droit à une variable, le résultat de l'addition étant affecté à cette variable. Les types des deux opérandes déterminent le comportement de l'opérateur. Selon le type, on pourra en effet avoir une addition ou une concaténation. Voir la page sur l'opérateur d'{{jsxref("Opérateurs/Opérateurs_arithmétiques", "addition", "#Addition_(.2B)", 1)}} pour plus d'informations.</p> - -<h4 id="Syntaxe_2">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x += y -<strong>Signification :</strong> x = x + y -</pre> - -<h4 id="Exemples_2">Exemples</h4> - -<pre class="brush: js">// Si on dispose des variables suivantes : -// toto = "toto"; -// truc = 5; -// machin = true; - - -// Nombre + Nombre -> addition -truc += 2; // 7 - -// Booléen + Booléen -> addition -machin += 1; // 2 - -// Booléen + Booléen -> addition -machin += false; // 1 - -// Nombre + String -> concaténation -truc += "toto"; // "5toto" - -// String + Booléen -> concaténation -toto += false; // "totofalse" - -// String + String -> concaténation -toto += "truc"; // "tototruc" -</pre> - -<h3 id="Affectation_après_soustraction"><a name="Subtraction_assignment">Affectation après soustraction</a></h3> - -<p>Cet opérateur soustrait la valeur de l'opérande droit à la variable puis affecte le résultat de cette soustraction à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "soustraction", "#Soustraction_(-)", 1)}} pour plus d'information.</p> - -<h4 id="Syntaxe_3">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x -= y -<strong>Signification :</strong> x = x - y -</pre> - -<h4 id="Exemples_3">Exemples</h4> - -<pre class="brush: js">// Si on a la variable suivante : -// truc = 5; - -truc -= 2; // 3 -truc -= "toto"; // NaN -</pre> - -<h3 id="Affectation_après_multiplication"><a name="Multiplication_assignment">Affectation après multiplication</a></h3> - -<p>Cet opérateur permet de multiplier une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "multiplication", "#Multiplication_(*)", 1)}} pour plus d'informations.</p> - -<h4 id="Syntaxe_4">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x *= y -<strong>Signification :</strong> x = x * y -</pre> - -<h4 id="Exemples_4">Exemples</h4> - -<pre class="brush: js">// Si on a la variable suivante : -// truc = 5; - -truc *= 2; // 10 -truc *= "toto"; // NaN -</pre> - -<h3 id="Affectation_après_division"><a name="Division_assignment">Affectation après division</a></h3> - -<p>Cet opérateur permet de diviser une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "division", "#Division_(.2F)", 1)}} pour plus d'informations.</p> - -<h4 id="Syntaxe_5">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x /= y -<strong>Signification :</strong> x = x / y -</pre> - -<h4 id="Exemples_5">Exemples</h4> - -<pre class="brush: js">// Si on a la variable suivante : -// truc = 5; - -truc /= 2; // 2.5 -truc /= "toto"; // NaN -truc /= 0; // Infinity -</pre> - -<h3 id="Affectation_du_reste"><a name="Remainder_assignment">Affectation du reste</a></h3> - -<p>Cet opérateur permet de divisier une variable par la valeur de l'opérande droit et d'affecter le reste de cette division à la variable. Pour plus d'informations, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "reste", "#Reste_(.25)", 1)}}.</p> - -<h4 id="Syntaxe_6">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x %= y -<strong>Signification :</strong> x = x % y -</pre> - -<h4 id="Exemples_6">Exemples</h4> - -<pre class="brush: js">// Si on a la variable suivante : -// truc = 5; - -truc %= 2; // 1 -truc %= "toto"; // NaN -truc %= 0; // NaN -</pre> - -<h3 id="Affectation_après_exponentiation"><a id="Exponentiation" name="Exponentiation">Affectation après exponentiation</a></h3> - -<p>L'opérateur d'affectation après exponentiation renvoie le résultat de l'élévation du premier opérande à la puissance donnée par le second opérande. Pour plus de détails, voir la page sur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "l'opérateur d'exponentiation", "#Exponentiation_(**)", 1)}} for more details.</p> - -<h4 id="Syntaxe_7">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x **= y -<strong>Signification :</strong> x = x ** y -</pre> - -<h4 id="Exemples_7">Exemples</h4> - -<pre class="brush: js">// Si on a la variable : -// toto = 5 - -toto **= 2 // 25 -toto **= "truc" // NaN</pre> - -<h3 id="Affectation_après_décalage_à_gauche"><a name="Left_shift_assignment">Affectation après décalage à gauche</a></h3> - -<p>Cet opérateur permet de décaler un nombre donné de bits vers la gauche, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à gauche", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29", 1)}} pour plus d'informations.</p> - -<h4 id="Syntaxe_8">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x <<= y -<strong>Signification :</strong> x = x << y -</pre> - -<h4 id="Exemples_8">Exemples</h4> - -<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) -toto <<= 2; // 20 (00000000000000000000000000010100) -</pre> - -<h3 id="Affectation_après_décalage_à_droite"><a name="Right_shift_assignment">Affectation après décalage à droite</a></h3> - -<p>Cet opérateur permet de décaler un nombre donné de bits vers la droite, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite", "##.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29", 1)}} pour plus d'informations.</p> - -<h4 id="Syntaxe_9">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x >>= y -<strong>Signification :</strong> x = x >> y -</pre> - -<h4 id="Exemples_9">Exemples</h4> - -<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) -toto >>= 2; // 1 (00000000000000000000000000000001) - -var toto -5; // (-00000000000000000000000000000101) -toto >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h3 id="Affectation_après_décalage_à_droite_non-signé"><a name="Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></h3> - -<p>Cet opérateur permet de décaler le contenu de la variable d'un nombre de bits donné pour ensuite affecter le résultat à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite non-signé", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29", 1)}} pour plus de détails.</p> - -<h4 id="Syntaxe_10">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x >>>= y -<strong>Signification :</strong> x = x >>> y -</pre> - -<h4 id="Exemples_10">Exemples</h4> - -<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) -toto >>>= 2; // 1 (00000000000000000000000000000001) - -var toto = -5; // (-00000000000000000000000000000101) -toto >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h3 id="Affectation_après_ET_binaire"><a name="Bitwise_AND_assignment">Affectation après ET binaire</a></h3> - -<p>Cet opérateur effectue une opération ET binaire sur les deux opérandes et affecte le résultat de l'opération à la variable (l'opérande gauche). Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire ET", "#&_.28ET_binaire.29", 1)}}.</p> - -<h4 id="Syntaxe_11">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x &= y -<strong>Signification :</strong> x = x & y -</pre> - -<h4 id="Exemple">Exemple</h4> - -<pre class="brush: js">var truc = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -truc &= 2; // 0 -</pre> - -<h3 id="Affectation_après_OU_exclusif_(XOR)_binaire"><a name="Bitwise_XOR_assignment">Affectation après OU exclusif (<em>XOR</em>) binaire</a></h3> - -<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue une opération binaire avec un OU exclusif et affecte le résultat à la variable. Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire OU exclusif", "#.5E_.28XOR_binaire.29", 1)}}.</p> - -<h4 id="Syntaxe_12">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x ^= y -<strong>Signification :</strong> x = x ^ y -</pre> - -<h4 id="Exemple_2">Exemple</h4> - -<pre class="brush: js">var toto = 5; -toto ^= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h3 id="Affectation_après_OU_binaire"><a name="Bitwise_OR_assignment">Affectation après OU binaire</a></h3> - -<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue un OU logique binaire entre ces deux variables et affecte le résultat de l'opération à la variable. Pour plus de détails sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "OU binaire", "#|_.28OU_binaire.29", 1)}}.</p> - -<h4 id="Syntaxe_13">Syntaxe</h4> - -<pre class="syntaxbox"><strong>Opérateur :</strong> x |= y -<strong>Signification :</strong> x = x | y -</pre> - -<h4 id="Exemple_3">Exemple</h4> - -<pre class="brush: js">var toto = 5; -toto |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Exemples_11">Exemples</h2> - -<h3 id="Opérande_gauche_utilisé_avec_un_autre_opérateur_d'affectation">Opérande gauche utilisé avec un autre opérateur d'affectation</h3> - -<p>Dans certains cas, l'opérateur d'affectation (par exemple<code> x += y</code>) n'est pas identique à l'expression développée correspondante (respectivement <code>x = x + y</code>). Lorsque l'opérande gauche contient lui-même un opérateur d'affectation, l'opérande gauche n'est évalué qu'une fois. Ainsi :</p> - -<pre class="brush: js">a[i++] += 5 // i est évalué une fois -a[i++] = a[i++] + 5 // i est évalué deux fois -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.operators.assignment")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">Les opérateurs arithmétiques</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html deleted file mode 100644 index 5b7ec3375f..0000000000 --- a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Opérateurs de chaînes -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_chaînes -translation_of: Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition -translation_of_original: Web/JavaScript/Reference/Operators/String_Operators ---- -<p> </p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> -<p>En complément des opérateurs de comparaison, qui peuvent être utilisés sur des valeurs chaînes de caractères, l'opérateur de concaténation (<code>+</code>) permet d'assembler deux chaînes, en renvoyant une nouvelle chaîne étant l'union des deux opérandes chaînes. Par exemple, <code>"ma " + "chaîne"</code> renvoie la chaîne <code>"ma chaîne"</code>.</p> -<p>L'opérateur raccourci d'assignation <code>+=</code> peut également être utilisé pour concaténer des chaînes. Par exemple, si la variable <code>ma_chaine</code> a la valeur <code>"alpha"</code>, l'expression <code>ma_chaine += "bet"</code> sera évaluée à <code>"alphabet"</code> et assignera cette valeur à la variable <code>ma_chaine</code>.</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <td class="header" colspan="2">Opérateur</td> - </tr> - <tr> - <td>Implémentation :</td> - <td>JavaScript 1.0</td> - </tr> - <tr> - <td>Version ECMA :</td> - <td>ECMA-262</td> - </tr> - </tbody> -</table> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Operators/String_Operators", "es": "es/Referencia_de_JavaScript_1.5/Operadores/String", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Operatory/Operatory_dzia\u0142aj\u0105ce_na_ci\u0105gach_znak\u00f3w" } ) }}</p> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html deleted file mode 100644 index 50d1221a40..0000000000 --- a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Opérateurs de comparaison -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript possède des opérateurs de comparaisons stricts et des opérateurs de comparaisons qui effectuent des conversions. Une comparaison strict (ex. : <code>===</code>) ne sera vraie que si les deux opérandes sont du même type. La comparaison d'égalité faible (<code>==</code>) convertira les deux opérandes en un même type avant d'effectuer la comparaison. Pour les comparaisons relationnelles (ex. : <code><=</code>), les opérandes sont tout d'abord converties en valeurs, puis en valeurs du même type, enfin la comparaison est effectuée.</p> - -<p>Les chaînes de caractères sont comparées en fonction de l'ordre lexicographique, avec des valeurs Unicode.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Les règles de comparaisons pour <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types primitifs</a> sont les suivantes :</p> - -<ul> - <li>Deux chaînes de caractères sont strictement égales lorsqu'elles ont la même séquence de caractères, la même longueur et les mêmes caractères aux mêmes positions.</li> - <li>Deux nombres sont strictement égaux lorsqu'ils ont la même valeur. {{jsxref("Objets_globaux/NaN","NaN")}} n'est égal à rien, y compris lui-même. Le zéro positif et le zéro négatif sont considérés égaux.</li> - <li>Deux booléens sont strictement égaux s'ils valent tous les deux <code>true</code> ou tous les deux <code>false</code>.</li> - <li>Deux objets distincts ne sont jamais égaux l'un à l'autre (pour l'égalité faible et stricte).</li> - <li>Deux objets sont égaux si les deux opérandes sont des références au même objet.</li> - <li>Les types nul et indéfini sont strictement égaux à eux-mêmes et sont faiblement égaux l'un à autre.</li> -</ul> - -<h2 id="Les_opérateurs_dégalité">Les opérateurs d'égalité</h2> - -<h3 id="Égalité_simple"><a>Égalité simple (==)</a></h3> - -<p>L'opérateur d'égalité simple convertit les deux opérandes s'<strong>ils ne sont pas du même type</strong>, ensuite la comparaison stricte est appliquée. Si <strong>les deux opérandes sont des objets</strong>, le moteur JavaScript comparera les références internes pour voir si elles réfèrent au même objet en mémoire.</p> - -<h4 id="Syntaxe">Syntaxe</h4> - -<pre class="syntaxbox">x == y -</pre> - -<h4 id="Exemples">Exemples</h4> - -<pre class="brush: js"> 1 == 1; // true -"1" == 1; // true - 1 == '1'; // true - 0 == false; // true - 0 == null; // false - 0 == undefined // false -null == undefined // true - -var obj1 = { "clé": "valeur"}; -var obj2 = { "clé": "valeur"}; -obj1 == obj2 // false -</pre> - -<h3 id="Inégalité_simple_!"><a>Inégalité simple (!=)</a></h3> - -<p>L'opérateur d'inégalité simple renvoie <code>true</code> si les deux opérandes ne sont pas égaux. Si les deux opérandes <strong>ne sont pas du même type</strong>, une conversion sera effectuée vers un type adéquat. <strong>Si les deux opérandes sont des objets,</strong> le moteur JavaScript comparera les références internes pour voir si elles réfèrent à des objets différents en mémoire.</p> - -<h4 id="Syntaxe_2">Syntaxe</h4> - -<pre class="syntaxbox">x != y</pre> - -<h4 id="Exemples_2">Exemples</h4> - -<pre class="brush: js">1 != 2; // true -1 != "1"; // false -1 != '1'; // false -1 != true; // false -0 != false; // false -</pre> - -<h3 id="Égalité_stricte"><a>Égalité stricte (===)</a></h3> - -<p>L'opérateur d'égalité stricte renvoie <code>true</code> si les opérandes sont strictement égaux (voir ci-avant), <strong>aucune conversion de type n'est effectuée</strong>.</p> - -<h4 id="Syntaxe_3">Syntaxe</h4> - -<pre class="syntaxbox">x === y</pre> - -<h4 id="Exemples_3">Exemples</h4> - -<pre class="brush: js ">3 === 3 // true -3 === '3' // false - -var objet1 = {'clé': 'valeur'}; -var objet2 = {'clé': 'valeur'}; -objet1 === objet2; // false -</pre> - -<h3 id="Inégalité_stricte_!"><a>Inégalité stricte (!==)</a></h3> - -<p>L'opérateur d'inégalité stricte renvoie <code>true</code> si les opérandes sont de types différents ou ne sont pas égaux.</p> - -<h4 id="Syntaxe_4">Syntaxe</h4> - -<pre class="syntaxbox">x !== y</pre> - -<h4 id="Exemples_4">Exemples</h4> - -<pre class="brush: js">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="Opérateurs_relationnels">Opérateurs relationnels</h2> - -<div class="note"> -<p><strong>Note :</strong> Chacun de ces opérateurs invoquera la fonction <code>valueOf()</code> des opérandes qui sont des objets avant d'effectuer la comparaison.</p> -</div> - -<h3 id="Supérieur_strict_>"><a>Supérieur strict (>)</a></h3> - -<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est strictement supérieur à l'opérande droit.</p> - -<h4 id="Syntaxe_5">Syntaxe</h4> - -<pre class="syntaxbox">x > y</pre> - -<h4 id="Exemples_5">Exemples</h4> - -<pre class="brush: js">4 > 3; // true -</pre> - -<h3 id="Supérieur_ou_égal_>"><a>Supérieur ou égal (>=)</a></h3> - -<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit</p> - -<h4 id="Syntaxe_6">Syntaxe</h4> - -<pre class="syntaxbox"> x >= y</pre> - -<h4 id="Exemples_6">Exemples</h4> - -<pre class="brush: js">4 >= 3; // true -3 >= 3; // true -</pre> - -<h3 id="Inférieur_strict_<"><a>Inférieur strict (<)</a></h3> - -<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est strictement inférieur à l'opérande droit</p> - -<h4 id="Syntaxe_7">Syntaxe</h4> - -<pre class="syntaxbox"> x < y</pre> - -<h4 id="Exemples_7">Exemples</h4> - -<pre class="brush: js">3 < 4; // true -</pre> - -<h3 id="Inférieur_ou_égal_<"><a>Inférieur ou égal (<=)</a></h3> - -<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit</p> - -<h4 id="Syntaxe_8">Syntaxe</h4> - -<pre class="syntaxbox"> x <= y</pre> - -<h4 id="Exemples_8">Exemples</h4> - -<pre class="brush: js">3 <= 4; // true -</pre> - -<h2 id="Utiliser_les_opérateurs_dégalité">Utiliser les opérateurs d'égalité</h2> - -<p>Les opérateurs d'égalité/inégalité faible (<code>==</code> et <code>!=</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">l'algorithme de comparaison d'égalité abstraite</a> afin de comparer les deux opérandes. Si les opérandes sont de types primitifs différents, le moteur tentera de les convertir en un même type avant d'effectuer la comparaison. Ainsi, dans l'expression <code>5 == '5'</code>, la chaîne de droite est convertie en un nombre avant que la comparaison soit faite.</p> - -<p>Les opérateurs d'égalité/inégalité stricte (<code>===</code> et <code>!==</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">l'algorithme de comparaison d'égalité stricte</a>. Si les opérandes sont de types différents, le résultat sera toujours <code>false</code>, on aura donc <code>5 !== '5'</code>.</p> - -<p>Selon qu'on souhaite comparer des opérandes qui sont censés avoir le même type ou non, on utilisera l'un ou l'autre type d'opérateur.</p> - -<p>Si un opérande doit être comparé à un autre type, le moteur effectuera une conversion de la façon suivante :</p> - -<ul> - <li>Lorsqu'une comparaison est opérée entre une chaîne de caractères et un nombre, Javascript tente de convertir la chaine en une valeur numérique. Une valeur mathématique est obtenue à partir de la chaîne littérale numérique, puis celle-ci est arrondie à une valeur de type Nombre.</li> - <li>Si l'un des opérandes est de type booléen, <code>true</code> sera converti en 1 et <code>false</code> en +0.</li> - <li>Si on compare un objet avec un nombre ou une chaîne, le moteur JavaScript tentera de renvoyer la valeur par défaut de l'objet. Les opérateurs opèrent une conversion grâce aux méthodes <code>valueOf</code> (pour obtenir un nombre) et <code>toString</code> (pour obtenir une chaîne de caractères). Si cela ne fonctionne pas, une exception sera levée.</li> - <li>Un objet sera converti en un type primitif autre uniquement si l'autre opérande est un type primitif (autre qu'objet). Si les deux opérandes sont des objets, ils seront comparés comme deux objets (voir ci-avant) et l'égalité ne sera vérifiée que si les opérandes font référence au même objet en mémoire</li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Voir également la page sur <a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">les différents tests d'égalité et quand les utiliser</a>.</p> -</div> - -<div class="note"><strong>Note :</strong> Les objets String sont du type objet et ne sont pas de simples chaînes de caractères ! Cela peut parfois avoir des conséquences surprenantes :</div> - -<pre class="brush:js">// true car les deux opérandes sont du type primitif chaîne de caractères -'toto' === 'toto' - -var a = new String('toto'); -var b = new String('toto'); - -// false car a et b sont du type objet mais font référence à deux objets distincts -a == b - -// false car a et b sont du type objet mais font référence à deux objets distincts -a === b - -// true car a et 'toto' sont de type différents et lorsque a est -// converti, la fonction de conversion renvoie bien la chaîne 'toto' -a == 'toto' </pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Ajoute les opérateurs <code>===</code> et <code>!==</code>. Implémentés avec JavaScript 1.3</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.8">opérateurs relationnels</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9">opérateurs d'égalité</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">opérateurs relationnels</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">opérateurs d'égalité</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-relational-operators">opérateurs relationnels</a>, <a href="https://tc39.github.io/ecma262/#sec-equality-operators">opérateurs d'égalité</a></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">L'égalité en JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">Les différents tests d'égalité en JavaScript</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html deleted file mode 100644 index 6b82320d69..0000000000 --- a/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: Opérateurs logiques -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Les opérateurs logiques sont typiquement utilisés avec des valeurs booléennes (logiques) ; lorsque c'est le cas, ils renvoient une valeur booléenne également. Cependant, les opérateurs <code>&&</code> et <code>||</code> renvoient en réalité la valeur d'un des opérandes spécifiés. Si ces opérateurs sont utilisés avec des valeurs non booléennes, ils peuvent donc également renvoyer une valeur non booléenne.</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</p> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Description">Description</h2> - -<p>Les opérateurs logiques sont décrits dans le tableau suivant (les expressions indiquées comme opérandes peuvent être de n'importe quel type et pas nécessairement être booléennes au sens strict) :</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Opérateur</th> - <th>Usage</th> - <th>Description</th> - </tr> - <tr> - <td>ET logique (<code>&&</code>)</td> - <td><code><em>expr1</em> &&<em>expr2</em> </code></td> - <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>false</code>, sinon renvoie <code>expr2</code>.</td> - </tr> - <tr> - <td>OU logique (<code>||</code>)</td> - <td><code><em>expr1</em> ||<em>expr2</em> </code></td> - <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>true</code>, sinon renvoie <code>expr2</code>.</td> - </tr> - <tr> - <td>NON logique (<code>!</code>)</td> - <td><code>!<em>expr</em> </code></td> - <td>Renvoie <code>false</code> si son opérande unique peut être converti en <code>true</code>, sinon il renvoie <code>true</code>.</td> - </tr> - </tbody> -</table> - -<p>Si une valeur peut être convertie en <code>true</code>, on dit en anglais qu'elle est <em>truthy</em>. Pour <code>false</code> on dit qu'elle est <em>falsy</em>.</p> - -<p>Parmi les expressions qui peuvent être converties en <code>false</code>, citons celles qui seront évaluées à :</p> - -<ul> - <li><code>null</code>,</li> - <li><code>NaN</code>,</li> - <li><code>0</code>,</li> - <li>la chaîne vide (<code>""</code> ou <code>''</code> ou <code>``</code>),</li> - <li><code>undefined</code>.</li> -</ul> - -<p>Même si les opérateurs <code>&&</code> et <code>||</code> peuvent être utilisés avec des opérandes qui ne sont pas des valeurs booléennes, ils peuvent toujours être considérés comme des opérateurs booléens puisque leurs valeurs de retour peuvent toujours être converties en valeurs booléennes.</p> - -<h3 id="Évaluation_court-circuit">Évaluation court-circuit</h3> - -<p>Comme les expressions logiques sont évaluées de gauche à droite, leur évaluation sera éventuellement « court-circuitée » à l'aide des règles suivantes :</p> - -<ul> - <li>l'évaluation de <code>false &&<em> n'importe quoi</em> </code> est court-circuitée en <code>false</code>.</li> - <li>l'évaluation de <code>true ||<em> n'importe quoi</em> </code> est court-circuitée en <code>true</code>.</li> -</ul> - -<p>Les règles de la logique garantissent que ces évaluations seront toujours correctes. Notons que la partie<em>n'importe quoi</em> des expressions mentionnées ci-dessus ne sera jamais évaluée, et que tout effet de bord éventuel induit par cette évaluation ne se produira pas.</p> - -<p>Ainsi, les deux fonctions suivantes sont équivalentes :</p> - -<pre>function courtCircuit() { - // OU logique - faireQuelqueChose() || faireAutreChose(); - - faireQuelqueChose() && faireAutreChose(); -} - -function évaluationÉquivalente() { - var orFlag = faireQuelqueChose(); - if (!orFlag) { - faireAutreChose(); - } - - var andFlag = faireQuelqueChose(); - if (andFlag) { - faireAutreChose(); - } -} -</pre> - -<h3 id="Précédence_des_opérateurs">Précédence des opérateurs</h3> - -<p>Les expressions suivantes ne sont pas équivalentes en raison de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs">la précédence des opérateurs</a>. Cela permet de noter que l'opérande droit ne doit être qu'une seule expression (si nécessaire entourée de parenthèses).</p> - -<pre>true || false && false // renvoie true car && est appliqué en premier -(true || false) && false // renvoie false car || est appliqué en premier grâce aux parenthèses</pre> - -<h3 id="ET_logique"><a name="Logical_AND">ET logique (<code>&&</code>)</a></h3> - -<p>Le code qui suit illustre comment utiliser l'opérateur <code>&&</code> (ET logique).</p> - -<pre>a1 = true && true // t && t renvoie true -a2 = true && false // t && f renvoie false -a3 = false && true // f && t renvoie false -a4 = false && (3 == 4) // f && f renvoie false -a5 = "Yip" && "Yop" // t && t renvoie "Yop" -a6 = false && "Yop" // f && t renvoie false -a7 = "Yop" && false // t && f renvoie false -a8 = "" && true // f && f renvoie "" -a9 = false && "" // f && f renvoie false -</pre> - -<h3 id="OU_logique"><a name="Logical_OR">OU logique (<code>||</code>)</a></h3> - -<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>||</code> (OU logique).</p> - -<pre>o1 = true || true // t || t renvoie true -o2 = false || true // f || t renvoie true -o3 = true || false // t || f renvoie true -o4 = false || (3 == 4) // f || f renvoie false -o5 = "Yip" || "Yop" // t || t renvoie "Yip" -o6 = false || "Yip" // f || t renvoie "Yip" -o7 = "Yip" || false // t || f renvoie "Yip" -o8 = "" || false // f || f renvoie false -o9 = false || "" // f || f renvoie "" -010 = false|| monObjet // f || objet renvoie monObjet -</pre> - -<h3 id="NON_logique!"><a name="Logical_NOT">NON logique(<code>!</code>)</a></h3> - -<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>!</code> (NON logique).</p> - -<pre>n1 = !true // !t renvoie false -n2 = !false // !f renvoie true -n3 = !"" // !f renvoie true -n3 = !"Yop" // !t renvoie false -</pre> - -<h4 id="Utilisation_de_la_double_négation">Utilisation de la double négation</h4> - -<p>Il est possible d'utiliser deux fois le NON logique à la suite afin de forcer la conversion d'une valeur en un booléen. On obtiendra ainsi le booléen <code>true</code> si la valeur est équivalente à vrai et <code>false</code> si la valeur est équivalente à faux. Cette opération de conversion peut également être réalisée grâce à la fonction {{jsxref("Boolean")}}.</p> - -<pre class="brush: js">n1 = !!true; // une valeur équivalente à true renvoie true -n2 = !!{}; // un objet, même vide est toujours équivalent à true -n3 = !!(new Boolean(false)); // même lorsque leur constructeur est Boolean ! -n4 = !!false; // une valeur équivalente à false renvoie false -n5 = !!""; // idem -n6 = !!Boolean(false); // ici Boolean n'est pas utilisé comme constructeur - // et la valeur produite est bien équivalente à false</pre> - -<h3 id="Règles_de_conversions">Règles de conversions</h3> - -<h4 id="Convertir_un_ET_logique_avec_des_OU_logiques">Convertir un ET logique avec des OU logiques</h4> - -<p>L'opération suivante</p> - -<pre>condition1 && condition2</pre> - -<p>sera toujours égale à :</p> - -<pre>!(!condition1 || !condition2)</pre> - -<h4 id="Convertir_un_OU_logique_avec_des_ET_logiques">Convertir un OU logique avec des ET logiques</h4> - -<p>L'opération suivante :</p> - -<pre>condition1 || condition2</pre> - -<p>sera toujours égale à :</p> - -<pre>!(!condition1 && !condition2)</pre> - -<h4 id="Convertir_des_NON_logiques_successifs">Convertir des NON logiques successifs</h4> - -<p>Si on a l'opération suivante avec un booléen :</p> - -<pre>!!condition -</pre> - -<p>elle sera toujours équivalente à</p> - -<pre>condition</pre> - -<h3 id="Retirer_les_parenthèses_imbriquées">Retirer les parenthèses imbriquées</h3> - -<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer certaines parenthèses d'une expression complexe grâce à quelques règles.</p> - -<h4 id="Retirer_les_parenthèses_dun_ET_imbriqué">Retirer les parenthèses d'un ET imbriqué</h4> - -<p>Cette opération :</p> - -<pre>condition1 || (condition2 && condition3)</pre> - -<p>sera toujours équivalente à :</p> - -<pre>condition1 || condition2 && condition3</pre> - -<h4 id="Retirer_les_parenthèses_dun_OU_imbriqué">Retirer les parenthèses d'un OU imbriqué</h4> - -<p>Cette opération :</p> - -<pre>condition1 && (condition2 || condition3)</pre> - -<p>sera toujours équivalente à :</p> - -<pre>!(!condition1 || !condition2 && !condition3)</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.11">opérateurs logiques binaires</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">opérateurs logiques binaires</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://tc39.github.io/ecma262/#sec-binary-logical-operators">opérateurs logiques binaires</a></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> - -<p>{{Compat("javascript.operators.logical")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Les opérateurs binaires</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_littéraux_booléens">Le type primitif booléen</a></li> - <li>Le constructeur objet {{jsxref("Boolean")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/instructions/async_function/index.html b/files/fr/web/javascript/reference/statements/async_function/index.html index 45c7f441b8..45c7f441b8 100644 --- a/files/fr/web/javascript/reference/instructions/async_function/index.html +++ b/files/fr/web/javascript/reference/statements/async_function/index.html diff --git a/files/fr/web/javascript/reference/instructions/bloc/index.html b/files/fr/web/javascript/reference/statements/block/index.html index 5ea869f037..5ea869f037 100644 --- a/files/fr/web/javascript/reference/instructions/bloc/index.html +++ b/files/fr/web/javascript/reference/statements/block/index.html diff --git a/files/fr/web/javascript/reference/instructions/break/index.html b/files/fr/web/javascript/reference/statements/break/index.html index bc3a1c12df..bc3a1c12df 100644 --- a/files/fr/web/javascript/reference/instructions/break/index.html +++ b/files/fr/web/javascript/reference/statements/break/index.html diff --git a/files/fr/web/javascript/reference/instructions/class/index.html b/files/fr/web/javascript/reference/statements/class/index.html index 3fbbc7cb28..3fbbc7cb28 100644 --- a/files/fr/web/javascript/reference/instructions/class/index.html +++ b/files/fr/web/javascript/reference/statements/class/index.html diff --git a/files/fr/web/javascript/reference/instructions/const/index.html b/files/fr/web/javascript/reference/statements/const/index.html index 1431986d29..1431986d29 100644 --- a/files/fr/web/javascript/reference/instructions/const/index.html +++ b/files/fr/web/javascript/reference/statements/const/index.html diff --git a/files/fr/web/javascript/reference/instructions/continue/index.html b/files/fr/web/javascript/reference/statements/continue/index.html index db9b22e973..db9b22e973 100644 --- a/files/fr/web/javascript/reference/instructions/continue/index.html +++ b/files/fr/web/javascript/reference/statements/continue/index.html diff --git a/files/fr/web/javascript/reference/instructions/debugger/index.html b/files/fr/web/javascript/reference/statements/debugger/index.html index bd8f9f0689..bd8f9f0689 100644 --- a/files/fr/web/javascript/reference/instructions/debugger/index.html +++ b/files/fr/web/javascript/reference/statements/debugger/index.html diff --git a/files/fr/web/javascript/reference/instructions/do...while/index.html b/files/fr/web/javascript/reference/statements/do...while/index.html index 444c82245d..444c82245d 100644 --- a/files/fr/web/javascript/reference/instructions/do...while/index.html +++ b/files/fr/web/javascript/reference/statements/do...while/index.html diff --git a/files/fr/web/javascript/reference/instructions/vide/index.html b/files/fr/web/javascript/reference/statements/empty/index.html index de3761892a..de3761892a 100644 --- a/files/fr/web/javascript/reference/instructions/vide/index.html +++ b/files/fr/web/javascript/reference/statements/empty/index.html diff --git a/files/fr/web/javascript/reference/instructions/export/index.html b/files/fr/web/javascript/reference/statements/export/index.html index bb310cb9be..bb310cb9be 100644 --- a/files/fr/web/javascript/reference/instructions/export/index.html +++ b/files/fr/web/javascript/reference/statements/export/index.html diff --git a/files/fr/web/javascript/reference/instructions/for-await...of/index.html b/files/fr/web/javascript/reference/statements/for-await...of/index.html index b30668c61c..b30668c61c 100644 --- a/files/fr/web/javascript/reference/instructions/for-await...of/index.html +++ b/files/fr/web/javascript/reference/statements/for-await...of/index.html diff --git a/files/fr/web/javascript/reference/instructions/for...in/index.html b/files/fr/web/javascript/reference/statements/for...in/index.html index a9bf4ad8b0..a9bf4ad8b0 100644 --- a/files/fr/web/javascript/reference/instructions/for...in/index.html +++ b/files/fr/web/javascript/reference/statements/for...in/index.html diff --git a/files/fr/web/javascript/reference/instructions/for...of/index.html b/files/fr/web/javascript/reference/statements/for...of/index.html index 0fc7deb1f6..0fc7deb1f6 100644 --- a/files/fr/web/javascript/reference/instructions/for...of/index.html +++ b/files/fr/web/javascript/reference/statements/for...of/index.html diff --git a/files/fr/web/javascript/reference/instructions/for/index.html b/files/fr/web/javascript/reference/statements/for/index.html index ac60a49710..ac60a49710 100644 --- a/files/fr/web/javascript/reference/instructions/for/index.html +++ b/files/fr/web/javascript/reference/statements/for/index.html diff --git a/files/fr/web/javascript/reference/instructions/function/index.html b/files/fr/web/javascript/reference/statements/function/index.html index d4faad9451..d4faad9451 100644 --- a/files/fr/web/javascript/reference/instructions/function/index.html +++ b/files/fr/web/javascript/reference/statements/function/index.html diff --git a/files/fr/web/javascript/reference/instructions/function_star_/index.html b/files/fr/web/javascript/reference/statements/function_star_/index.html index 5a55641ed3..5a55641ed3 100644 --- a/files/fr/web/javascript/reference/instructions/function_star_/index.html +++ b/files/fr/web/javascript/reference/statements/function_star_/index.html diff --git a/files/fr/web/javascript/reference/instructions/if...else/index.html b/files/fr/web/javascript/reference/statements/if...else/index.html index 1b2cbf6497..1b2cbf6497 100644 --- a/files/fr/web/javascript/reference/instructions/if...else/index.html +++ b/files/fr/web/javascript/reference/statements/if...else/index.html diff --git a/files/fr/web/javascript/reference/instructions/import.meta/index.html b/files/fr/web/javascript/reference/statements/import.meta/index.html index 4acb0c1029..4acb0c1029 100644 --- a/files/fr/web/javascript/reference/instructions/import.meta/index.html +++ b/files/fr/web/javascript/reference/statements/import.meta/index.html diff --git a/files/fr/web/javascript/reference/instructions/import/index.html b/files/fr/web/javascript/reference/statements/import/index.html index 37c904eb10..37c904eb10 100644 --- a/files/fr/web/javascript/reference/instructions/import/index.html +++ b/files/fr/web/javascript/reference/statements/import/index.html diff --git a/files/fr/web/javascript/reference/instructions/index.html b/files/fr/web/javascript/reference/statements/index.html index ad89ea7371..ad89ea7371 100644 --- a/files/fr/web/javascript/reference/instructions/index.html +++ b/files/fr/web/javascript/reference/statements/index.html diff --git a/files/fr/web/javascript/reference/instructions/label/index.html b/files/fr/web/javascript/reference/statements/label/index.html index 2b3fb86d46..2b3fb86d46 100644 --- a/files/fr/web/javascript/reference/instructions/label/index.html +++ b/files/fr/web/javascript/reference/statements/label/index.html diff --git a/files/fr/web/javascript/reference/instructions/let/index.html b/files/fr/web/javascript/reference/statements/let/index.html index be39c8ecae..be39c8ecae 100644 --- a/files/fr/web/javascript/reference/instructions/let/index.html +++ b/files/fr/web/javascript/reference/statements/let/index.html diff --git a/files/fr/web/javascript/reference/instructions/return/index.html b/files/fr/web/javascript/reference/statements/return/index.html index 1972130104..1972130104 100644 --- a/files/fr/web/javascript/reference/instructions/return/index.html +++ b/files/fr/web/javascript/reference/statements/return/index.html diff --git a/files/fr/web/javascript/reference/instructions/switch/index.html b/files/fr/web/javascript/reference/statements/switch/index.html index d3fcc130fa..d3fcc130fa 100644 --- a/files/fr/web/javascript/reference/instructions/switch/index.html +++ b/files/fr/web/javascript/reference/statements/switch/index.html diff --git a/files/fr/web/javascript/reference/instructions/throw/index.html b/files/fr/web/javascript/reference/statements/throw/index.html index 1465d2f460..1465d2f460 100644 --- a/files/fr/web/javascript/reference/instructions/throw/index.html +++ b/files/fr/web/javascript/reference/statements/throw/index.html diff --git a/files/fr/web/javascript/reference/instructions/try...catch/index.html b/files/fr/web/javascript/reference/statements/try...catch/index.html index ae1d13b6d5..ae1d13b6d5 100644 --- a/files/fr/web/javascript/reference/instructions/try...catch/index.html +++ b/files/fr/web/javascript/reference/statements/try...catch/index.html diff --git a/files/fr/web/javascript/reference/instructions/var/index.html b/files/fr/web/javascript/reference/statements/var/index.html index 31814763b0..31814763b0 100644 --- a/files/fr/web/javascript/reference/instructions/var/index.html +++ b/files/fr/web/javascript/reference/statements/var/index.html diff --git a/files/fr/web/javascript/reference/instructions/while/index.html b/files/fr/web/javascript/reference/statements/while/index.html index b04851c347..b04851c347 100644 --- a/files/fr/web/javascript/reference/instructions/while/index.html +++ b/files/fr/web/javascript/reference/statements/while/index.html diff --git a/files/fr/web/javascript/reference/instructions/with/index.html b/files/fr/web/javascript/reference/statements/with/index.html index 8eec25496e..8eec25496e 100644 --- a/files/fr/web/javascript/reference/instructions/with/index.html +++ b/files/fr/web/javascript/reference/statements/with/index.html diff --git a/files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html b/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html index 029cf4b22c..029cf4b22c 100644 --- a/files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html +++ b/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html diff --git a/files/fr/web/javascript/reference/littéraux_gabarits/index.html b/files/fr/web/javascript/reference/template_literals/index.html index cea966a908..cea966a908 100644 --- a/files/fr/web/javascript/reference/littéraux_gabarits/index.html +++ b/files/fr/web/javascript/reference/template_literals/index.html diff --git a/files/fr/web/javascript/reference/virgules_finales/index.html b/files/fr/web/javascript/reference/trailing_commas/index.html index a9cc88ac47..a9cc88ac47 100644 --- a/files/fr/web/javascript/reference/virgules_finales/index.html +++ b/files/fr/web/javascript/reference/trailing_commas/index.html diff --git a/files/fr/web/javascript/performance_les_dangers_liés_à_la_modification_de_prototype/index.html b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html index 288241297c..288241297c 100644 --- a/files/fr/web/javascript/performance_les_dangers_liés_à_la_modification_de_prototype/index.html +++ b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html diff --git a/files/fr/web/javascript/tableaux_typés/index.html b/files/fr/web/javascript/typed_arrays/index.html index 7ecfe6e9a8..7ecfe6e9a8 100644 --- a/files/fr/web/javascript/tableaux_typés/index.html +++ b/files/fr/web/javascript/typed_arrays/index.html diff --git a/files/fr/web/mathml/attribute/valeurs/index.html b/files/fr/web/mathml/attribute/values/index.html index 4fc2296665..4fc2296665 100644 --- a/files/fr/web/mathml/attribute/valeurs/index.html +++ b/files/fr/web/mathml/attribute/values/index.html diff --git a/files/fr/web/mathml/exemples/dériver_la_formule_quadratique/index.html b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html index 9a7f5ac867..9a7f5ac867 100644 --- a/files/fr/web/mathml/exemples/dériver_la_formule_quadratique/index.html +++ b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html diff --git a/files/fr/web/mathml/exemples/index.html b/files/fr/web/mathml/examples/index.html index c3614e43b5..c3614e43b5 100644 --- a/files/fr/web/mathml/exemples/index.html +++ b/files/fr/web/mathml/examples/index.html diff --git a/files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html b/files/fr/web/mathml/examples/mathml_pythagorean_theorem/index.html index d64afcc40b..d64afcc40b 100644 --- a/files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html +++ b/files/fr/web/mathml/examples/mathml_pythagorean_theorem/index.html diff --git a/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.html index 6a1b7f19f1..6a1b7f19f1 100644 --- a/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html +++ b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.html diff --git a/files/fr/web/media/formats/types_des_images/index.html b/files/fr/web/media/formats/image_types/index.html index 5211d74fb9..5211d74fb9 100644 --- a/files/fr/web/media/formats/types_des_images/index.html +++ b/files/fr/web/media/formats/image_types/index.html diff --git a/files/fr/web/media/formats/questions_sur_le_soutien/index.html b/files/fr/web/media/formats/support_issues/index.html index e64c50d6a0..e64c50d6a0 100644 --- a/files/fr/web/media/formats/questions_sur_le_soutien/index.html +++ b/files/fr/web/media/formats/support_issues/index.html diff --git a/files/fr/web/performance/budgets_de_performance/index.html b/files/fr/web/performance/performance_budgets/index.html index 6a7b0d47b4..6a7b0d47b4 100644 --- a/files/fr/web/performance/budgets_de_performance/index.html +++ b/files/fr/web/performance/performance_budgets/index.html diff --git a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html index 65f077b50d..65f077b50d 100644 --- a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html +++ b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html diff --git a/files/fr/web/progressive_web_apps/identifiable/index.html b/files/fr/web/progressive_web_apps/identifiable/index.html deleted file mode 100644 index 3bea56aaa7..0000000000 --- a/files/fr/web/progressive_web_apps/identifiable/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Identifiable -slug: Web/Progressive_web_apps/Identifiable -tags: - - Applications - - Identifiable - - Manifeste - - Manifeste Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Discoverable ---- -<div class="column-container summary"> -<div class="column-11">Dès lors que vous publiez une application web, vous voulez que le monde le sache. Les moteurs de recherche le font, mais souvent on souhaite plus de contrôle sur comment l'application sera affichée dans les résultats de la recherche. Le nouveau manifeste du W3C pour les applications web peut aider à cela, ainsi que pour d'autres fonctionnalités.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="height: 43px; width: 34px;"></div> -</div> - -<p>Objectifs éventuels des applications web:</p> - -<ul> - <li>Être mieux représenté dans les moteurs de recherche</li> - <li>Être facile à exposer, dans un catalogue ou un classement</li> - <li>Avoir des méta-données (<em>metadata)</em> utilisables par le navigateur pour leur donner des capacités spéciales</li> -</ul> - -<h2 id="Guides">Guides</h2> - -<p>Aucun document actuellement; les contributions sont les bienvenues.</p> - -<h2 id="Technologies">Technologies</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Technologie</th> - <th scope="col">Description</th> - <th scope="col">Résumé du support</th> - <th scope="col">Dernière spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/Manifest">Manifeste des applications web</a></td> - <td>Définit les fonctions d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, <span id="result_box" lang="fr"><span>pour une utilisation</span> <span>dans un contexte comme l'affichage sur </span><span>une liste</span> <span>d'applications ou</span> sur l'<span>écran d'accueil</span> <span>de l'appareil</span></span>.</td> - <td>Expérimental, supporté dans Chrome, support limité dans Firefox (<a href="/fr/docs/Web/Manifest#Browser_compatibility">plus de détails</a>)</td> - <td>{{SpecName('Manifest')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Outils">Outils</h2> - -<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<dl> - <dt><a href="http://ogp.me/">Open Graph</a></dt> - <dd>Un standard, <em>defacto,</em> fournissant un format pour spécifier des méta-données similaires dans la balise HTML <code><head></code> en utilisant les <em>meta tags</em>. Supporté par Facebook et d'autres domaines.</dd> -</dl> diff --git a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html b/files/fr/web/progressive_web_apps/independante_du_reseau/index.html deleted file mode 100644 index 52bcf0a121..0000000000 --- a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Indépendante du réseau -slug: Web/Progressive_web_apps/Independante_du_reseau -tags: - - App shell - - Applications - - IndexedDB - - Indépendante du réseau - - Service Workers - - hors-ligne - - localStorage -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Network_independent ---- -<div class="column-container summary"> -<div class="column-11">Les applications web modernes peuvent fonctionner quand le réseau n'est pas fiable, ou même inexistant. Terminé les pages blanches d'erreur de connexion ou les dinosaures qui courent dans le désert. Une séparation claire entre l'affichage (UI) et le contenu ainsi qu'un cache hors-ligne et des services workers, vous permettent de stocker les données de l'application et ses dépendances pour les futures utilisations.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="height: 43px; width: 43px;"></div> -</div> - -<p>Les concepts de base, concernant l'indépendance au réseau, c'est la capacité de :</p> - -<ul> - <li>Re-visiter un site et accèder à son contenu même quand le réseau n'est pas disponible.</li> - <li>Naviguer dans tout type de contenu que l'utilisateur a visité au moins une fois auparavant, même dans une situation comme une mauvaise connectivité.</li> - <li>Contrôler ce qui est affiché à l'utilisateur dans les cas d'absence de connexion.</li> -</ul> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les service workers</a></dt> - <dd>Un guide simple pour débutant à l'API Service Worker.</dd> - <dt><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></dt> - <dd>Les bases concernant IndexedDB, expliquées en détails.</dd> - <dt><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></dt> - <dd>L'API Web Storage en toute simplicité.</dd> - <dt><a class="external" href="https://developers.google.com/web/updates/2015/11/app-shell">Chargement rapide des applications web avec l'architecture <em>App Shell </em></a></dt> - <dd>Un guide pour utiliser le<em> coding pattern App Shell</em> pour créer des applications qui se chargent rapidement.</dd> -</dl> - -<h2 id="Technologies">Technologies</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Technologie</th> - <th scope="col">Description</th> - <th scope="col">Résumé du support</th> - <th scope="col">Dernière spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></td> - <td>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur dans certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toute les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elle ne soit servies.</td> - <td>Expérimental : Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td> - <td>{{SpecName('Service Workers')}}</td> - </tr> - <tr> - <td><a href="/fr/docs/IndexedDB">IndexedDB</a></td> - <td>Un système de base de données transactionnelle qui permet un stockage complexe de données coté client, contrôlable par JavaScript.</td> - <td>Répandu dans les navigateurs modernes (<a href="/fr/docs/Web/API/IndexedDB_API#Browser_compatibility">plus de détails</a>)</td> - <td>{{SpecName('IndexedDB')}}</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a></td> - <td>Une API simple de stockage de clé/valeurs côté client.</td> - <td>Répandu (<a href="/fr/docs/Web/API/Web_Storage_API#Browser_compatibility">plus de détails</a>)</td> - <td>{{SpecName('Web Storage')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Outils">Outils</h2> - -<dl> - <dt><a class="external" href="http://mozilla.github.io/localForage/">localForage</a></dt> - <dd>Une simple petite bibliothèque Javascript pour rendre vraiment simple la création d'un stockage de données côté client ; utilise par défaut IndexedDB, et se tourne vers Web SQL/Web Storage si nécessaire.</dd> - <dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt> - <dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd> - <dt><a class="external" href="https://github.com/mozilla/oghliner">oghliner</a></dt> - <dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd> - <dt><a class="external" href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt> - <dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd> - <dt><a class="external" href="https://www.talater.com/upup/">upup</a></dt> - <dd>Un petit script qui vous assure que votre site est toujours présent pour vos utilisateurs.</dd> -</dl> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<dl> - <dt><a class="external" href="https://serviceworke.rs/">The service worker cookbook</a></dt> - <dd>Une série de très bonnes ressources concernant les <em>services workers</em>, montrant comment implémenter une application web hors-ligne, et plus encore.</dd> -</dl> diff --git a/files/fr/web/progressive_web_apps/installable/index.html b/files/fr/web/progressive_web_apps/installable/index.html deleted file mode 100644 index 1692b10b1d..0000000000 --- a/files/fr/web/progressive_web_apps/installable/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Installable -slug: Web/Progressive_web_apps/Installable -tags: - - Applications - - Installable - - Manifeste -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Installable ---- -<div class="column-container summary"> -<div class="column-11">Une partie basique de l'expérience avec l'application, pour un utilisateur, est d'avoir l'icône sur l'écran d'accueil et être capable de l'ouvrir dans son propre conteneur avec une bonne intégration avec la plateforme système sous-jacente. Les applications web modernes peuvent avoir ce sentiment d'application native.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="height: 96px; width: 96px;"></div> -</div> - -<h2 id="Guides">Guides</h2> - -<p>Aucun document actuellement; les contributions sont les bienvenues.</p> - -<h2 id="Technologies">Technologies</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Technologie</th> - <th scope="col">Description</th> - <th scope="col">Résumé du support</th> - <th scope="col">Dernière spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/Manifest">Manifeste des applications web</a></td> - <td>Définit les fonctions d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, <span id="result_box" lang="fr"><span>pour une utilisation</span> <span>dans un contexte comme l'affichage sur </span><span>une liste</span> <span>d'applications ou</span> sur l'<span>écran d'accueil</span> <span>de l'appareil</span></span>.</td> - <td>Expérimental, supporté dans Chrome, support limité dans Firefox (<a href="/fr/docs/Web/Manifest#Browser_compatibility">plus de détails</a>)</td> - <td>{{SpecName('Manifest')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Outils">Outils</h2> - -<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p><em>Ajouter un lien vers des informations liées</em>.</p> diff --git a/files/fr/web/progressive_web_apps/chargement/index.html b/files/fr/web/progressive_web_apps/loading/index.html index 72ce203f4f..72ce203f4f 100644 --- a/files/fr/web/progressive_web_apps/chargement/index.html +++ b/files/fr/web/progressive_web_apps/loading/index.html diff --git a/files/fr/web/progressive_web_apps/partageable/index.html b/files/fr/web/progressive_web_apps/partageable/index.html deleted file mode 100644 index 98ad67f276..0000000000 --- a/files/fr/web/progressive_web_apps/partageable/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Partageable -slug: Web/Progressive_web_apps/Partageable -tags: - - Applications - - Applications web modernes - - Applications web progressives - - Partageable -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Linkable ---- -<div class="column-container summary"> -<div class="column-11">Une des fonctions les plus puissantes du Web est d'être capable de relier une application web à un lien URL spécifique — pas besoin de plateforme d'application, pas de processus complexe d'installation. Cela a toujours été comme ça.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="height: 40px; width: 82px;"></div> -</div> - -<h2 id="Guides">Guides</h2> - -<p>Aucun document actuellement; les contributions sont les bienvenues.</p> - -<h2 id="Technologies">Technologies</h2> - -<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !</p> - -<h2 id="Outils">Outils</h2> - -<p><em>Ajouter un lien vers un outil ou une bibliothèque utile.</em></p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p><em>Ajouter un lien vers des informations liées</em>.</p> diff --git a/files/fr/web/progressive_web_apps/progressive/index.html b/files/fr/web/progressive_web_apps/progressive/index.html deleted file mode 100644 index d4c0de5453..0000000000 --- a/files/fr/web/progressive_web_apps/progressive/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Progressive -slug: Web/Progressive_web_apps/Progressive -tags: - - Amélioration progressive - - Applications - - Design adaptatif -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Progressive ---- -<div class="column-container summary"> -<div class="column-11">Les applications web modernes peuvent être développées pour fournir une experience vraiment agréable avec les navigateurs complètement compatibles, et une expérience correcte (mais pas aussi brillante) avec les navigateurs moins aptes. Nous avons fait cela pendant des années avec de bonnes pratiques comme l'amélioration progressive, donc gardons cette bonne manière de faire les choses.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="height: 40px; width: 66px;"></div> -</div> - -<h2 id="GuidesEdit">Guides<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Guides"><span>Edit</span></a></h2> - -<p>Aucun document actuellement; les contributions sont les bienvenues.</p> - -<h2 id="TechnologiesEdit">Technologies<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Technologies"><span>Edit</span></a></h2> - -<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça depuis longtemps !</p> - -<h2 id="OutilsEdit">Outils<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Outils"><span>Edit</span></a></h2> - -<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p> - -<h2 id="Voir_aussiEdit">Voir aussi<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Voir_aussi"><span>Edit</span></a></h2> - -<p><em>Ajouter un lien vers des informations liées</em>.</p> diff --git a/files/fr/web/progressive_web_apps/re-engageable/index.html b/files/fr/web/progressive_web_apps/re-engageable/index.html deleted file mode 100644 index 729faa93e9..0000000000 --- a/files/fr/web/progressive_web_apps/re-engageable/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Re-engageable -slug: Web/Progressive_web_apps/Re-engageable -tags: - - Applications - - Notifications - - Push - - Service Workers - - Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Re-engageable ---- -<div class="column-container summary"> -<div class="column-11">Un des principaux avantages des plateformes natives est la facilité avec laquelle les utilisateurs peuvent se retrouver de nouveaux attirés par des mises-à-jour et du nouveau contenu, même quand ils ne sont pas en train de regarder l'application ou d'utiliser leur appareil. Les applications web modernes peuvent désormais le faire aussi, en utilisant de nouvelles technologies comme l'API Web Push.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="height: 43px; width: 43px;"></div> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers" lang="fr">Utiliser l'API service workers</a></dt> - <dd>Un guide simple pour débutant à l'API Service Worker.</dd> - <dt><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API" lang="en">Utiliser l'API Push</a></dt> - <dd>Apprendre les bases de l'API Web Push.</dd> - <dt><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utiliser l'API Notifications</a></dt> - <dd>Un résumé sur les notifications Web.</dd> -</dl> - -<h2 id="Technologies">Technologies</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Technologie</th> - <th scope="col">Description</th> - <th scope="col">Résumé du support</th> - <th scope="col">Dernière spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></td> - <td> - <p>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur sous certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toutes les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elles ne soit servies.</p> - </td> - <td>Expérimental: Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td> - <td>{{SpecName('Service Workers')}}</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/API/Push_API">API Push</a></td> - <td>Après s'être inscrit, le service <em>Push</em> fournit un point de terminaison utilisable par le serveur pour transmettre des messages à une application web controlée par un <em>service worker</em> particulier.</td> - <td>Expérimental: chrome et Firefox (<a href="/fr/docs/Web/API/Push_API#Browser_Compatibility">plus de détails</a>)</td> - <td>{{SpecName("Push API")}}</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/API/Notifications_API">API Notifications</a></td> - <td>Lancer des notifications systèmes directement depuis les applications web.</td> - <td>Répandu dans les navigateurs modernes (<a href="/fr/docs/Web/API/Notifications_API#Browser_compatibility">plus de détails</a>)</td> - <td>{{SpecName('Web Notifications')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Outils">Outils</h2> - -<dl> - <dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt> - <dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd> - <dt><a class="external" href="https://github.com/mozilla/oghliner" lang="en">oghliner</a></dt> - <dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd> - <dt><a class="external" href="https://github.com/GoogleChrome/sw-precache" lang="en">sw-precache</a></dt> - <dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd> -</dl> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<dl> - <dt><a class="external" href="https://serviceworke.rs/" lang="en">The service worker cookbook</a></dt> - <dd>Une série de très bonnes ressources concernant les service worker, montrant comment implémenter une application web hors-ligne, et plus encore.</dd> -</dl> diff --git a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html index e656d29cde..e656d29cde 100644 --- a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html +++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html diff --git a/files/fr/web/progressive_web_apps/responsive/media_types/index.html b/files/fr/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..3926d7e225 --- /dev/null +++ b/files/fr/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,396 @@ +--- +title: Médias +slug: CSS/Premiers_pas/Médias +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p> </p> +<p>La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.</p> +<p>Cette page revient sur le but et la structure des feuilles de style CSS.</p> +<h3 id="Information_:_les_m.C3.A9dias" name="Information_:_les_m.C3.A9dias">Information : les médias</h3> +<p>Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.</p> +<p>Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.</p> +<p>Pour spécifier des règles spécifiques à un type de média, utilisez <code>@media</code> suivi du type de média, suivi de crochets courbes entourant les règles.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. + <p>Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id <code>nav-area</code>.</p> + <p>Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :</p> + <div style="width: 30em;"> + <pre class="eval"> +@media print { + #nav-area {display: none;} + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> +<p>Voici certains des types de média courants :</p> +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>Écran d'ordinateur en couleurs</td> + </tr> + <tr> + <td><code>print</code></td> + <td>Média paginé</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>Projection sur un écran</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Tous les médias (la valeur par défaut)</td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Il existe d'autres manières de spécifier le type de média d'une série de règles. + <p>Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut <code>media</code> de la balise <code>LINK</code>.</p> + <p>En CSS, vous pouvez utiliser <code>@import</code> au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.</p> + <p>En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.</p> + <p>Pour tous les détails sur les types de média, consultez <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> dans la spécification CSS.</p> + <p>Plus d'exemples utilisant la propriété <code>display</code> sont présentés sur une prochaine page de ce tutoriel : <a href="/fr/CSS/Premiers_pas/Données_XML" title="fr/CSS/Premiers_pas/Données_XML">Données XML</a>.</p> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Impression" name="Impression">Impression</h4> +<p>CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.</p> +<p>Une règle <code>@page</code> permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, <code>@page:left</code>, et les pages de droite, <code>@page:right</code>.</p> +<p>Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (<code>cm</code>) et millimètres (<code>mm</code>), les pouces (<code>in</code>) ou les points (1 <code>pt</code> = 1/72 pouces). Il est également toujours approprié d'utiliser <code>em</code> pour s'accorder à la taille de police, et les pourcentages (<code>%</code>).</p> +<p>Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés <code>page-break-before</code> (saut de page avant), <code>page-break-after</code> (saut de page après) et <code>page-break-inside</code> (saut de page à l'intérieur).</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Exemples</caption> + <tbody> + <tr> + <td>Cette règle définit les marges de la page à deux centimètres de chaque côté : + <div style="width: 30em;"> + <pre class="eval"> +@page {margin: 2cm;} +</pre> + </div> + <p>Cette règle s'assure que chaque élément <small>H1</small> commencera une nouvelle page :</p> + <div style="width: 30em;"> + <pre class="eval"> +h1 {page-break-before: always;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Pour tous les détails sur la gestion des médias paginés par CSS, consultez <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> dans la spécification CSS. + <p>Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.</p> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Interfaces_utilisateur" name="Interfaces_utilisateur">Interfaces utilisateur</h4> +<p>CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.</p> +<p>Il n'y a pas de type de média spécial pour ce type de périphériques.</p> +<p>Voici les cinq sélecteurs spéciaux :</p> +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selecteur</strong></td> + <td><strong>Sélectionne</strong></td> + </tr> + <tr> + <td><code>E:hover</code></td> + <td>Tout élément E survolé par le pointeur</td> + </tr> + <tr> + <td><code>E:focus</code></td> + <td>Tout élément E ayant le focus du clavier</td> + </tr> + <tr> + <td><code>E:active</code></td> + <td>Tout élément E impliqué dans l'action courante de l'utilisateur</td> + </tr> + <tr> + <td><code>E:link</code></td> + <td>Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur <em>n'a pas</em> visitée récemment</td> + </tr> + <tr> + <td><code>E:visited</code></td> + <td>Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur <em>a</em> visitée récemment</td> + </tr> + </tbody> +</table> +<p>La propriété <code>cursor</code> spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :</p> +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Valeur</strong></td> + <td><strong>Indique</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>Indique un lien</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>Indique que le programme n'accepte aucune interaction pour le moment</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>Indique que le programme fonctionne, mais peut toujours accepter une autre commande</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td>Le curseur par défaut (habituellement une flèche)</td> + </tr> + </tbody> +</table> +<p><br> + Une propriété <code>outline</code> crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété <code>border</code>, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.</p> +<p>Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut <code>disabled</code> ou <code>readonly</code>. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : <code>{{ mediawiki.external('disabled') }}</code> ou <code>{{ mediawiki.external('readonly') }}</code>.</p> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : + <div style="width: 30em;"> + <pre> +.bouton-vert { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.bouton-vert[disabled] { + background-color:#cdc; + color:#777; + } + +.bouton-vert:active { + border-style: inset; + } +</pre> + </div> + <p>Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: #fff;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Cliquez ici</span></td> + <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Cliquez ici</span></td> + <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Cliquez ici</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>disabled</td> + <td>normal</td> + <td>active</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + <p>Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.</p> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> dans la spécification CSS. + <p>Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_impression_d.27un_document" name="Action_:_impression_d.27un_document">Action : impression d'un document</h3> +<p>Créez un nouveau document HTML, <code>doc4.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Exemple à imprimer</TITLE> +<LINK rel="stylesheet" type="text/css" href="style4.css"></strong> +</HEAD> + +<BODY> +<H1>Section A</H1> +<P>Ceci est la première section...</P> + +<H1>Section B</H1> +<P>Ceci est la seconde section...</P> + +<DIV id="en-tete-impression"> +Titre pour les médias paginés +</DIV> + +<DIV id="pied-de-page-impression"> +Page : +</DIV> + +</BODY> +</HTML> +</pre> +</div> +<p>Créez une nouvelle feuille de style, <code>style4.css</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** Exemple d'impression ***/ + +/* Réglages par défaut pour l'écran */ +#en-tete-impression, +#pied-de-page-impression { + display: none; + } + +/* Uniquement pour l'impression */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#en-tete-impression { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#pied-de-page-impression { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#pied-de-page-impression:after { + content: counter(page); + counter-increment: page; + } + +} /* fin des paramètres pour l'impression */ +</pre> +</div> +<p>Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.</p> +<p>Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.</p> +<table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="width: 15em; margin-right: 2em;"> + <tbody> + <tr> + <td> + <div style="font-size: 150%; text-align: center; margin-bottom: .5em;"> + Titre</div> + <div style="font-size: 150%; font-weight: bold;"> + Section A</div> + <div style="font-size: 75%;"> + Ceci est la première section...</div> + <div style="font-size: 150%; text-align: right; margin-top: 12em;"> + Page : 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="width: 15em; margin-right: 2em;"> + <tbody> + <tr> + <td> + <div style="font-size: 150%; text-align: center; margin-bottom: .5em;"> + Titre</div> + <div style="font-size: 150%; font-weight: bold;"> + Section B</div> + <div style="font-size: 75%;"> + Ceci est la seconde section...</div> + <div style="font-size: 150%; text-align: right; margin-top: 12em;"> + Page : 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. + <p>Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.</p> + <p>Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.</p> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Médias" title="Talk:fr/CSS/Premiers_pas/Médias">page de discussion</a>.</p> +<p>Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : <strong><a href="/fr/docs/CSS/Premiers_pas/JavaScript" title="fr/CSS/Premiers_pas/JavaScript">JavaScript</a></strong>.</p> diff --git a/files/fr/web/progressive_web_apps/adaptative/index.html b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html index f29786204c..f29786204c 100644 --- a/files/fr/web/progressive_web_apps/adaptative/index.html +++ b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html diff --git a/files/fr/web/progressive_web_apps/securisee/index.html b/files/fr/web/progressive_web_apps/securisee/index.html deleted file mode 100644 index c5c90869f4..0000000000 --- a/files/fr/web/progressive_web_apps/securisee/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Sécurisée -slug: Web/Progressive_web_apps/Securisee -tags: - - Applications - - Applications web modernes - - Applications web progressives - - HTTPS - - Sécurité - - Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Safe ---- -<div class="column-container summary"> -<div class="column-11">La plateforme Web fournit un mécanisme sécurisé de livraison permettant d'éviter l'infiltration et s'assurer que le contenu n'a pas été altéré - aussi longtemps que vous bénéficiez de l'avantage du HTTPS et que vous développez votre application avec la sécurité à l'esprit.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="height: 40px; width: 38px;"></div> -</div> - -<h2 id="Guides">Guides</h2> - -<p>Aucun document actuellement; les contributions sont les bienvenues.</p> - -<h2 id="Technologies">Technologies</h2> - -<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !</p> - -<h2 id="Outils">Outils</h2> - -<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p><em>Ajouter un lien vers des informations liées</em>.</p> diff --git a/files/fr/web/security/same_origin_policy_for_javascript/index.html b/files/fr/web/security/same-origin_policy/index.html index bcbdbe613f..bcbdbe613f 100644 --- a/files/fr/web/security/same_origin_policy_for_javascript/index.html +++ b/files/fr/web/security/same-origin_policy/index.html diff --git a/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html index cb06ea5315..cb06ea5315 100644 --- a/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html diff --git a/files/fr/web/svg/sources_compatibilite/index.html b/files/fr/web/svg/compatibility_sources/index.html index 49f69f68a7..49f69f68a7 100644 --- a/files/fr/web/svg/sources_compatibilite/index.html +++ b/files/fr/web/svg/compatibility_sources/index.html diff --git a/files/fr/web/svg/svg_1.1_support_in_firefox/index.html b/files/fr/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..36e4340b97 --- /dev/null +++ b/files/fr/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,774 @@ +--- +title: SVG dans Firefox +slug: SVG_dans_Firefox +tags: + - SVG +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +<p>Vous trouverez des exemples simples de syntaxe et d'utilisation de SVG sur la page <a class="external" href="http://www.w3.org/Graphics/SVG/Test/20061213/">W3C SVG test suite</a>.</p> + +<h2 id="Statut_d.27impl.C3.A9mentation_des_.C3.A9l.C3.A9ments" name="Statut_d.27impl.C3.A9mentation_des_.C3.A9l.C3.A9ments">Statut d'implémentation des éléments</h2> + +<ul> + <li>SVGPathSegList Interface + <ul> + <li>Liaisons non implémentées : replaceItem()</li> + </ul> + </li> +</ul> + +<table class="standard-table" style="border-collapse: separate;"> + <tbody> + <tr> + <th>Élément</th> + <th>Notes</th> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> + <td> + <ul> + <li>Implémenté.</li> + <li>Les attributs DOM <code>currentScale</code> et <code>currentTranslate</code> sont implémentés, mais il n'y a pas d'interface utilisateur pour se déplacer et zoomer.</li> + <li>SVGSVGElement + <ul> + <li>Attributs non implémentés : contentScriptType, contentStyleType, viewport, useCurrentView, currentView</li> + <li>Liaisons non implémentées : pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll,</li> + <li><del>createSVGAngle</del> (implémenté dans Firefox 2), getElementById</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> + <td> + <ul> + <li>Implémenté.</li> + <li>Uniquement stocké dans le DOM, pas d'interface utilisateur.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> + <td> + <ul> + <li>Implémenté.</li> + <li>Uniquement stocké dans le DOM, pas d'interface utilisateur.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> + <td> + <ul> + <li>Implémenté.</li> + <li>Fonctionne uniquement pour les références internes au document ({{ Bug(269482) }}).</li> + <li>Ne suit pas entièrement les règles de cascade <svg:use> ({{ Bug(265894) }}).</li> + <li>Ne délivre pas les évènements à un arbre SVGElementInstance ({{ Bug(265895) }}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> + <td> + <ul> + <li>Implémenté.</li> + <li>SVGPathElement Interface + <ul> + <li>Attributs non implémentés : pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList</li> + <li>Liaisons non implémentées : getTotalLength,</li> + <li><del>getPointAtLength</del> (implémenté dans Firefox 2), getPathSegAtLength</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> + <td> + <ul> + <li>Implémenté.</li> + <li>SVGTextElement + <ul> + <li>Attributs non implémentés : rotate, textLength, lengthAdjust</li> + <li>Liaisons non implémentées : getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li> + <li>Liaisons non fonctionnelles au cours de <code>onload</code> : getExtentOfChar</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> + <td> + <ul> + <li>Implémenté.</li> + <li>SVGTSpanElement + <ul> + <li>Attributs non implémentés : rotate, textLength, lengthAdjust</li> + <li>Liaisons non implémentées : getNumberOfChars,</li> + <li><del>getComputedTextLength</del> (implémenté dans Firefox 2), getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td style="background-color: rgb(204,204,204);"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> + <td style="background-color: rgb(204,204,204);"> + <ul> + <li>Cette fonctionnalité se trouvait dans les premiers projets de spec et a été retirée par la suite, elle n'est donc pas implémentée</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> + <td> + <ul> + <li>Implémenté dans Firefox 2.</li> + <li>Attributs non implémentés : method, spacing, textLength, lengthAdjust</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> + <td> + <ul> + <li>Non implémenté ({{Bug(177193)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> + <td> + <ul> + <li>Implémenté comme une liaison XBL - l'objet n'est pas du type SVGAElement.</li> + <li>Seuls les attributs <code>xlink:href</code> et <code>xlink:show</code> sont implémentés.</li> + <li>Pour l'attribut <code>target</code>, voir le {{ Bug(300868) }}</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> + <td> + <ul> + <li>Implémenté dans Gecko 15.0 ({{Bug(512525)}}). {{gecko_minversion_inline("15.0")}}.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> + <td> + <ul> + <li>Non implémenté ({{Bug(436296)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td> + <td> + <ul> + <li>Non implémenté ({{Bug(119490)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> + <td> + <ul> + <li>Non implémenté.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> + <td> + <ul> + <li>Implémenté.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/fr/web/svg/svg_en_tant_qu_image/index.html b/files/fr/web/svg/svg_as_an_image/index.html index e7acc660e0..e7acc660e0 100644 --- a/files/fr/web/svg/svg_en_tant_qu_image/index.html +++ b/files/fr/web/svg/svg_as_an_image/index.html diff --git a/files/fr/web/svg/tutoriel/formes_de_base/index.html b/files/fr/web/svg/tutorial/basic_shapes/index.html index aa75f0c0ed..aa75f0c0ed 100644 --- a/files/fr/web/svg/tutoriel/formes_de_base/index.html +++ b/files/fr/web/svg/tutorial/basic_shapes/index.html diff --git a/files/fr/web/svg/tutoriel/transformations_de_base/index.html b/files/fr/web/svg/tutorial/basic_transformations/index.html index 2015cab83c..2015cab83c 100644 --- a/files/fr/web/svg/tutoriel/transformations_de_base/index.html +++ b/files/fr/web/svg/tutorial/basic_transformations/index.html diff --git a/files/fr/web/svg/tutoriel/découpages_et_masquages/index.html b/files/fr/web/svg/tutorial/clipping_and_masking/index.html index a4dd82b1dc..a4dd82b1dc 100644 --- a/files/fr/web/svg/tutoriel/découpages_et_masquages/index.html +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.html diff --git a/files/fr/web/svg/tutoriel/fills_and_strokes/index.html b/files/fr/web/svg/tutorial/fills_and_strokes/index.html index 54e0d792e2..54e0d792e2 100644 --- a/files/fr/web/svg/tutoriel/fills_and_strokes/index.html +++ b/files/fr/web/svg/tutorial/fills_and_strokes/index.html diff --git a/files/fr/web/svg/tutoriel/filtres/index.html b/files/fr/web/svg/tutorial/filter_effects/index.html index b0f988398a..b0f988398a 100644 --- a/files/fr/web/svg/tutoriel/filtres/index.html +++ b/files/fr/web/svg/tutorial/filter_effects/index.html diff --git a/files/fr/web/svg/tutoriel/premiers_pas/index.html b/files/fr/web/svg/tutorial/getting_started/index.html index 83dee73b6c..83dee73b6c 100644 --- a/files/fr/web/svg/tutoriel/premiers_pas/index.html +++ b/files/fr/web/svg/tutorial/getting_started/index.html diff --git a/files/fr/web/svg/tutoriel/gradients/index.html b/files/fr/web/svg/tutorial/gradients/index.html index ef9c235318..ef9c235318 100644 --- a/files/fr/web/svg/tutoriel/gradients/index.html +++ b/files/fr/web/svg/tutorial/gradients/index.html diff --git a/files/fr/web/svg/tutoriel/index.html b/files/fr/web/svg/tutorial/index.html index 14275fcdd8..14275fcdd8 100644 --- a/files/fr/web/svg/tutoriel/index.html +++ b/files/fr/web/svg/tutorial/index.html diff --git a/files/fr/web/svg/tutoriel/introduction/index.html b/files/fr/web/svg/tutorial/introduction/index.html index 7c38618958..7c38618958 100644 --- a/files/fr/web/svg/tutoriel/introduction/index.html +++ b/files/fr/web/svg/tutorial/introduction/index.html diff --git a/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html b/files/fr/web/svg/tutorial/other_content_in_svg/index.html index ecaf0e7d60..ecaf0e7d60 100644 --- a/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html +++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.html diff --git a/files/fr/web/svg/tutoriel/paths/index.html b/files/fr/web/svg/tutorial/paths/index.html index 2b73ee2682..2b73ee2682 100644 --- a/files/fr/web/svg/tutoriel/paths/index.html +++ b/files/fr/web/svg/tutorial/paths/index.html diff --git a/files/fr/web/svg/tutoriel/motifs/index.html b/files/fr/web/svg/tutorial/patterns/index.html index 29a63e8f60..29a63e8f60 100644 --- a/files/fr/web/svg/tutoriel/motifs/index.html +++ b/files/fr/web/svg/tutorial/patterns/index.html diff --git a/files/fr/web/svg/tutoriel/positionnement/index.html b/files/fr/web/svg/tutorial/positions/index.html index 7f23bfe123..7f23bfe123 100644 --- a/files/fr/web/svg/tutoriel/positionnement/index.html +++ b/files/fr/web/svg/tutorial/positions/index.html diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.html b/files/fr/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..a3c323972f --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,198 @@ +--- +title: Graphiques SVG +slug: CSS/Premiers_pas/Graphiques_SVG +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +<p> </p> +<p>Cette page illustre le langage spécialisé dans la création d'éléments graphiques : SVG.</p> +<p>Vous créerez une démonstration simple visible dans votre navigateur Mozilla avec SVG activé.</p> +<h3 id="Information_:_SVG" name="Information_:_SVG">Information : SVG</h3> +<p> + <i> + SVG</i> + (Scalable Vector Graphics) est un langage basé sur XML permettant de créer des éléments graphiques.</p> +<p>Il peut être utilisé pour des images statiques, ainsi que pour des animations et des interfaces utilisateur.</p> +<p>Comme d'autres langages basés sur XML, SVG permet d'utiliser des feuilles de style CSS afin de séparer le style d'un graphique de son contenu.</p> +<p>De plus, les feuilles de style utilisées avec d'autres langages de balisages peuvent spécifier l'URL d'un graphique SVG lorsqu'une image est requise. Par exemple, une feuille de style utilisée avec un document HTML peut spécifier l'URL d'un graphique SVG dans la valeur d'une propriété <code>background</code>.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Au moment de la rédaction de ce document (courant 2005), seules certains compilations récentes des navigateurs Mozilla ont leur gestion native de SVG activée. + <p>Vous pouvez ajouter un support SVG à d'autres versions en installant un plugin comme celui fourni par <a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p> + <p>Pour plus d'informations à propos de SVG dans Mozilla, consultez la page <a href="fr/SVG">SVG</a> de ce wiki.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_une_d.C3.A9monstration_de_SVG" name="Action_:_une_d.C3.A9monstration_de_SVG">Action : une démonstration de SVG</h3> +<p>Créez un nouveau document SVG en tant que fichier texte simple, <code>doc8.svg</code>. Copiez et collez-y le contenu ci-dessous en vous assurant de le faire défiler afin d'en obtenir la totalité :</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Premiers pas en CSS avec Mozilla - Démonstration de SVG</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Placez le pointeur de la souris au dessus de la fleur.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre> +</div> +<p>Créez un nouveau fichier CSS, <code>style8.css</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** Démonstration de SVG ***/ + +/* page */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flower */ +#flower:hover { + cursor: crosshair; + } + +/* gradient */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outer petals */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* inner petals */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre> +</div> +<p>Ouvrez le document dans votre navigateur avec SVG activé. Placez le pointeur de la souris au dessus de l'image.</p> +<p>Ce wiki ne permet pas d'utiliser SVG dans ses pages, il n'est donc pas possible d'afficher la démonstration ici. L'image ressemble à ceci :</p> +<table style="border: 2px outset #36b;"> + <tbody> + <tr> + <td><img alt="Démonstration de SVG"></td> + </tr> + </tbody> +</table> +<p>Remarques à propos de cette démonstration :</p> +<ul> + <li>Le document SVG est lié à la feuille de style de la manière habituelle.</li> + <li>SVG possède ses propres propriétés CSS et valeurs. Certaines d'entre-elles sont similaires au propriétés CSS pour HTML.</li> +</ul> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>Modifiez la feuille de style pour que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris survole n'importe lequel d'entre-eux, sans changer la manière dont les pétales extérieurs fonctionnent.</td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p> +<p>Dans cette démonstration, votre navigateur avec SVG activé sait déjà comment afficher les éléments SVG. La feuille de style modifie uniquement l'affichage dans une certaine mesure. C'est également le cas pour les documents HTML et XUL. Mais vous pouvez utiliser CSS pour des documents XML généralistes, où il n'y a aucune manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : <b><a href="/fr/docs/CSS/Premiers_pas/Donn%c3%a9es_XML">Données XML</a></b>.</p> diff --git a/files/fr/web/svg/tutoriel/polices_svg/index.html b/files/fr/web/svg/tutorial/svg_fonts/index.html index 4a196a3825..4a196a3825 100644 --- a/files/fr/web/svg/tutoriel/polices_svg/index.html +++ b/files/fr/web/svg/tutorial/svg_fonts/index.html diff --git a/files/fr/web/svg/tutoriel/svg_image_tag/index.html b/files/fr/web/svg/tutorial/svg_image_tag/index.html index 8912c059d0..8912c059d0 100644 --- a/files/fr/web/svg/tutoriel/svg_image_tag/index.html +++ b/files/fr/web/svg/tutorial/svg_image_tag/index.html diff --git a/files/fr/web/svg/tutoriel/introduction_à_svg_dans_html/index.html b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html index 29db7cb55b..29db7cb55b 100644 --- a/files/fr/web/svg/tutoriel/introduction_à_svg_dans_html/index.html +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html diff --git a/files/fr/web/svg/tutoriel/texts/index.html b/files/fr/web/svg/tutorial/texts/index.html index 97871407d2..97871407d2 100644 --- a/files/fr/web/svg/tutoriel/texts/index.html +++ b/files/fr/web/svg/tutorial/texts/index.html diff --git a/files/fr/web/svg/tutoriel/tools_for_svg/index.html b/files/fr/web/svg/tutorial/tools_for_svg/index.html index f60f06c76f..f60f06c76f 100644 --- a/files/fr/web/svg/tutoriel/tools_for_svg/index.html +++ b/files/fr/web/svg/tutorial/tools_for_svg/index.html diff --git a/files/fr/web/tutoriels/index.html b/files/fr/web/tutorials/index.html index b9983910db..b9983910db 100644 --- a/files/fr/web/tutoriels/index.html +++ b/files/fr/web/tutorials/index.html diff --git a/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html b/files/fr/web/web_components/using_templates_and_slots/index.html index b23a8c9632..b23a8c9632 100644 --- a/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html +++ b/files/fr/web/web_components/using_templates_and_slots/index.html diff --git a/files/fr/web/xml/introduction_à_xml/index.html b/files/fr/web/xml/xml_introduction/index.html index 4f502262eb..4f502262eb 100644 --- a/files/fr/web/xml/introduction_à_xml/index.html +++ b/files/fr/web/xml/xml_introduction/index.html diff --git a/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html b/files/fr/web/xpath/comparison_with_css_selectors/index.html index 2a35cb5611..2a35cb5611 100644 --- a/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html +++ b/files/fr/web/xpath/comparison_with_css_selectors/index.html diff --git a/files/fr/web/xpath/fonctions/boolean/index.html b/files/fr/web/xpath/functions/boolean/index.html index c48fd233c6..c48fd233c6 100644 --- a/files/fr/web/xpath/fonctions/boolean/index.html +++ b/files/fr/web/xpath/functions/boolean/index.html diff --git a/files/fr/web/xpath/fonctions/ceiling/index.html b/files/fr/web/xpath/functions/ceiling/index.html index ca27303779..ca27303779 100644 --- a/files/fr/web/xpath/fonctions/ceiling/index.html +++ b/files/fr/web/xpath/functions/ceiling/index.html diff --git a/files/fr/web/xpath/fonctions/concat/index.html b/files/fr/web/xpath/functions/concat/index.html index b724dd4a1e..b724dd4a1e 100644 --- a/files/fr/web/xpath/fonctions/concat/index.html +++ b/files/fr/web/xpath/functions/concat/index.html diff --git a/files/fr/web/xpath/fonctions/contains/index.html b/files/fr/web/xpath/functions/contains/index.html index 72be24ec8e..72be24ec8e 100644 --- a/files/fr/web/xpath/fonctions/contains/index.html +++ b/files/fr/web/xpath/functions/contains/index.html diff --git a/files/fr/web/xpath/fonctions/count/index.html b/files/fr/web/xpath/functions/count/index.html index d173536a77..d173536a77 100644 --- a/files/fr/web/xpath/fonctions/count/index.html +++ b/files/fr/web/xpath/functions/count/index.html diff --git a/files/fr/web/xpath/fonctions/current/index.html b/files/fr/web/xpath/functions/current/index.html index 692ac83cc1..692ac83cc1 100644 --- a/files/fr/web/xpath/fonctions/current/index.html +++ b/files/fr/web/xpath/functions/current/index.html diff --git a/files/fr/web/xpath/fonctions/document/index.html b/files/fr/web/xpath/functions/document/index.html index ad4f52bab4..ad4f52bab4 100644 --- a/files/fr/web/xpath/fonctions/document/index.html +++ b/files/fr/web/xpath/functions/document/index.html diff --git a/files/fr/web/xpath/fonctions/element-available/index.html b/files/fr/web/xpath/functions/element-available/index.html index f27dfbcccc..f27dfbcccc 100644 --- a/files/fr/web/xpath/fonctions/element-available/index.html +++ b/files/fr/web/xpath/functions/element-available/index.html diff --git a/files/fr/web/xpath/fonctions/false/index.html b/files/fr/web/xpath/functions/false/index.html index 8b6e7a611a..8b6e7a611a 100644 --- a/files/fr/web/xpath/fonctions/false/index.html +++ b/files/fr/web/xpath/functions/false/index.html diff --git a/files/fr/web/xpath/fonctions/floor/index.html b/files/fr/web/xpath/functions/floor/index.html index 36f96d9c5d..36f96d9c5d 100644 --- a/files/fr/web/xpath/fonctions/floor/index.html +++ b/files/fr/web/xpath/functions/floor/index.html diff --git a/files/fr/web/xpath/fonctions/format-number/index.html b/files/fr/web/xpath/functions/format-number/index.html index a9027215bc..a9027215bc 100644 --- a/files/fr/web/xpath/fonctions/format-number/index.html +++ b/files/fr/web/xpath/functions/format-number/index.html diff --git a/files/fr/web/xpath/fonctions/function-available/index.html b/files/fr/web/xpath/functions/function-available/index.html index cfde97a7a5..cfde97a7a5 100644 --- a/files/fr/web/xpath/fonctions/function-available/index.html +++ b/files/fr/web/xpath/functions/function-available/index.html diff --git a/files/fr/web/xpath/fonctions/generate-id/index.html b/files/fr/web/xpath/functions/generate-id/index.html index 69c5e6e277..69c5e6e277 100644 --- a/files/fr/web/xpath/fonctions/generate-id/index.html +++ b/files/fr/web/xpath/functions/generate-id/index.html diff --git a/files/fr/web/xpath/fonctions/id/index.html b/files/fr/web/xpath/functions/id/index.html index 587bdf6e03..587bdf6e03 100644 --- a/files/fr/web/xpath/fonctions/id/index.html +++ b/files/fr/web/xpath/functions/id/index.html diff --git a/files/fr/web/xpath/fonctions/index.html b/files/fr/web/xpath/functions/index.html index 3c0b92453f..3c0b92453f 100644 --- a/files/fr/web/xpath/fonctions/index.html +++ b/files/fr/web/xpath/functions/index.html diff --git a/files/fr/web/xpath/fonctions/key/index.html b/files/fr/web/xpath/functions/key/index.html index 48dc4c49f5..48dc4c49f5 100644 --- a/files/fr/web/xpath/fonctions/key/index.html +++ b/files/fr/web/xpath/functions/key/index.html diff --git a/files/fr/web/xpath/fonctions/lang/index.html b/files/fr/web/xpath/functions/lang/index.html index 6ce39f2dc1..6ce39f2dc1 100644 --- a/files/fr/web/xpath/fonctions/lang/index.html +++ b/files/fr/web/xpath/functions/lang/index.html diff --git a/files/fr/web/xpath/fonctions/last/index.html b/files/fr/web/xpath/functions/last/index.html index 2482ff891f..2482ff891f 100644 --- a/files/fr/web/xpath/fonctions/last/index.html +++ b/files/fr/web/xpath/functions/last/index.html diff --git a/files/fr/web/xpath/fonctions/local-name/index.html b/files/fr/web/xpath/functions/local-name/index.html index 6eeb89c283..6eeb89c283 100644 --- a/files/fr/web/xpath/fonctions/local-name/index.html +++ b/files/fr/web/xpath/functions/local-name/index.html diff --git a/files/fr/web/xpath/fonctions/name/index.html b/files/fr/web/xpath/functions/name/index.html index f84ecace25..f84ecace25 100644 --- a/files/fr/web/xpath/fonctions/name/index.html +++ b/files/fr/web/xpath/functions/name/index.html diff --git a/files/fr/web/xpath/fonctions/namespace-uri/index.html b/files/fr/web/xpath/functions/namespace-uri/index.html index 40bbbacd5e..40bbbacd5e 100644 --- a/files/fr/web/xpath/fonctions/namespace-uri/index.html +++ b/files/fr/web/xpath/functions/namespace-uri/index.html diff --git a/files/fr/web/xpath/fonctions/normalize-space/index.html b/files/fr/web/xpath/functions/normalize-space/index.html index 6ca26b2e90..6ca26b2e90 100644 --- a/files/fr/web/xpath/fonctions/normalize-space/index.html +++ b/files/fr/web/xpath/functions/normalize-space/index.html diff --git a/files/fr/web/xpath/fonctions/not/index.html b/files/fr/web/xpath/functions/not/index.html index 49521ba9a2..49521ba9a2 100644 --- a/files/fr/web/xpath/fonctions/not/index.html +++ b/files/fr/web/xpath/functions/not/index.html diff --git a/files/fr/web/xpath/fonctions/number/index.html b/files/fr/web/xpath/functions/number/index.html index c230413856..c230413856 100644 --- a/files/fr/web/xpath/fonctions/number/index.html +++ b/files/fr/web/xpath/functions/number/index.html diff --git a/files/fr/web/xpath/fonctions/position/index.html b/files/fr/web/xpath/functions/position/index.html index fb746d8286..fb746d8286 100644 --- a/files/fr/web/xpath/fonctions/position/index.html +++ b/files/fr/web/xpath/functions/position/index.html diff --git a/files/fr/web/xpath/fonctions/round/index.html b/files/fr/web/xpath/functions/round/index.html index 3383b0f74c..3383b0f74c 100644 --- a/files/fr/web/xpath/fonctions/round/index.html +++ b/files/fr/web/xpath/functions/round/index.html diff --git a/files/fr/web/xpath/fonctions/starts-with/index.html b/files/fr/web/xpath/functions/starts-with/index.html index 94c8e8d734..94c8e8d734 100644 --- a/files/fr/web/xpath/fonctions/starts-with/index.html +++ b/files/fr/web/xpath/functions/starts-with/index.html diff --git a/files/fr/web/xpath/fonctions/string-length/index.html b/files/fr/web/xpath/functions/string-length/index.html index 3e983b4575..3e983b4575 100644 --- a/files/fr/web/xpath/fonctions/string-length/index.html +++ b/files/fr/web/xpath/functions/string-length/index.html diff --git a/files/fr/web/xpath/fonctions/string/index.html b/files/fr/web/xpath/functions/string/index.html index 00f0a8e17b..00f0a8e17b 100644 --- a/files/fr/web/xpath/fonctions/string/index.html +++ b/files/fr/web/xpath/functions/string/index.html diff --git a/files/fr/web/xpath/fonctions/substring-after/index.html b/files/fr/web/xpath/functions/substring-after/index.html index ba4e4eb8bc..ba4e4eb8bc 100644 --- a/files/fr/web/xpath/fonctions/substring-after/index.html +++ b/files/fr/web/xpath/functions/substring-after/index.html diff --git a/files/fr/web/xpath/fonctions/substring-before/index.html b/files/fr/web/xpath/functions/substring-before/index.html index 5542b2c0cb..5542b2c0cb 100644 --- a/files/fr/web/xpath/fonctions/substring-before/index.html +++ b/files/fr/web/xpath/functions/substring-before/index.html diff --git a/files/fr/web/xpath/fonctions/substring/index.html b/files/fr/web/xpath/functions/substring/index.html index 0ac5572b19..0ac5572b19 100644 --- a/files/fr/web/xpath/fonctions/substring/index.html +++ b/files/fr/web/xpath/functions/substring/index.html diff --git a/files/fr/web/xpath/fonctions/sum/index.html b/files/fr/web/xpath/functions/sum/index.html index 9b185c65d7..9b185c65d7 100644 --- a/files/fr/web/xpath/fonctions/sum/index.html +++ b/files/fr/web/xpath/functions/sum/index.html diff --git a/files/fr/web/xpath/fonctions/system-property/index.html b/files/fr/web/xpath/functions/system-property/index.html index 3ac02cbcc4..3ac02cbcc4 100644 --- a/files/fr/web/xpath/fonctions/system-property/index.html +++ b/files/fr/web/xpath/functions/system-property/index.html diff --git a/files/fr/web/xpath/fonctions/translate/index.html b/files/fr/web/xpath/functions/translate/index.html index 5b6e480f22..5b6e480f22 100644 --- a/files/fr/web/xpath/fonctions/translate/index.html +++ b/files/fr/web/xpath/functions/translate/index.html diff --git a/files/fr/web/xpath/fonctions/true/index.html b/files/fr/web/xpath/functions/true/index.html index 29851cc94c..29851cc94c 100644 --- a/files/fr/web/xpath/fonctions/true/index.html +++ b/files/fr/web/xpath/functions/true/index.html diff --git a/files/fr/web/xpath/fonctions/unparsed-entity-url/index.html b/files/fr/web/xpath/functions/unparsed-entity-url/index.html index 4aeb74b35f..4aeb74b35f 100644 --- a/files/fr/web/xpath/fonctions/unparsed-entity-url/index.html +++ b/files/fr/web/xpath/functions/unparsed-entity-url/index.html diff --git a/files/fr/web/javascript/introduction_à_l_utilisation_de_xpath_avec_javascript/index.html b/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.html index 620d538eb8..620d538eb8 100644 --- a/files/fr/web/javascript/introduction_à_l_utilisation_de_xpath_avec_javascript/index.html +++ b/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.html diff --git a/files/fr/web/xslt/apply-imports/index.html b/files/fr/web/xslt/element/apply-imports/index.html index e2ee362904..e2ee362904 100644 --- a/files/fr/web/xslt/apply-imports/index.html +++ b/files/fr/web/xslt/element/apply-imports/index.html diff --git a/files/fr/web/xslt/apply-templates/index.html b/files/fr/web/xslt/element/apply-templates/index.html index fa76051fa5..fa76051fa5 100644 --- a/files/fr/web/xslt/apply-templates/index.html +++ b/files/fr/web/xslt/element/apply-templates/index.html diff --git a/files/fr/web/xslt/attribute-set/index.html b/files/fr/web/xslt/element/attribute-set/index.html index 2a85e1e8f6..2a85e1e8f6 100644 --- a/files/fr/web/xslt/attribute-set/index.html +++ b/files/fr/web/xslt/element/attribute-set/index.html diff --git a/files/fr/web/xslt/attribute/index.html b/files/fr/web/xslt/element/attribute/index.html index 3a5e5f1640..3a5e5f1640 100644 --- a/files/fr/web/xslt/attribute/index.html +++ b/files/fr/web/xslt/element/attribute/index.html diff --git a/files/fr/web/xslt/call-template/index.html b/files/fr/web/xslt/element/call-template/index.html index 12daa615fc..12daa615fc 100644 --- a/files/fr/web/xslt/call-template/index.html +++ b/files/fr/web/xslt/element/call-template/index.html diff --git a/files/fr/web/xslt/choose/index.html b/files/fr/web/xslt/element/choose/index.html index 4fde3f3695..4fde3f3695 100644 --- a/files/fr/web/xslt/choose/index.html +++ b/files/fr/web/xslt/element/choose/index.html diff --git a/files/fr/web/xslt/comment/index.html b/files/fr/web/xslt/element/comment/index.html index 65dcd3ad2c..65dcd3ad2c 100644 --- a/files/fr/web/xslt/comment/index.html +++ b/files/fr/web/xslt/element/comment/index.html diff --git a/files/fr/web/xslt/copy-of/index.html b/files/fr/web/xslt/element/copy-of/index.html index 624972c55f..624972c55f 100644 --- a/files/fr/web/xslt/copy-of/index.html +++ b/files/fr/web/xslt/element/copy-of/index.html diff --git a/files/fr/web/xslt/copy/index.html b/files/fr/web/xslt/element/copy/index.html index 10710be024..10710be024 100644 --- a/files/fr/web/xslt/copy/index.html +++ b/files/fr/web/xslt/element/copy/index.html diff --git a/files/fr/web/xslt/decimal-format/index.html b/files/fr/web/xslt/element/decimal-format/index.html index 7a324d1082..7a324d1082 100644 --- a/files/fr/web/xslt/decimal-format/index.html +++ b/files/fr/web/xslt/element/decimal-format/index.html diff --git a/files/fr/web/xslt/fallback/index.html b/files/fr/web/xslt/element/fallback/index.html index 495ac3a99d..495ac3a99d 100644 --- a/files/fr/web/xslt/fallback/index.html +++ b/files/fr/web/xslt/element/fallback/index.html diff --git a/files/fr/web/xslt/for-each/index.html b/files/fr/web/xslt/element/for-each/index.html index df76ed47f2..df76ed47f2 100644 --- a/files/fr/web/xslt/for-each/index.html +++ b/files/fr/web/xslt/element/for-each/index.html diff --git a/files/fr/web/xslt/if/index.html b/files/fr/web/xslt/element/if/index.html index dd6c6f83bc..dd6c6f83bc 100644 --- a/files/fr/web/xslt/if/index.html +++ b/files/fr/web/xslt/element/if/index.html diff --git a/files/fr/web/xslt/import/index.html b/files/fr/web/xslt/element/import/index.html index 80a618fd06..80a618fd06 100644 --- a/files/fr/web/xslt/import/index.html +++ b/files/fr/web/xslt/element/import/index.html diff --git a/files/fr/web/xslt/include/index.html b/files/fr/web/xslt/element/include/index.html index d3e669099e..d3e669099e 100644 --- a/files/fr/web/xslt/include/index.html +++ b/files/fr/web/xslt/element/include/index.html diff --git a/files/fr/web/xslt/key/index.html b/files/fr/web/xslt/element/key/index.html index f8065b84a6..f8065b84a6 100644 --- a/files/fr/web/xslt/key/index.html +++ b/files/fr/web/xslt/element/key/index.html diff --git a/files/fr/web/xslt/message/index.html b/files/fr/web/xslt/element/message/index.html index d39aff3207..d39aff3207 100644 --- a/files/fr/web/xslt/message/index.html +++ b/files/fr/web/xslt/element/message/index.html diff --git a/files/fr/web/xslt/namespace-alias/index.html b/files/fr/web/xslt/element/namespace-alias/index.html index 17f8ffdba1..17f8ffdba1 100644 --- a/files/fr/web/xslt/namespace-alias/index.html +++ b/files/fr/web/xslt/element/namespace-alias/index.html diff --git a/files/fr/web/xslt/number/index.html b/files/fr/web/xslt/element/number/index.html index 3cdc34ff4e..3cdc34ff4e 100644 --- a/files/fr/web/xslt/number/index.html +++ b/files/fr/web/xslt/element/number/index.html diff --git a/files/fr/web/xslt/otherwise/index.html b/files/fr/web/xslt/element/otherwise/index.html index d39df0a592..d39df0a592 100644 --- a/files/fr/web/xslt/otherwise/index.html +++ b/files/fr/web/xslt/element/otherwise/index.html diff --git a/files/fr/web/xslt/output/index.html b/files/fr/web/xslt/element/output/index.html index 3c4296c1cd..3c4296c1cd 100644 --- a/files/fr/web/xslt/output/index.html +++ b/files/fr/web/xslt/element/output/index.html diff --git a/files/fr/web/xslt/param/index.html b/files/fr/web/xslt/element/param/index.html index 56f1426050..56f1426050 100644 --- a/files/fr/web/xslt/param/index.html +++ b/files/fr/web/xslt/element/param/index.html diff --git a/files/fr/web/xslt/preserve-space/index.html b/files/fr/web/xslt/element/preserve-space/index.html index e0300d426b..e0300d426b 100644 --- a/files/fr/web/xslt/preserve-space/index.html +++ b/files/fr/web/xslt/element/preserve-space/index.html diff --git a/files/fr/web/xslt/processing-instruction/index.html b/files/fr/web/xslt/element/processing-instruction/index.html index cd5842c36a..cd5842c36a 100644 --- a/files/fr/web/xslt/processing-instruction/index.html +++ b/files/fr/web/xslt/element/processing-instruction/index.html diff --git a/files/fr/web/xslt/sort/index.html b/files/fr/web/xslt/element/sort/index.html index 1c783db1c3..1c783db1c3 100644 --- a/files/fr/web/xslt/sort/index.html +++ b/files/fr/web/xslt/element/sort/index.html diff --git a/files/fr/web/xslt/strip-space/index.html b/files/fr/web/xslt/element/strip-space/index.html index 76ead0b589..76ead0b589 100644 --- a/files/fr/web/xslt/strip-space/index.html +++ b/files/fr/web/xslt/element/strip-space/index.html diff --git a/files/fr/web/xslt/stylesheet/index.html b/files/fr/web/xslt/element/stylesheet/index.html index ba3b517967..ba3b517967 100644 --- a/files/fr/web/xslt/stylesheet/index.html +++ b/files/fr/web/xslt/element/stylesheet/index.html diff --git a/files/fr/web/xslt/template/index.html b/files/fr/web/xslt/element/template/index.html index 820b6a7a94..820b6a7a94 100644 --- a/files/fr/web/xslt/template/index.html +++ b/files/fr/web/xslt/element/template/index.html diff --git a/files/fr/web/xslt/text/index.html b/files/fr/web/xslt/element/text/index.html index c69e56df6c..c69e56df6c 100644 --- a/files/fr/web/xslt/text/index.html +++ b/files/fr/web/xslt/element/text/index.html diff --git a/files/fr/web/xslt/transform/index.html b/files/fr/web/xslt/element/transform/index.html index f8b7ae371d..f8b7ae371d 100644 --- a/files/fr/web/xslt/transform/index.html +++ b/files/fr/web/xslt/element/transform/index.html diff --git a/files/fr/web/xslt/value-of/index.html b/files/fr/web/xslt/element/value-of/index.html index eba0698be5..eba0698be5 100644 --- a/files/fr/web/xslt/value-of/index.html +++ b/files/fr/web/xslt/element/value-of/index.html diff --git a/files/fr/web/xslt/variable/index.html b/files/fr/web/xslt/element/variable/index.html index 0bd1320084..0bd1320084 100644 --- a/files/fr/web/xslt/variable/index.html +++ b/files/fr/web/xslt/element/variable/index.html diff --git a/files/fr/web/xslt/when/index.html b/files/fr/web/xslt/element/when/index.html index 21cf06aa55..21cf06aa55 100644 --- a/files/fr/web/xslt/when/index.html +++ b/files/fr/web/xslt/element/when/index.html diff --git a/files/fr/web/xslt/with-param/index.html b/files/fr/web/xslt/element/with-param/index.html index 7b4ca9c40e..7b4ca9c40e 100644 --- a/files/fr/web/xslt/with-param/index.html +++ b/files/fr/web/xslt/element/with-param/index.html diff --git a/files/fr/web/xslt/sommaire/index.html b/files/fr/web/xslt/index/index.html index fcd1895d72..fcd1895d72 100644 --- a/files/fr/web/xslt/sommaire/index.html +++ b/files/fr/web/xslt/index/index.html diff --git a/files/fr/web/xslt/paramètres_des_instructions_de_traitement/index.html b/files/fr/web/xslt/pi_parameters/index.html index 057d35fca8..057d35fca8 100644 --- a/files/fr/web/xslt/paramètres_des_instructions_de_traitement/index.html +++ b/files/fr/web/xslt/pi_parameters/index.html diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/présentation/index.html b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.html index 02ff8fbc27..02ff8fbc27 100644 --- a/files/fr/web/xslt/transformations_xml_avec_xslt/présentation/index.html +++ b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.html diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html index d91041105f..d91041105f 100644 --- a/files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html +++ b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/index.html b/files/fr/web/xslt/transforming_xml_with_xslt/index.html index 11c1e139b0..11c1e139b0 100644 --- a/files/fr/web/xslt/transformations_xml_avec_xslt/index.html +++ b/files/fr/web/xslt/transforming_xml_with_xslt/index.html diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/la_référence_xslt_xpath_de_netscape/index.html b/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html index 0e839c04d8..0e839c04d8 100644 --- a/files/fr/web/xslt/transformations_xml_avec_xslt/la_référence_xslt_xpath_de_netscape/index.html +++ b/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html diff --git a/files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html b/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html index b92020c2f9..b92020c2f9 100644 --- a/files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html +++ b/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avancé/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html index 87a1d812cc..87a1d812cc 100644 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avancé/index.html +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.html index 7031df3d90..7031df3d90 100644 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.html diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/index.html index bf11103d83..bf11103d83 100644 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/index.html diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.html index 0cfa95c2c8..0cfa95c2c8 100644 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.html diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/resources/index.html index e747875fe8..e747875fe8 100644 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/resources/index.html diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/définition_de_paramètres/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html index 43cf60370b..43cf60370b 100644 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/définition_de_paramètres/index.html +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html |